JavaScript国际化（i18n）是前端应用根据用户语言环境动态切换界面语言的能力，核心包括语言资源分离（JSON管理）、运行时检测与切换、复数/占位符/格式化支持，推荐使用i18next+原生Intl方案。
JavaScript国际化（i18n）是指让前端应用能根据用户语言环境动态切换界面语言，不依赖后端渲染，核心是把文本内容从代码中抽离、按语言分组管理，并在运行时按需加载或切换。
语言资源分离：用 JSON 管理多语言文案
把不同语言的字符串存成独立的 JSON 文件，比如：
zh.json：{"welcome": "欢迎使用", "save": "保存"}
en.json：{"welcome": "Welcome", "save": "Save"}
这样代码里只写 key（如 t('welcome')），具体显示什么由当前语言包决定。
运行时语言检测与切换
可通过以下方式确定初始语言：
- 读取
navigator.language或navigator.languages[0] - 检查 URL 参数（如
?lang=ja） - 读取 localStorage 中用户上次选择的语言
切换语言时，重新加载对应语言包（可预加载，也可动态 fetch），再触发 UI 重渲染（如 React 可用 Context + useEffect；纯 JS 可遍历带 data-i18n 属性的元素并替换文本）。
支持复数、占位符和格式化
基础 key-value 不够用，真实场景需要：
立即学习“Java免费学习笔记（深入）”；
-
占位符：如
"Hello {name}"→t('hello', { name: 'Alice' }) -
复数规则：英文用
count == 1 ? 'item' : 'items'，但阿拉伯语有 6 种复数形式，需按语言规则匹配 -
日期/数字/货币格式：用
Intl.DateTimeFormat、Intl.NumberFormat等原生 API，它们会自动适配当前 locale
轻量方案推荐：i18next + 原生 Intl
不建议从零手写 i18n 系统。推荐组合：
- i18next：处理语言包加载、key 查找、插值、复数、命名空间等逻辑
- Intl 对象：专注格式化（时间、数字、相对时间、列表等），它由浏览器原生支持，无需额外包
- 搭配
i18next-browser-languagedetector自动探测语言，i18next-http-backend加载远程语言文件
简单初始化示例：
i18next
.use(LanguageDetector)
.use(Backend)
.init({
fallbackLng: 'en',
lng: 'zh',
interpolation: { escapeValue: false }
});
