Intl API 能解决哪些国际化格式化问题？

简化版

Intl 是浏览器内置的国际化 API，可以格式化日期、数字、货币、相对时间、列表、复数规则等。它比手写字符串拼接更可靠，因为不同地区的顺序、分隔符、货币符号和复数规则都不同。

常用对象包括 Intl.DateTimeFormat、Intl.NumberFormat、Intl.RelativeTimeFormat、Intl.Collator。

详细版

const price = new Intl.NumberFormat("zh-CN", {
  style: "currency",
  currency: "CNY"
}).format(12345.6);

console.log(price); // ¥12,345.60

日期格式化：

const text = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium",
  timeZone: "Asia/Shanghai"
}).format(new Date("2026-07-29T00:00:00Z"));

排序：

const collator = new Intl.Collator("zh-CN");
["张三", "李四"].sort(collator.compare);

工程上不要在渲染循环里反复创建 formatter，应该复用实例。

完整版教学

一、国际化不只是翻译文案

i18n 包括语言、日期、数字、货币、排序、复数、时区、书写方向等。

手写 "￥" + amount.toFixed(2) 看起来简单，但在多地区场景会很快失控。

Intl 的价值是把区域规则交给运行环境，而不是把所有格式规则写死在业务代码里。

二、NumberFormat 处理数字和货币

const cn = new Intl.NumberFormat("zh-CN");
const us = new Intl.NumberFormat("en-US");

console.log(cn.format(1234567.89));
console.log(us.format(1234567.89));

货币格式：

new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD"
}).format(99.9);

场景	推荐 API
普通数字	`Intl.NumberFormat`
货币	`Intl.NumberFormat` + `currency`
百分比	`Intl.NumberFormat` + `percent`

三、DateTimeFormat 处理日期和时区

日期顺序在不同地区不同。

const date = new Date("2026-07-29T08:00:00Z");

new Intl.DateTimeFormat("zh-CN", {
  dateStyle: "full",
  timeZone: "Asia/Shanghai"
}).format(date);

明确传 timeZone 可以避免服务器、用户浏览器、测试环境时区不同导致展示不一致。

四、RelativeTimeFormat 处理相对时间

const rtf = new Intl.RelativeTimeFormat("zh-CN", {
  numeric: "auto"
});

rtf.format(-1, "day"); // 昨天
rtf.format(3, "minute"); // 3分钟后

相对时间不要简单拼接“前”和“后”，不同语言的语序可能不同。

五、Collator 处理本地化排序和比较

字符串排序不是简单比较 Unicode 编码。

const names = ["张三", "李四", "王五"];
const collator = new Intl.Collator("zh-CN");

names.sort(collator.compare);

对于搜索、表格排序、通讯录等场景，Intl.Collator 比默认 sort 更符合用户预期。

六、性能和兼容性注意

创建 formatter 有成本，列表渲染里应复用。

const formatter = new Intl.NumberFormat("zh-CN");

items.map(item => formatter.format(item.amount));

兼容性方面，现代浏览器基本支持核心 Intl，但具体 locale 数据和较新的 API 仍要看目标环境。

七、常见误区与追问

误区：国际化就是把中文替换成英文。 日期、数字、货币、排序和复数规则也属于国际化。
误区：金额格式可以手写符号拼接。 不同地区的符号位置、小数位和分组规则不同。
误区：默认时区展示一定符合业务。 跨地区产品应明确时区语义。
误区：每次 render 创建 formatter 没影响。 大列表中反复创建会有额外成本。
追问：Intl.Collator 解决什么问题？ 它用于按本地语言规则比较和排序字符串。
追问：为什么相对时间不建议自己拼接？ 不同语言语序和复数规则不同。

八、加强记忆

按功能记：

number / currency -> NumberFormat
date / timezone   -> DateTimeFormat
relative time     -> RelativeTimeFormat
sort / compare    -> Collator

回答时从“国际化不只是翻译”开场，再给数字、日期、相对时间和排序四个例子，最后补复用 formatter 与明确时区的工程注意点。

简化版

详细版