← 首页 / Intl · 浏览器内置的本地化引擎 待审核 9 页

Intl · 浏览器内置的本地化引擎

把数字、日期、列表、复数、排序「显示给某个地区的人看」,不应自行实现。每个浏览器都内置了一整套 ECMA-402 的本地化数据(基于 Unicode CLDR),入口就是全局对象 Intl。它的子 API 形状高度统一:new Intl.X(locales, options) 造一个可复用的格式化器,再 .format(value)。每页都能改 locale / options、看真实运行结果(底层跑你浏览器的原生 Intl)。除了这些 new 出来的格式化器,Intl 上还挂着几个直接调用的顶层静态方法(getCanonicalLocales / supportedValuesOf)。

快速选型: 展示数字/货币/百分比/单位 → NumberFormat;日期时间 → DateTimeFormat;「3 天前 / 下周」→ RelativeTimeFormat;「2 小时 5 分」→ DurationFormat;把数组拼成「甲、乙和丙」→ ListFormat;决定用 1 item 还是 2 items → PluralRules;把文本切成字 / 词 / 句 → Segmenter;按语言习惯排序/查找字符串 → Collator;把语言 / 地区 / 货币 / 书写体代码显示成名字 → DisplayNames。

shape · 共同形态

共同形态：`new Intl.X(locales, options)`

九个 API 长得几乎一样：先用 locale（像 zh-Hant-HK-u-nu-hanidec 这样分段）+ options 造一个格式化器，再反复 .format()。看懂 BCP-47 locale 串、-u- Unicode 扩展、locale 协商(lookup/best fit + fallback)、为什么要缓存格式化器，以及 resolvedOptions() 告诉你「最终到底用了什么」。

Locale · locale 对象本身

Intl.Locale：把 locale 串变成可读可改的对象

这一家里的异类——不格式化任何东西，只把 zh-Hant-HK-u-nu-hanidec 解析、规范化成一个对象：逐字段读 language/script/region/numberingSystem…、用 options 覆写、还能 maximize()(zh→zh-Hans-CN)/ minimize() 补全或收敛默认字段。当作「locale 串的解析器」，处理清楚再传给真正的格式化器。

statics · 顶层静态方法

Intl 顶层静态方法 + `localeMatcher`

不 new、不格式化值，直接挂在 Intl 上的两个工具：getCanonicalLocales() 把一串 locale 规范化 + 去重（EN-us→en-US、i-klingon→tlh，非法串抛 RangeError）;supportedValuesOf(key) 列出本运行时支持的 timeZone / currency / calendar / collation / numberingSystem / unit 标识（用来生成下拉框）。顺带在 shape 页看 localeMatcher 的 lookup vs best fit 协商差异。

DisplayNames · 代码→名称

Intl.DisplayNames：把代码翻成人类可读的名字

和 Locale 互补——后者把 en-US 拆成字段，它把这些代码翻成名字:new Intl.DisplayNames(locale,{type}) 再 .of(code)，按 type(language / region / script / currency / calendar / dateTimeField)查出当前 locale 下的名称（HK→香港、JPY→日元）。看 languageDisplay 在「美式英语」与「英语（美国）」间切换，以及 fallback 控制查不到时回代码还是 undefined。

NumberFormat · 数字/货币/单位

Intl.NumberFormat：数字、货币、百分比、单位

同一个 1234567.89，在不同 locale 里分组符、小数点、货币位置全不同。可调 style(decimal/currency/percent/unit)、notation:'compact'(1.2M / 120万)、signDisplay、有效数字与 roundingMode；再用 formatToParts 把结果拆成「整数段 / 分组符 / 货币符」，以及 formatRange 输出「3–5」。

DateTimeFormat · 日期时间

Intl.DateTimeFormat：日期与时间

从简便的 dateStyle / timeStyle 预设到逐字段指定(weekday/year/…/dayPeriod)，配 timeZone 把同一时刻投影到不同城市、hourCycle 选 12/24 小时；formatToParts 拆出可重排的零件，formatRange 输出「10月3–5日」。它格式化的是某个时刻，而 locale + timeZone 决定怎么显示。

RelativeTime + Duration · 时间跨度

RelativeTimeFormat + DurationFormat：相对时间 & 时长

两个都把时间跨度转成自然语言。RelativeTimeFormat 把 (-1,'day') 变成「昨天 / yesterday」、(3,'day') 变成「in 3 days」，关键在 numeric:'auto' 才会输出「昨天」而非「1 天前」。DurationFormat（较新）把 {hours:2, minutes:5} 拼成「2 hours, 5 minutes」/「2小时5分钟」，有 long/short/narrow/digital 多档。

ListFormat + PluralRules · 列表与复数

ListFormat + PluralRules：列表拼接 & 复数

拼一句「You have 3 new messages from Amy, Bob, and Cara」就同时用上两者。ListFormat 处理「甲、乙和丙」里的连接词与 Oxford comma(conjunction/disjunction/unit)。PluralRules 解决「英语 1→one、其余→other，但俄语/阿拉伯语有 few/many」——不要硬编码 n===1?'item':'items'，看它如何对应 CLDR 的 6 个类别。

Segmenter + Collator · 切分 & 排序

Segmenter + Collator：切分文本 & 本地化排序

两个都是「按语言规则」处理字符串。Segmenter 把文本切成 grapheme（👨‍👩‍👧 算一个）/ word（中日泰无空格也能分词）/ sentence——比 .split('') 正确得多。Collator 按 locale 排序：德语 ä、瑞典语 z<å、numeric:true 让 file2 < file10、sensitivity 控制大小写/重音敏感度——比 < 直接比 code point 可靠。

交给 Intl 而非自行拼接的原因:本地化数据(分组符、月份名、复数规则、排序权重、紧凑写法…)按地区有成千上万条,而且会随版本更新。Intl 直接复用浏览器/操作系统里那份持续更新的 CLDR 数据,零依赖、零网络开销、性能好(格式化器可缓存复用)。调用方只需说明「给谁看(locale)、想要什么形式(options)」。