「前端开发」JavaScript 实现国际化处理

🙏废话不多说系列，直接开整🙏

一、说明和注意事项

（1）说明和思路

使用 i18next.init 初始化国际化配置，指定默认语言和资源（翻译文本），包括多个文本内容。
定义 updateContent 函数，用于更新多个文本内容，调用 i18next.t 方法获取翻译文本并更新相应的 HTML 元素。
为每个按钮添加事件监听器，当用户点击按钮时，调用 i18next.changeLanguage 方法切换语言，并调用 updateContent 函数更新页面内容。

（2）扩展内容

多文本内容 ：你可以在 resources 对象中添加更多的键值对，以支持更多的文本内容。
动态内容 ：如果你的网页内容是动态生成的，可以在生成内容时使用 i18next.t 进行翻译。
复杂结构：对于更复杂的网页结构，可以将每个部分的文本提取到不同的对象中，以便于管理和维护。

（3）注意事项

确保在国际化过程中考虑到文化差异，例如日期格式、数字格式等。
如果需要支持更多语言，可以根据需要扩展 resources ****对象。
i18next ****还支持插件，可以实现更多功能，比如语言检测、后端加载等。

二、完整代码演示

html 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>国际化示例</title>
    <script src="https://unpkg.com/[email protected]/i18next.min.js"></script>
</head>
<body>
    <h1 id="title"></h1>
    <p id="description"></p>
    <button id="change-lang-en">切换到英文</button>
    <button id="change-lang-zh">切换到中文</button>

    <script>
        // 初始化 i18next
        i18next.init({
            lng: 'zh', // 默认语言
            resources: {
                en: {
                    translation: {
                        "title": "Welcome to Our Website",
                        "description": "This is a sample description in English."
                    }
                },
                zh: {
                    translation: {
                        "title": "欢迎来到我们的网站",
                        "description": "这是一个中文的示例描述。"
                    }
                }
            }
        }, function(err, t) {
            // 更新页面内容
            updateContent();
        });

        // 更新页面内容的函数
        function updateContent() {
            document.getElementById('title').innerHTML = i18next.t('title');
            document.getElementById('description').innerHTML = i18next.t('description');
        }

        // 切换语言的事件处理
        document.getElementById('change-lang-en').addEventListener('click', function() {
            i18next.changeLanguage('en', function(err, t) {
                updateContent();
            });
        });

        document.getElementById('change-lang-zh').addEventListener('click', function() {
            i18next.changeLanguage('zh', function(err, t) {
                updateContent();
            });
        });
    </script>
</body>
</html>

测试结果：

🙏至此，非常感谢阅读🙏