在前端开发中，国际化是一个重要的话题。在 ES2021 中，新增了一个名为 Intl.DisplayNames 的对象，它为我们提供了一种更加优秀的处理国际化的方式。本文将介绍 Intl.DisplayNames 对象的使用方法和优点，并通过示例代码来展示它的实际应用。
Intl.DisplayNames 简介
Intl.DisplayNames 对象是一个用于获取本地化的名称的 API。它可以帮助我们获取语言、地区、货币等名称，使我们的应用程序更加适合不同的语言和文化环境。Intl.DisplayNames 对象提供了两种类型的名称：语言名称和地区名称。
语言名称
Intl.DisplayNames 对象可以获取语言名称，例如 “中文”、“英语”、“法语”等。当我们需要在应用程序中显示不同语言的名称时，Intl.DisplayNames 对象可以帮助我们完成这个任务。
地区名称
Intl.DisplayNames 对象也可以获取地区名称，例如 “中国”、“美国”、“英国”等。当我们需要在应用程序中显示不同地区的名称时，Intl.DisplayNames 对象同样可以帮助我们完成这个任务。
Intl.DisplayNames 的优点
使用 Intl.DisplayNames 对象有以下几个优点：
1. 支持多语言和多地区
Intl.DisplayNames 对象支持多语言和多地区。我们可以使用它来获取不同语言和地区的名称。这使得我们的应用程序可以更好地适应不同的语言和文化环境。
2. 可以自定义名称
Intl.DisplayNames 对象可以自定义名称。我们可以使用自定义名称来替换默认名称，使我们的应用程序更加符合我们的需求。
3. 易于使用
Intl.DisplayNames 对象非常易于使用。我们只需要传递必要的参数即可获取所需的名称。这使得我们可以很容易地在应用程序中使用它。
Intl.DisplayNames 的使用方法
使用 Intl.DisplayNames 对象的方法如下：
const displayName = new Intl.DisplayNames(locale, options);
其中，locale 参数用于指定所需的本地化名称的语言和地区，options 参数用于指定一些可选的选项，例如自定义名称等。
获取语言名称
我们可以使用以下代码获取语言名称：
const displayName = new Intl.DisplayNames('zh-CN', {type: 'language'});
const languageName = displayName.of('en');
console.log(languageName); // 英语在上面的代码中，我们首先创建了一个 Intl.DisplayNames 实例，指定了语言为“中文 - 中国”，类型为“语言名称”。然后，我们调用 of 方法，传递了一个语言代码“en”，获取了对应的语言名称“英语”。
获取地区名称
我们可以使用以下代码获取地区名称：
const displayName = new Intl.DisplayNames('zh-CN', {type: 'region'});
const regionName = displayName.of('US');
console.log(regionName); // 美国在上面的代码中，我们首先创建了一个 Intl.DisplayNames 实例，指定了语言为“中文 - 中国”，类型为“地区名称”。然后，我们调用 of 方法，传递了一个地区代码“US”，获取了对应的地区名称“美国”。
自定义名称
我们可以使用以下代码自定义名称：
const displayName = new Intl.DisplayNames('zh-CN', {type: 'region', fallback: 'none',
values: {US: '美利坚合众国', GB: '不列颠及北爱尔兰联合王国'}});
const regionName = displayName.of('US');
console.log(regionName); // 美利坚合众国在上面的代码中，我们首先创建了一个 Intl.DisplayNames 实例，指定了语言为“中文 - 中国”，类型为“地区名称”，并设置了自定义名称。然后，我们调用 of 方法，传递了一个地区代码“US”，获取了对应的自定义名称“美利坚合众国”。
总结
Intl.DisplayNames 对象是一个非常优秀的 API，它可以帮助我们更好地处理国际化。它支持多语言和多地区，可以自定义名称，易于使用。我们可以使用它来获取语言、地区、货币等名称，使我们的应用程序更加适合不同的语言和文化环境。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651466e895b1f8cacdcd6563