在前端开发中，国际化是一个非常重要的话题。在不同的语言环境下，我们需要展示不同的文本信息，同时也需要处理不同的日期、时间、货币等格式。在 ES12 中，新增了一个 Intl.DisplayNames API，可以帮助我们更方便地处理国际化文本。
什么是 Intl.DisplayNames API
Intl.DisplayNames API 是一个全局对象，用于获取不同语言环境下的命名规则。它提供了两个构造函数：
- Intl.DisplayNames()：用于获取当前语言环境下的命名规则。
- Intl.DisplayNames(locales, options)：用于获取指定语言环境下的命名规则。
其中，locales 参数是一个字符串数组，表示要获取的语言环境。如果不指定该参数，则使用默认语言环境。options 参数是一个对象，用于指定一些选项，比如 style、type 等。
Intl.DisplayNames API 支持的 style 和 type 如下：
- style：可以是 "narrow"、"short"、"long" 中的一个，表示命名规则的简短、中等、完整形式。
- type：可以是 "language"、"region"、"script"、"currency" 中的一个，表示要获取的命名规则的类型。
如何使用 Intl.DisplayNames API
下面是一个使用 Intl.DisplayNames API 的示例代码：
const displayNames = new Intl.DisplayNames(['zh', 'en'], { type: 'language' });
console.log(displayNames.of('zh')); // 中文
console.log(displayNames.of('en')); // English在上面的代码中，我们先创建了一个新的 Intl.DisplayNames 对象，指定了要获取的语言环境为中文和英文，要获取的命名规则类型为 language。然后，我们调用了对象的 of() 方法，传入一个语言环境标识符，获取该语言环境下的命名规则。
除了 of() 方法，Intl.DisplayNames API 还提供了其他一些方法，比如 resolvedOptions()、ofLocale()、ofScript() 等，可以根据不同的需求获取不同类型的命名规则。
深入理解 Intl.DisplayNames API
在实际开发中，我们经常需要处理不同语言环境下的国家/地区名称、货币符号等信息。Intl.DisplayNames API 可以帮助我们更方便地获取这些信息。
下面是一个更复杂的示例代码：
const displayNames = new Intl.DisplayNames(['zh', 'en'], { type: 'region' });
console.log(displayNames.of('CN')); // 中国
console.log(displayNames.of('US')); // United States
console.log(displayNames.of('JP')); // 日本在上面的代码中，我们创建了一个新的 Intl.DisplayNames 对象，指定了要获取的语言环境为中文和英文，要获取的命名规则类型为 region。然后，我们调用了对象的 of() 方法，传入一个国家/地区代码，获取该国家/地区在指定语言环境下的名称。
需要注意的是，不同语言环境下的命名规则可能不同。比如，在中文环境下，美国的名称为 "美国"，而在英文环境下，美国的名称为 "United States"。因此，我们需要根据具体的语言环境来选择合适的命名规则。
总结
Intl.DisplayNames API 是 ES12 中新增的一个国际化 API，可以帮助我们更方便地处理不同语言环境下的命名规则。它支持多种命名规则类型，包括语言、国家/地区、货币等。在实际开发中，我们可以根据具体的需求来选择合适的命名规则类型，从而更好地实现国际化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662ff594d3423812e4deec2b