在今年的 ECMAScript 2018 中，新增了一个叫做 Intl.DisplayNames 的 API。这个新 API 可以帮助前端开发者更好地展示一些国际化的数据，如人名、货币、单位等。
为什么需要 Intl.DisplayNames
在很多国际化的场景中，需要展示一些包含地区特定名称的内容，比如：姓氏、货币、单位。在以往，我们可能需要手动地去写一些 switch case 或者 if else 语句来判断当前语言环境并展示对应名称的文本数据。但是，这种方式会让代码变得难以维护，并且容易出错。
因此，Intl.DisplayNames 应运而生，它可以让我们更高效地处理这些需求，并且确保我们的代码更加易于维护。
Intl.DisplayNames API 的使用指南
构造函数
首先，我们需要创建一个 Intl.DisplayNames 的实例。这个构造函数有两个参数：locale 和 options。
- locale 表示我们想要使用的语言环境。它可以是一个字符串或者一个数组。
- options 可以包含以下属性：
type：可以是language、region或者script，表示我们想要获取的名称类型。默认为language。style：可以是narrow、short或者long，表示名称的展示风格。默认为long。fallback：表示当某个名称不存在时，使用的默认值。默认为code，即使用代码代替名称。
示例代码
const displayNames = new Intl.DisplayNames('en-US', {type: 'language'});
console.log(displayNames.of('zh-Hans')); // "Simplified Chinese"DisplayNames.of 方法
接着，我们就可以使用这个实例的 of 方法来获取对应的名称。
这个方法接收一个参数，并返回对应语言环境下的名称。如果这个名称不存在，且有 fallback 配置，则返回 fallback 值。否则会抛出 RangeError。
示例代码
const displayNames = new Intl.DisplayNames('en-US', {type: 'region'});
console.log(displayNames.of('CN')); // "China"DisplayNames.resolvedOptions 方法
最后，我们可以使用 resolvedOptions 方法来获取当前实例的配置信息。
示例代码
const displayNames = new Intl.DisplayNames('en-US', {type: 'language'});
console.log(displayNames.resolvedOptions());
// {locale: "en-US", type: "language", style: "long", fallback: "code"}总结
Intl.DisplayNames API 是一个非常实用的国际化工具，能够帮助前端开发者更高效地展示地区特定名称的数据。我们可以通过构造函数和 of 方法来获取对应的名称，也可以通过 resolvedOptions 方法来获取当前实例的配置信息。
虽然这个 API 在 ECMAScript 2018 中才被引入，但它已经被大多数主流的浏览器和 Node.js 实现所支持，因此我们可以放心地在项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e07a1cf6b2d6eab3b90904