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 不够用,真实场景需要:
SV-Cart是开源的电子商务平台。多语言,国际化SV-CART网店系统是一套可以支持各个国家的语言显示的国际电子商务系统,现已支持中文简体、英文、日文、德文和法文,土耳其文,可实现这五种语言在同一平台上的相互转换。免费、开源SV-CART网店系统是一项新的专业开放源代码的WEB2.0网上商城系统,是一套集网上购物和网站内容管理于一体的电子商务解决方案。易操作、多功能SV-CART系统注重操作上的
立即学习“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 }
});










