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];
        }
      });
    });
}

• 支持 data-i18n-attr 扩展到属性（如 placeholder、title）
• 表单控件、SVG 文本、动态插入的 DOM 需额外调用一次该函数
• 配合 Intl API 处理时间/货币（new Intl.DateTimeFormat('zh').format(new Date())）

记住用户选择并响应系统语言变化

切换语言不只是改页面，还要持久化偏好并兼顾系统行为：

• 切换时写入 localStorage.setItem('preferred-lang', 'en')
• 监听 languagechange 事件（部分浏览器支持），或在页面初始化时比对 navigator.language 与当前语言，自动提示切换
• URL 中带语言参数（如 /en/settings）更利于 SEO 和分享，可用 history.pushState 同步