ECMAScript 2021（ES12）中的新国际化 API-JavaScript中文网-JavaScript教程资源分享门户

随着全球化的不断发展，国际化已经成为了前端开发中必不可少的一部分。ECMAScript 2021（ES12）中新增了一些新的国际化 API，使得前端开发者可以更加便捷地处理不同语言和地区的数据。

1. `Intl.DisplayNames`

Intl.DisplayNames API 可以将语言、地区、货币等标识符转换为对应的名称。例如，将 en-US 转换为 English (United States)。

1.1 基本用法

const displayNames = new Intl.DisplayNames(['en'], { type: 'region' });
console.log(displayNames.of('US')); // United States

在上述代码中，我们创建了一个 Intl.DisplayNames 实例，并指定了要转换的类型为 region，表示要将地区标识符转换为地区名称。然后，我们调用 of() 方法来将 US 转换为 United States。

1.2 参数说明

Intl.DisplayNames 构造函数接受两个参数：

locales：一个字符串数组，表示要使用的语言环境。如果该参数为 undefined 或空数组，则使用默认语言环境。
options：一个对象，表示选项。可选的选项包括：
- type：一个字符串，表示要转换的标识符类型。可选的值包括 language、region、script、currency 和 variant。默认值为 language。
- style：一个字符串，表示要使用的名称风格。可选的值包括 narrow、short 和 long。默认值为 long。

1.3 示例代码

const displayNames = new Intl.DisplayNames(['en'], { type: 'region', style: 'long' });
console.log(displayNames.of('US')); // United States

const displayNames2 = new Intl.DisplayNames(['zh'], { type: 'language', style: 'short' });
console.log(displayNames2.of('en')); // 英

2. `Intl.ListFormat`

Intl.ListFormat API 可以将数组转换为字符串，并指定分隔符和最后一个分隔符的风格。例如，将 ['apple', 'banana', 'orange'] 转换为 apple, banana, and orange。

2.1 基本用法

const list = ['apple', 'banana', 'orange'];
const listFormat = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
console.log(listFormat.format(list)); // apple, banana, and orange

在上述代码中，我们创建了一个 Intl.ListFormat 实例，并指定了要使用的语言环境为 en，风格为 long，类型为 conjunction，表示要使用连词将数组元素连接起来。然后，我们调用 format() 方法将数组转换为字符串。

2.2 参数说明

Intl.ListFormat 构造函数接受两个参数：

locale：一个字符串，表示要使用的语言环境。如果该参数为 undefined 或空字符串，则使用默认语言环境。
options：一个对象，表示选项。可选的选项包括：
- type：一个字符串，表示要使用的类型。可选的值包括 conjunction、disjunction 和 unit。默认值为 conjunction。
- style：一个字符串，表示要使用的名称风格。可选的值包括 narrow、short 和 long。默认值为 long。

2.3 示例代码

const list = ['apple', 'banana', 'orange'];
const listFormat = new Intl.ListFormat('en', { style: 'short', type: 'disjunction' });
console.log(listFormat.format(list)); // apple, banana, or orange

const listFormat2 = new Intl.ListFormat('zh', { style: 'narrow', type: 'unit' });
console.log(listFormat2.format(['1', '2', '3'])); // 1、2、3

3. `Intl.RelativeTimeFormat`

Intl.RelativeTimeFormat API 可以将时间间隔转换为相对时间，例如 1 day ago 或 in 2 weeks。

3.1 基本用法

const rtf = new Intl.RelativeTimeFormat('en', { style: 'long' });
console.log(rtf.format(-1, 'day')); // 1 day ago
console.log(rtf.format(2, 'week')); // in 2 weeks

在上述代码中，我们创建了一个 Intl.RelativeTimeFormat 实例，并指定了要使用的语言环境为 en，风格为 long。然后，我们调用 format() 方法将时间间隔转换为相对时间。

3.2 参数说明

Intl.RelativeTimeFormat 构造函数接受两个参数：

locale：一个字符串，表示要使用的语言环境。如果该参数为 undefined 或空字符串，则使用默认语言环境。
options：一个对象，表示选项。可选的选项包括：
- style：一个字符串，表示要使用的名称风格。可选的值包括 narrow、short 和 long。默认值为 long。

3.3 示例代码

const rtf = new Intl.RelativeTimeFormat('en', { style: 'short' });
console.log(rtf.format(-1, 'day')); // 1 day ago
console.log(rtf.format(2, 'week')); // in 2 wk.

const rtf2 = new Intl.RelativeTimeFormat('zh', { style: 'long' });
console.log(rtf2.format(-2, 'day')); // 2 天前
console.log(rtf2.format(3, 'month')); // 3 个月后

4. 总结

以上就是 ECMAScript 2021（ES12）中新增的三个国际化 API：Intl.DisplayNames、Intl.ListFormat 和 Intl.RelativeTimeFormat。它们可以让我们更加便捷地处理不同语言和地区的数据，提高前端开发效率。在实际开发中，我们可以根据具体需求选择合适的 API，并结合示例代码进行学习和实践。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65f100822b3ccec22f9d47fb

ECMAScript 2021（ES12）中的新国际化 API

1. Intl.DisplayNames