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 才能看到加载日志。
