JavaScript国际化靠Intl对象统一处理本地化细节,而非手动条件判断;Intl.DateTimeFormat、NumberFormat、Collator分别管控日期格式、数字货币格式、多语言排序,需正确使用BCP 47 locale和options,并注意兼容性与性能优化。

JavaScript 中的国际化(i18n)不是靠手动写 if (lang === 'zh') {...} 实现的,而是用浏览器原生的 Intl 对象统一处理——它不解决翻译文案本身,但决定了“数字怎么分组”“日期怎么排”“货币符号放哪”这些本地化细节。
Intl.DateTimeFormat 处理日期/时间格式时要注意 locale 和 options 的组合效果
同一个 new Date() 在不同地区显示差异极大:'2024-03-15' 在 en-US 是 "3/15/2024",在 zh-CN 是 "2024年3月15日",在 ja-JP 是 "2024年3月15日"(但排序逻辑隐含在 calendar 系统里)。关键不在“翻译”,而在“约定”。
-
locale必须是标准 BCP 47 标签,如'de-DE'、'pt-BR';'de'或'BR'可能降级为默认行为,不可靠 -
options中的year、month、day值为'numeric'或'2-digit'会影响是否补零,'long'会触发本地化名称(如month: 'long'→'März') - 不要依赖
toString()或Date.prototype.toLocaleString(),它们受用户系统设置干扰,Intl.DateTimeFormat才可控
const formatter = new Intl.DateTimeFormat('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
console.log(formatter.format(new Date())); // "2024-03-15 14:22"
Intl.NumberFormat 对千分位、小数位、货币符号位置有严格 locale 依赖
数字格式不是“加个逗号”那么简单。1234567.89 在 en-US 是 "1,234,567.89",在 de-DE 是 "1.234.567,89",在 ar-EG 是 "١٬٢٣٤٬٥٦٧٫٨٩"(阿拉伯数字字符 + 本地分隔符)。货币更复杂:符号位置、是否空格、是否使用本地货币名称(如 JPY 显示为 "¥1,234" 而非 "1,234 ¥")全由 locale 决定。
-
style: 'currency'必须配合currency(如'USD'),否则报错 -
currencyDisplay可选'symbol'、'code'、'name',后者在en-US显示"US dollar",在fr-FR显示"dollar américain" - 避免用
toFixed()配合字符串拼接做货币格式——它不处理 locale 分隔符,也不支持负数本地化括号(如de-DE的"(1.234,56)")
const moneyFormatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'symbol'
});
console.log(moneyFormatter.format(-1234.56)); // "-1.234,56 €"
Intl.Collator 解决中文、日文、阿拉伯文等排序乱序问题
直接用 Array.prototype.sort() 对中文数组排序会得到乱序结果,因为默认按 UTF-16 码点排,'张'(U+5F20)比 '李'(U+674E)靠后,但拼音顺序是 “李” 在 “张” 前。同样,日文假名、阿拉伯文字母表顺序也完全失效。
立即学习“Java免费学习笔记(深入)”;
-
new Intl.Collator('zh-Hans')启用中文拼音排序;'ja'启用五十音图顺序;'ar'启用阿拉伯字母表顺序 -
sensitivity设为'base'可忽略大小写和重音(适合搜索场景);设为'variant'则区分大小写和变音符号(适合精确匹配) - 不能只靠
localeCompare()方法,它内部调用Intl.Collator,但每次调用都新建实例,性能差;应复用Collator实例
const collator = new Intl.Collator('zh-Hans', { sensitivity: 'base' });
['张三', '李四', '王五'].sort(collator.compare); // ['李四', '王五', '张三']
真正难的不是调用 Intl API,而是把 locale 从 URL、HTTP header 或用户偏好中稳定获取,并在服务端渲染(SSR)或静态生成(SSG)时提前注入正确 locale;另外,Intl 在旧版 Safari 或某些安卓 WebView 中可能缺失部分功能,需检查 typeof Intl !== 'undefined' 并提供降级策略。










