javaScript国际化需手动管理语言包加载、键值替换和locale切换，推荐i18next；须规范处理语言码（如split(‘-‘)[0]）、校验supportedLngs、监听languageChanged刷新dom、用resolvedLanguage调Intl API，并构建时提取文案防漏翻。

javascript 实现国际化（i18n）不靠浏览器自动适配，得自己管语言包加载、键值替换和 locale 切换逻辑——现代项目基本都用 i18next 或 react-i18next，纯原生 js 也能做，但得手动处理 navigator.language 解析、复数规则、日期格式等细节。

用 i18next 初始化并加载语言包

i18next 是目前最成熟的 JS i18n 库，支持按需加载、后端集成、插件扩展。初始化时必须显式指定 fallbackLng 和 supportedLngs，否则切换语言后可能回退到 dev 或空字符串，导致文案丢失。

常见错误：直接传 navigator.language 当作有效语言码，但实际它可能是 zh-CN、en-US、zh-Hans，而你的语言包只叫 zh 或 en。得用 languageDetector 插件或手动 normalize：

• 取 navigator.language.split('-')[0] 得基础语言码（如 zh、en）
• 在 supportedLngs: ['zh', 'en', 'ja'] 中校验是否存在
• 未命中时 fallback 到 en，别留空

import i18next from 'i18next';  i18next.init({   lng: navigator.language.split('-')[0],   fallbackLng: 'en',   supportedLngs: ['zh', 'en', 'ja'],   resources: {     zh: { translation: { hello: '你好' } },     en: { translation: { hello: 'Hello' } },     ja: { translation: { hello: 'こんにちは' } }   } });

动态切换语言时避免 DOM 重渲染失效

调用 i18next.changeLanguage('ja') 后，已挂载的文本节点不会自动更新——除非你用了 i18next-react 的 useTranslation Hook，或者手动监听 languageChanged 事件并触发重绘。

立即学习“Java免费学习笔记（深入）”；

纯 html + JS 场景下，推荐给需要翻译的元素加 data-i18n 属性，然后统一刷新：

• 写
  

• 用 document.querySelectorAll('[data-i18n]') 批量查到所有元素
• 遍历调用 i18next.t(key) 填充 textContent
• 绑定 i18next.on('languageChanged', refreshI18nElements)

漏掉监听或没清空旧内容，会导致中英混排或重复插入。

日期、数字、复数等 locale 敏感格式不能硬编码

i18next 默认只管字符串翻译，Intl.dateTimeformat、Intl.NumberFormat 这些得单独用，且必须传入当前语言码（不是资源 key）：

• 用 i18next.resolvedLanguage（不是 i18next.language）获取真实生效的 locale，比如 zh-Hans-CN
• new Intl.DateTimeFormat(i18next.resolvedLanguage).format(new Date())
• 复数处理别手写 if (count === 1) ... else ...，改用 i18next 的 plural 支持（需开启 interpolation: { escapeValue: false } 并配置复数规则）

传错 locale 字符串（如传 zh 却期望显示简体字），Intl API 可能静默降级为 en-US 格式。

构建时提取文案 & 避免运行时加载失败

开发阶段本地 json 文件可直接 import，但上线后建议把语言包打包进 JS 或走 cdn，别依赖 fetch('/locales/en/translation.json')——网络失败或 CORS 会直接卡死翻译。

如果必须按需加载，务必加错误兜底：

• 用 i18next.use(Backend) 插件时，设置 load: 'languageOnly' 防止请求 zh-CN.json 失败后不尝试 zh.json
• 在 backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' } 中确保路径与部署结构一致
• CI 构建时用 i18next-parser 扫描源码提取 key，避免漏翻或拼写错误

最常被忽略的是：服务端返回 404 的语言包 JSON，i18next 默认静默失败，控制台无报错，只显示原始 key，比如 {{"welcome": "welcome"}} —— 要开 debug: true 才能看到加载日志。