javascript如何实现国际化_如何支持多语言网站_技术教程

JavaScript国际化核心是分离语言内容与逻辑代码并动态加载翻译资源，用JSON管理多语言文案、Intl API处理格式化、运行时切换并持久化用户偏好。

JavaScript 实现国际化（i18n）的核心是**分离语言内容与逻辑代码，按用户语言环境动态加载对应翻译资源**。不依赖后端时，前端可完全自主管理多语言切换；结合服务端还能实现更精准的区域化（如日期、货币格式）。关键不在“用什么库”，而在“怎么组织数据 + 怎么触发切换 + 怎么保持状态”。

用 JSON 管理翻译资源，结构清晰易维护

每种语言一个独立 JSON 文件，键名统一（推荐使用英文 key），值为对应语言的文案：

// locales/zh.json

{ "welcome": "欢迎访问", "submit": "提交", "date_format": "YYYY年MM月DD日" }


// locales/en.json

{ "welcome": "Welcome", "submit": "Submit", "date_format": "YYYY-MM-DD" }

避免在 JS 里硬编码字符串，所有展示文本都通过 key 查找。建议按模块或页面分文件（如 common.json、profile.json），后期合并或按需加载更灵活。

用 Intl API 处理格式化，不用自己写逻辑

日期、数字、货币、排序等本地化格式，直接用浏览器原生 Intl 对象：

new Intl.DateTimeFormat('zh-CN').format(new Date()) → "2025年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 不一致。