如果您在开发一个支持多语言和地区的前端应用程序，处理不同国家和语言的名称是一项很重要的工作。在 ECMAScript 2021 中，该规范已经新增了一个名为 Intl.DisplayNames 的 API，可以方便地将地区和语言名称格式化成您需要的格式。本文将详细介绍 Intl.DisplayNames 的使用方法和示例。
什么是 Intl.DisplayNames？
Intl.DisplayNames 是 ECMAScript Internationalization API （ECMA-402）中的一个新功能，旨在帮助您轻松地处理地区和语言名称。它提供了一种标准化的方式，使您能够以您需要的不同格式呈现地区和语言名称。
与其他广泛使用的 I18n 库（例如 i18next 或 react-intl）不同，Intl.DisplayNames 是原生 JavaScript API，在现代浏览器的支持下无需安装或配置即可使用。
如何使用 Intl.DisplayNames？
使用 Intl.DisplayNames API 是非常简单的。首先，您需要创建一个 Intl.DisplayNames 实例，并将 type 参数设置为您需要格式化的名称类型，例如 language 或 region。然后，您可以调用 of() 方法，并将要格式化的名称（例如语言或国家/地区名称）作为参数传递。
以下是一个简单的例子，演示如何使用 Intl.DisplayNames API 将地区名称从 en-US 标准化为 de-DE 格式：
const regionNames = new Intl.DisplayNames('de-DE', {type: 'region'});
console.log(regionNames.of('US')); // prints "Vereinigte Staaten"在上面的代码中，我们创建了一个 Intl.DisplayNames 实例并设置其类型为 region。然后，我们调用 of() 方法，将地区名称 US 传递给它。Intl.DisplayNames 会将其转换为德语中的 Vereinigte Staaten。
支持的名称类型
在 Intl.DisplayNames 中，您可以使用以下类型参数：
language：语言名称。region：地区名称。script：Unicode 剧本块名称。currency：货币符号。
自定义名称风格
可以通过向 Intl.DisplayNames 构造函数中传递一些选项来自定义名称的格式。以下是其中一些选项：
- style：要应用的名称风格。可以是“long”（默认）、“short” 或 “narrow”。
- fallback：在找不到指定名称的情况下应该使用的备用名称。这可以是字符串、对象或函数。
以下是一个修订过的代码片段，例如在 en-US 区域设置中使用简短的语言名称。在缺少短名称的情况下，将为缺少繁长名称提供备用名称：
-- -------------------- ---- -------
----- ------------- - --- -------------------------- -
------ --------
----- -----------
--------- -
----- --------- ------------
-------- --------- ------------
-------- ------------ ---------
-
---
------------------------------------ -- ------ --------- -----------
-------------------------------------------- -- ------ ------
------------------------------------ -- ------ ----------在上面的代码中，我们创建了一个 Intl.DisplayNames 实例，并将其类型设置为 language。我们还指定了要应用的短名称风格，并使用 fallback 选项提供了缺少短名称的三个例外情况。
处理异构语言和国家/地区名称
您可能已经注意到，某些国家/地区在不同语言环境中使用的名称可能会有所不同。例如，在美国使用的语言名称可能与在德国使用的名称大不相同。为了更好地处理这种情况，Intl.DisplayNames 还提供了 localeMatcher 选项。
best fit：默认选项。会尝试找到最接近的匹配，无论是否匹配可能是不完全的。lookup：查找完全匹配项，如果没有完全匹配项，就会返回最后一个字母相同的匹配项。
以下是一个使用 best fit 选项的示例：
const regionNames = new Intl.DisplayNames('en-US', {type: 'region', localeMatcher: 'best fit'});
console.log(regionNames.of('TW')); // Prints "Taiwan"
console.log(regionNames.of('CN')); // Prints "China"在上面的代码中，我们创建了一个 Intl.DisplayNames 实例，并将其类型设置为 region。我们还指定了要使用的语言环境，以及要使用的 localeMatcher。
总结
Intl.DisplayNames 是一个很有用的 API，可以让您更好地处理多语言和国家/地区名称。使用 Intl.DisplayNames，您可以轻松地将地区和语言名称格式化为您需要的格式，并自定义格式设置。我们希望本文能够帮助您使用 Intl.DisplayNames 以更好的方式处理语言和地区名称。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a6b7a348841e989435bb4d