JavaScript多语言支持教程

JavaScript国际化（i18n）的核心在于利用原生Intl对象——而非繁琐的手动条件判断——精准、可靠地处理日期格式、数字与货币显示、多语言排序等本地化细节，它严格依赖标准BCP 47语言标签和细粒度options配置，确保“2024年3月15日”“1.234,56 €”“按拼音正确排序的中文姓名”等体验真正符合地域习惯；但要落地，还需攻克locale动态获取、SSR/SSG环境适配及老旧浏览器兼容性等实战挑战——掌握Intl，才是构建全球化Web应用的真正起点。

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）靠后，但拼音顺序是 “李” 在 “张” 前。同样，日文假名、阿拉伯文字母表顺序也完全失效。

• 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' 并提供降级策略。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript多语言支持教程》文章吧，也可关注golang学习网公众号了解相关技术文章。