「前端开发」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/i18next@21.6.3/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>

测试结果:


🙏至此,非常感谢阅读🙏

相关推荐
listhi5204 分钟前
利用React Hooks简化状态管理
前端·javascript·react.js
一点一木27 分钟前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊33 分钟前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost1 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
BestAns1 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
CsharpDev-奶豆哥2 小时前
JavaScript性能优化实战大纲
开发语言·javascript·性能优化
专注前端30年2 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化
烛阴2 小时前
Lua世界的基石:变量、作用域与七大数据类型
前端·lua
张拭心2 小时前
“不卷 AI、不碰币、下班不收消息”——Android 知名技术大牛 Jake Wharton 的求职价值观
android·前端·aigc
SoaringHeart2 小时前
Flutter疑难解决:单独让某个页面的电池栏标签颜色改变
前端·flutter