JavaScript国际化核心是分离语言内容与代码逻辑,通过多语言JSON资源、动态加载切换及Intl API实现locale感知格式化,并可借助ICU语法处理复数等复杂场景。

JavaScript 国际化(i18n)的核心是把语言内容从代码逻辑中分离出来,按用户语言环境动态加载对应文本。不依赖后端、纯前端实现时,关键在于语言包管理、运行时切换和 locale 感知的格式化。
准备多语言资源文件
将各语言的文案抽成独立 JSON 文件,按 key-value 组织,key 保持一致,value 为对应语言的翻译:
// locales/zh.json
{ "welcome": "欢迎使用", "save": "保存", "date_format": "yyyy年MM月dd日" }
// locales/en.json
{ "welcome": "Welcome", "save": "Save", "date_format": "yyyy/MM/dd" }
// locales/ja.json
{ "welcome": "ようこそ", "save": "保存", "date_format": "yyyy年MM月dd日" }
推荐用扁平结构(避免深层嵌套),便于工具提取和维护;key 命名建议用小写+下划线,如 user_profile_title,提升可读性与一致性。
运行时加载与切换语言
通过动态 import() 加载对应语言包,配合状态管理实现即时切换:
立即学习“Java免费学习笔记(深入)”;
- 监听 navigator.language 或读取 URL 参数(如 ?lang=ja)确定初始语言
- 用 Map 缓存已加载的语言包,避免重复请求
- 提供切换函数,更新全局 i18n 实例并触发 UI 重渲染(如 React 中用 Context 或 Zustand)
示例片段:
网奇Eshop是一个带有国际化语言支持的系统,可以同时在一个页面上显示全球任何一种语言而没有任何障碍、任何乱码。在本系统中您可以发现,后台可以用任意一种语言对前台进行管理、录入而没有阻碍。而任何一个国家的浏览者也可以用他们的本国语言在你的网站上下订单、留言。用户可以通过后台随意设定软件语言,也就是说你可以用本软件开设简体中文、繁体中文与英文或者其他语言的网上商店。网奇Eshop系统全部版本都使用模
let currentLocale = 'zh'; const messages = new Map();async function setLocale(lang) { if (messages.has(lang)) { currentLocale = lang; renderApp(); // 触发视图更新 return; } try { const mod = await import(
./locales/${lang}.json); messages.set(lang, mod.default); currentLocale = lang; renderApp(); } catch (e) { console.warn(Fallback to zh:, e); currentLocale = 'zh'; } }
支持 locale 敏感的格式化(日期、数字、货币)
不要手写格式规则,直接使用浏览器原生 API:
- Intl.DateTimeFormat:按 locale 渲染日期/时间,自动处理星期顺序、月份名、农历等
- Intl.NumberFormat:处理千分位、小数位、货币符号位置(如 ¥1,000 vs $1,000.00)
- Intl.ListFormat:正确连接列表项(中文用顿号,英文用 and,日文用「と」)
例如:
new Intl.DateTimeFormat('ja-JP').format(new Date()); // "2024/06/12"
new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(1234.56); // "1.234,56 €"
进阶:消息语法与复数/上下文处理
简单 key-value 不够用时(比如带变量、复数、性别),可引入轻量库如 messageformat 或 linguijs:
- 支持 ICU Message Syntax,如 {count, plural, one {# item} other {# items}}
- 允许为同一 key 提供不同上下文(如 “book” 在名词/动词场景下翻译不同)
- 配合 CLI 工具提取源码中的 t`...` 或 msg(id) 调用,生成待翻译模板
若项目规模小,也可用模板字符串 + 条件判断临时替代,但长期维护推荐标准化方案。









