JavaScript 国际化 API

我很高兴地宣布，自 r197261 起，WebKit 已完全支持 JavaScript 的 ECMA-402 国际化 API。

此前，国际化功能只能通过数兆字节的库实现。现在，它已内置于浏览器中，节省了时间和带宽。

什么是国际化？

国际化使数据呈现适应用户的语言和国家/地区。

考虑以下锻炼摘要

您骑行了 1.2 小时，于 2016 年 9 月 25 日下午 2:45 开始。

您可能认为这份摘要适用于任何说英语的人。但在美国以外的地区，它可能不适用。

在英国，最佳文本是

您骑行了 1.2 小时，于 2016 年 9 月 25 日 14:45 开始。

在南非，最佳文本是

您骑行了 1,2 小时，于 2016 年 9 月 25 日下午 2:45 开始。

这些细节因语言而异，有时甚至在使用相同语言的国家/地区之间也有所不同。

如果我们提前准备好所有内容，可以手动进行预翻译。但我们将动态生成锻炼数据，因此我们需要一个 API 来即时更改数据呈现。JavaScript 国际化 API 解决了这一需求。

我们将语言和国家/地区的组合（例如“英式英语”）称为“区域设置”（locale）。

根据区域设置改变呈现方式的数据类型包括时间、日期、数字、货币和按字母顺序排列的词语。

国际化实践

国际化 API 包含两部分：便利函数和显式构造函数。便利函数封装了显式构造函数，自动处理一些细节。

便利函数适用于可能需要国际化的常见数据类型

String.prototype.localeCompare()

Number.prototype.toLocaleString()

Date.prototype.toLocaleString()
Date.prototype.toLocaleDateString()
Date.prototype.toLocaleTimeString()

您可以使用 Date.prototype.toLocaleTimeString 便利函数生成上述时间的区域设置感知变体

var date = new Date(2016, 9, 25, 14, 45);
var timeString = date.toLocaleTimeString(); // "14:45:00" in the UK

通过更多选项，您可以实现上述精确显示，并移除秒字段

var date = new Date(2016, 9, 25, 14, 45);
var timeString = date.toLocaleTimeString(
    undefined, { hour: "2-digit", minute:"2-digit" }); // "14:45" in the UK

显式构造函数提供了一种持久引用一组国际化规则的方式

Intl.Collator
Intl.NumberFormat
Intl.DateTimeFormat

如果我们计划显示大量日期，我们会保存一个日期格式化器并重复使用它

var formatter = Intl.DateTimeFormat(
    undefined, { hour: "2-digit", minute:"2-digit" }); // Persistent formatter

var date = new Date(2016, 9, 25, 14, 45);
var timeString = formatter.format(date); // "14:45" in the UK

区域设置代码

默认情况下，上述 API 会根据系统偏好设置遵守用户的区域设置。

您可能更喜欢指定区域设置。例如，如果您提供了特定于区域设置的网页内容变体，您会希望您的数据呈现方式与之匹配。

如果覆盖默认设置，我们可以指定小时计数在南非的变体

var hours = 1.2;
hours.toLocaleString("en-za"); // "1,2"

字符串代码“en-za”指定“南非英语”。此代码是 IETF BCP-47 标签。上述每个 API 都接受一个可选的区域设置标签作为第一个参数。

资源

ECMA-402 规范可在网上查阅。您还可以关注规范的未来发展。