在现代 Web 开发中，国际化是不可避免的需求。在不同的语言环境下，我们需要显示不同的语言和地区名称。ES12 中提供了 Intl.DisplayNames API，可以方便地获取不同语言和地区的名称，帮助我们实现国际化。
什么是 Intl.DisplayNames API
Intl.DisplayNames API 是 ES12 中新增的一个国际化 API，用于获取不同语言和地区的名称。它提供了两个构造函数：
Intl.DisplayNames：用于获取指定语言环境下的名称。Intl.DisplayNames.supportedLocalesOf：用于获取支持的语言环境列表。
Intl.DisplayNames API 支持获取以下类型的名称：
- 语言（language）
- 脚本（script）
- 地区（region）
- 样式（style）
- 单位（unit）
如何使用 Intl.DisplayNames API
下面我们将以获取不同语言环境下的地区名称为例，介绍如何使用 Intl.DisplayNames API。
1. 创建 Intl.DisplayNames 实例
首先，我们需要创建一个 Intl.DisplayNames 实例，用于获取指定语言环境下的地区名称。创建实例时，需要传入一个语言环境代码（locale），用于指定要获取的语言环境。语言环境代码由语言和地区组成，格式为 语言代码-地区代码，例如 en-US 表示英语（美国）。
const dn = new Intl.DisplayNames('en-US', { type: 'region' });上面代码创建了一个 type 为 region 的 Intl.DisplayNames 实例，用于获取英语（美国）下的地区名称。
2. 获取地区名称
创建 Intl.DisplayNames 实例后，我们可以调用其 of 方法，获取指定地区的名称。该方法接受一个地区代码（value），用于指定要获取的地区。地区代码由两个字母组成，例如 CN 表示中国。
const regionName = dn.of('CN');
console.log(regionName); // "China"上面代码获取了中国的地区名称。
3. 获取支持的语言环境列表
Intl.DisplayNames API 还提供了 supportedLocalesOf 方法，用于获取支持的语言环境列表。该方法接受一个语言环境代码数组（locales），返回其中支持的语言环境代码数组。
const locales = Intl.DisplayNames.supportedLocalesOf(['en', 'zh', 'ja']); console.log(locales); // ["en-US", "zh", "zh-Hans", "zh-Hant", "ja"]
上面代码获取了支持英语、中文和日语的语言环境列表。
示例代码
下面是一个完整的示例代码，演示如何使用 Intl.DisplayNames API 获取不同语言环境下的地区名称。
const locales = ['en-US', 'zh', 'ja'];
const dn = new Intl.DisplayNames('en-US', { type: 'region' });
for (const locale of locales) {
const regionName = dn.of('CN');
console.log(`${locale}: ${regionName}`);
}输出结果如下：
en-US: China zh: 中国 ja: 中国
总结
Intl.DisplayNames API 是一个方便的国际化 API，可以帮助我们获取不同语言和地区的名称。在实际开发中，我们可以根据具体需求，选择不同的类型和语言环境，来获取相应的名称。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655c356ad2f5e1655d64cd05