JavaScript国际化(i18n)主要通过原生Intl对象实现,基于Unicode CLDR数据提供日期、数字、货币等语言敏感格式化能力,支持locale匹配、fallback及动态切换,无需外部库。

JavaScript 中的国际化(i18n)主要通过内置的 Intl 对象实现,它提供标准化、可配置的语言敏感格式化能力,无需依赖外部库即可处理日期、数字、货币、时间、相对时间、列表和字符串比较等多语言场景。
Intl 是浏览器/运行时原生支持的国际标准封装
Intl 是 ECMAScript 国际化 API 的核心,基于 Unicode CLDR(Common Locale Data Repository)数据,由 TC39 标准化。它不是 JavaScript 自己“发明”的规则,而是把操作系统和区域设置中已有的本地化逻辑,以统一接口暴露给开发者。
- 每个
Intl构造器(如Intl.DateTimeFormat、Intl.NumberFormat)都接受locale和options参数,自动匹配对应语言地区的格式习惯 - 例如:中文地区(
'zh-CN')默认用“年-月-日”,而美国('en-US')用“month/day/year”;德语中千分位用点(1.000.000),法语用空格(1 000 000) - 浏览器会根据用户系统语言或显式传入的 locale 查找最匹配的 CLDR 数据,支持 locale fallback(如传
'pt-BR'但没找到,会退到'pt'或'en')
格式化行为由 locale + options 共同决定,而非硬编码逻辑
传统写法常靠 if-else 判断语言来拼接字符串,容易遗漏边界情况(如阿拉伯语数字、希伯来语从右向左排版、日语平假名星期等)。Intl 把这些规则交给底层实现:
-
new Intl.DateTimeFormat('ja-JP').format(new Date())→"2024年4月5日金曜日"(含年号、汉字星期) -
new Intl.NumberFormat('ar-EG', { style: 'currency', currency: 'EGP' }).format(1234.5)→"١٬٢٣٤٫٥٠ ج.م."(阿拉伯数字+阿拉伯文货币符号+空格分隔) -
new Intl.RelativeTimeFormat('fr', { numeric: 'auto' }).format(-1, 'day')→"hier"(法语自动映射 -1 day → “hier”,非直译“il y a 1 jour”)
支持动态切换与运行时 locale 感知
页面可响应用户语言偏好变化,比如监听 navigator.language 或读取 ,再重新构造 Intl 实例:
立即学习“Java免费学习笔记(深入)”;
- 不推荐复用同一实例跨 locale 使用(
Intl实例是不可变的) - 适合封装成工厂函数:
const getDateTimeFormatter = (locale) => new Intl.DateTimeFormat(locale, { dateStyle: 'full' }) - 搭配
useEffect(React)或watch(Vue)可实现语言切换后自动刷新格式化结果
补充:基础 i18n 流程不止靠 Intl
Intl 解决的是“怎么显示”,但完整国际化还需配合:
- 语言资源管理:用 JSON/YAML 存储翻译文本(如
{ "welcome": { "en": "Hello", "zh": "你好" } }) - 消息格式化:对带占位符的句子,用
Intl.MessageFormat(非原生,需formatjs等库)或模板字符串 +Intl组合处理 - 文本方向与字体:CSS 的
dir属性、text-align: start/end、以及 font fallback 配置仍需手动保障
Intl 能可靠处理多语言格式化,本质是因为它把语言规则从代码中剥离,交由标准化数据驱动——你告诉它“要什么语言”,它就调用对应规则,而不是你写一堆 if 来模拟规则。











