Intl API 的强大功能：浏览器原生国际化权威指南
国际化不仅仅是翻译。它涉及根据特定区域设置格式化日期、复数化单词、排序名称等更多内容。现代JavaScript提供了Intl API——一种强大、原生的方式来处理i18n，而不是依赖笨重的第三方库。这提醒我们，网络确实是全球性的。
超越语言代码：Intl与区域设置
Intl的核心是区域设置（locale）的概念。区域设置远不止是双字母语言代码（如en表示英语，es表示西班牙语）。它封装了为特定文化群体适当呈现信息所需的完整上下文。这包括：
- 语言：主要语言媒介（如en、es、fr）
- 文字：书写系统（如拉丁文用Latn，西里尔文用Cyrl）
- 地区：地理区域（如US表示美国，GB表示英国，DE表示德国）
- 偏好/变体：进一步的具体文化或语言偏好
通常，您希望根据网页的语言选择区域设置：
1
2
|
// 从HTML lang属性获取页面语言
const pageLocale = document.documentElement.lang || 'en-US'; // 回退到'en-US'
|
核心格式化功能
Intl对象公开了几个构造函数，每个都用于特定的格式化任务。
格式化日期和时间是一个经典的i18n问题。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const date = new Date(2025, 6, 27, 14, 30, 0); // 2025年6月27日下午2:30
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
timeZoneName: 'shortOffset'
};
console.log(new Intl.DateTimeFormat('en-US', options).format(date));
// "Friday, June 27, 2025 at 2:30 PM GMT+8"
console.log(new Intl.DateTimeFormat('de-DE', options).format(date));
// "Freitag, 27. Juni 2025 um 14:30 GMT+8"
|
除了简单的小数位，数字需要仔细处理：千位分隔符、小数标记、货币符号和百分比符号在不同区域设置中差异很大。
1
2
3
4
5
6
7
8
|
const price = 123456.789;
// 货币格式化
console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(price));
// "$123,456.79"
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(price));
// "123.456,79 €"
|
呈现项目列表出人意料地复杂。
1
2
3
4
5
6
7
8
|
const items = ['apples', 'oranges', 'bananas'];
// 连接（"and"）列表
console.log(new Intl.ListFormat('en-US', { type: 'conjunction' }).format(items));
// "apples, oranges, and bananas"
console.log(new Intl.ListFormat('de-DE', { type: 'conjunction' }).format(items));
// "Äpfel, Orangen und Bananen"
|
显示"2天前"或"3个月内"在UI中很常见，但准确本地化这些短语需要大量数据。
1
2
3
4
5
|
const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });
console.log(rtf.format(-1, 'day')); // "yesterday"
console.log(rtf.format(1, 'day')); // "tomorrow"
console.log(rtf.format(-7, 'day')); // "7 days ago"
|
5. Intl.PluralRules：掌握复数化
这是i18n最关键的方面之一。不同的语言有完全不同的复数化规则。
1
2
3
4
5
6
7
8
9
10
11
|
const prEn = new Intl.PluralRules('en-US');
console.log(prEn.select(0)); // "other"
console.log(prEn.select(1)); // "one"
console.log(prEn.select(2)); // "other"
const prAr = new Intl.PluralRules('ar-EG');
console.log(prAr.select(0)); // "zero"
console.log(prAr.select(1)); // "one"
console.log(prAr.select(2)); // "two"
|
6. Intl.DisplayNames：所有内容的本地化名称
需要以用户首选语言显示语言、区域或文字的名称吗？
1
2
3
4
5
6
7
8
9
10
11
|
// 用英语显示语言名称
const langNamesEn = new Intl.DisplayNames(['en'], { type: 'language' });
console.log(langNamesEn.of('fr')); // "French"
console.log(langNamesEn.of('es-MX')); // "Mexican Spanish"
// 显示区域名称
const regionNamesEn = new Intl.DisplayNames(['en'], { type: 'region' });
console.log(regionNamesEn.of('US')); // "United States"
console.log(regionNamesEn.of('DE')); // "Germany"
|
浏览器支持
好消息是Intl在现代浏览器中具有出色的支持。所有主要浏览器（Chrome、Firefox、Safari、Edge）都完全支持讨论的核心功能。您可以自信地使用这些API，而无需为大多数用户基础提供polyfill。
结论：使用Intl拥抱全球网络
Intl API是现代Web开发面向全球受众的基石。它使前端开发人员能够以最少的努力提供高度本地化的用户体验，利用浏览器内置的优化功能。
通过采用Intl，您可以减少依赖、缩小包大小并提高性能，同时确保您的应用程序尊重并适应全球用户多样化的语言和文化期望。停止与自定义格式化逻辑斗争，拥抱这个符合标准的工具！
重要的是要记住，Intl处理数据的格式化。虽然非常强大，但它并不能解决国际化的每个方面。内容翻译、双向文本（RTL/LTR）、特定区域设置的排版和数据格式化之外的深层文化细微差别仍然需要仔细考虑。