javascript如何实现国际化_怎样轻松切换网站的多语言

夜晨 2025-12-22 00:00:00 次阅读

JavaScript国际化核心是分离语言内容与逻辑代码、动态加载语言包并实时更新界面文本；采用JSON管理文案、按需加载缓存、data-i18n标记替换、Intl处理格式化、localStorage持久化偏好并响应系统语言变化。

JavaScript 实现国际化（i18n）的核心是**分离语言内容与逻辑代码，按用户偏好动态加载对应语言包，并实时更新界面文本**。关键不在于用多复杂的库，而在于结构清晰、切换无刷新、状态可保持。

用 JSON 语言包管理翻译内容

把每种语言的文案单独存为 JSON 文件，结构扁平易维护：

// locales/zh.json
{
  "welcome": "欢迎来到我们的网站",
  "login": "登录",
  "settings": "设置"
}

// locales/en.json
{
  "welcome": "Welcome to our website",
  "login": "Login",
  "settings": "Settings"
}

键名统一用小写+下划线或驼峰，避免空格和特殊字符
嵌套结构慎用（如 {"button": {"submit": "提交"}}），深层嵌套会增加调用成本
日期、数字、复数等需格式化的内容，暂不放这里，交给专门的 i18n 库处理

运行时动态加载 + 缓存语言包

不用一次性加载所有语言，按需 fetch 并缓存，减少首屏体积：

首次访问检测 navigator.language 或读取 localStorage 中保存的用户选择
用 import() 动态导入或 fetch().then(r => r.json()) 加载对应 JSON
加载后存入内存对象（如 const messages = {}），后续切换直接读取，不重复请求

统一文本替换机制（无框架也够用）

给 HTML 元素加 data-i18n 属性标记需要翻译的 key：

再写一个简单函数批量替换：

function applyLocale(lang) {
  fetch(`/locales/${lang}.json`)
    .then(r => r.json())
    .then(translations => {
      document.querySelectorAll('[data-i18n]').forEach(el => {
        const key = el.dataset.i18n;
        if (translations[key] !== undefined) {
          el.textContent = translations[key];
        }
      });
    });
}