JavaScript国际化核心是分离语言内容与逻辑代码并动态加载翻译资源，用JSON管理多语言文案、Intl API处理格式化、运行时切换并持久化用户偏好。
JavaScript 实现国际化（i18n）的核心是**分离语言内容与逻辑代码，按用户语言环境动态加载对应翻译资源**。不依赖后端时，前端可完全自主管理多语言切换；结合服务端还能实现更精准的区域化（如日期、货币格式）。关键不在“用什么库”，而在“怎么组织数据 + 怎么触发切换 + 怎么保持状态”。
用 JSON 管理翻译资源，结构清晰易维护
每种语言一个独立 JSON 文件，键名统一（推荐使用英文 key），值为对应语言的文案：
// locales/zh.json<br>
{ "welcome": "欢迎访问", "submit": "提交", "date_format": "YYYY年MM月DD日" }<br><br>
// locales/en.json<br>
{ "welcome": "Welcome", "submit": "Submit", "date_format": "YYYY-MM-DD" }
避免在 JS 里硬编码字符串，所有展示文本都通过 key 查找。建议按模块或页面分文件（如 common.json、profile.json），后期合并或按需加载更灵活。
用 Intl API 处理格式化，不用自己写逻辑
日期、数字、货币、排序等本地化格式，直接用浏览器原生 Intl 对象：
立即学习“Java免费学习笔记（深入）”；
-
new Intl.DateTimeFormat('zh-CN').format(new Date())→ "2024年6月12日" -
new Intl.NumberFormat('de-DE').format(1234567.89)→ "1.234.567,89" -
new Intl.ListFormat('ja', { style: 'long', type: 'conjunction' }).format(['A', 'B', 'C'])→ "A、B、およびC"
这些 API 自动识别系统语言，也支持手动传入 locale 字符串，和你的翻译资源联动即可。
运行时切换语言，保持用户选择并更新 DOM
切换本质是两步：更新当前 locale 标识 + 重新渲染含文本的节点。常见做法：
- 把翻译函数挂到全局或封装成工具（如
t('welcome')），内部根据当前 locale 读取对应 JSON - 监听语言切换按钮，加载新语言包（可用
fetch动态导入），成功后更新 locale 状态 - 用事件或响应式机制（如
CustomEvent或信号 state）通知组件刷新文本 —— 若用 Vue/React，直接触发 re-render；纯 JS 可遍历带data-i18n属性的元素批量替换
记得把用户选择存到 localStorage 或 cookie，下次打开自动恢复，比只读 navigator.language 更友好。
进阶：支持复数、占位符、嵌套，避免简单拼接
真实场景中，文案常含变量或语法变化（如 “你有 1 条消息” / “你有 3 条消息”）。别用 `你有 ${n} 条消息` 这种硬拼：
- 用
Intl.PluralRules判断复数规则（中文无复数，但阿拉伯语有6种） - 用模板字符串配合 key 映射：
t('msg_count', { count: n })，翻译资源里写："msg_count": "{count, plural, one {你有 # 条消息} other {你有 # 条消息}}" - 推荐轻量库如 formatjs 或 i18next（仅核心包约 5KB），它们已处理好 ICU 消息语法解析
复杂项目可搭配构建工具，在编译时提取 t() 中的 key 自动生成空翻译模板，减少漏翻。
基本上就这些。不需要框架也能做，重点是把语言数据抽离、用标准 API 做格式化、让用户能真正切语言并记住偏好。不复杂但容易忽略细节，比如没处理异步加载失败、没降级到默认语言、或日期格式和文案 locale 不一致。
