什么是JavaScript中的国际化与本地化_使用Intl对象处理多语言支持【教程】

7次阅读

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

什么是 JavaScript 中的国际化与本地化_使用 Intl 对象处理多语言支持【教程】

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 中的 yearmonthday 值为 '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.89en-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' 并提供降级策略。

text=ZqhQzanResources