在 ECMAScript 2021 中，新增了一种国际化 API，即 Intl.DisplayNames() 方法。该方法能够根据指定的区域设置（locale）和选项（options）返回一个对象，其中包括了对不同种类的命名（如语言、地区、脚本等）进行本地化显示的信息。
本文将详细介绍 Intl.DisplayNames() 方法的使用方式、参数选项以及一些示例代码。
使用方式
Intl.DisplayNames() 方法的用法如下所示：
new Intl.DisplayNames(locale, options)
其中，locale 为指定的区域设置（locale），可以是字符串（如 'en-US'）或数组（如 ['zh', 'Hans']）。options 参数是一个可选项对象，包括以下属性：
type：指定要获取的命名类型，可以是'language'、'region'、'script'、'currency'或自定义词汇表。默认为'language'。style：指定命名的风格，可以是'long'、'short'或'narrow'。默认为'long'。fallback：指定在未找到本地化版本时的备用语言，可以是字符串或数组。默认为undefined，即使用"en"作为备用语言。
使用示例：
const displayNames = new Intl.DisplayNames('zh-CN', { type: 'region', style: 'long' });
console.log(displayNames.of('US')); // 美国上述代码创建了一个 Intl.DisplayNames 对象，其指定了对 'zh-CN' 地区的命名进行本地化的方法，并将命名类型设定为 region，命名风格设定为 long。接着调用 of() 方法来获取 'US' 这个地区的本地化显示名称，结果输出为 '美国'。
参数选项
Intl.DisplayNames() 方法的 options 参数具有以下属性。
type
type 属性指定要获取的命名类型，可以是 'language'、'region'、 'script'、'currency'或自定义词汇表。下表列出了各种类型的可选值：
| 类型 | 可选值 |
|---|---|
'language' |
'af'、'am'、'ar'、...、'zh'、'zu' |
'region' |
'AD'、'AE'、'AF'、...、'ZM'、'ZW' |
'script' |
'Adlm'、'Afak'、'Aghb'、...、'Zsym' |
'currency' |
'AED'、'AFN'、'ALL'、...、'ZMW'、'ZWL' |
| 自定义 | 自定义词汇表，如 { 'China': ['中国'，'中华人民共和国'], 'UK': ['英国', '大不列颠及北爱尔兰联合王国'] } 等 |
使用示例：
const languageDisplayNames = new Intl.DisplayNames('en-US', { type: 'language' });
console.log(languageDisplayNames.of('to')); // Tonga
const currencyDisplayNames = new Intl.DisplayNames('en-US', { type: 'currency' });
console.log(currencyDisplayNames.of('USD')); // US Dollarstyle
style 属性指定命名的风格，可以是 'long'、'short' 或 'narrow'。下表列出了各种类型的可选值：
| 风格 | 描述 |
|---|---|
'long' |
名称的完整形式（例如： "United States"） |
'short' |
名称的缩写形式（例如： "US"） |
'narrow' |
名称的极简形式，仅适用于 'language' 和 'script' 类型（例如： "U" 和 "简"） |
const regionDisplayNames = new Intl.DisplayNames('zh-CN', { type: 'region', style: 'short' });
console.log(regionDisplayNames.of('US')); // 美国fallback
fallback 属性指定在未找到本地化版本时的备用语言，可以是字符串或数组。默认为 undefined，即使用 "en" 作为备用语言。
const displayNames = new Intl.DisplayNames('zh-CN', { fallback: 'ja' });
console.log(displayNames.of('Unknown')); // 日本上述代码使用 "ja" 作为备用语言，在本地化命名中未找到名称 "Unknown" 时返回了日语版本。
示例代码
以下示例代码演示了如何使用 Intl.DisplayNames() 方法。
获取并显示语言的本地化名称：
const languageDisplayNames = new Intl.DisplayNames('en-US', { type: 'language' });
console.log(languageDisplayNames.of('zh-Hans')); // Simplified Chinese
console.log(languageDisplayNames.of('de')); // German
console.log(languageDisplayNames.of('pt')); // Portuguese获取并显示地区的本地化名称：
const regionDisplayNames = new Intl.DisplayNames('zh-CN', { type: 'region', style: 'long' });
console.log(regionDisplayNames.of('US')); // 美国
console.log(regionDisplayNames.of('RU')); // 俄罗斯
console.log(regionDisplayNames.of('CN')); // 中国获取并显示脚本的本地化名称：
const scriptDisplayNames = new Intl.DisplayNames('zh-CN', { type: 'script', style: 'short' });
console.log(scriptDisplayNames.of('Arab')); // 阿拉伯文
console.log(scriptDisplayNames.of('Cyrl')); // 西里尔文
console.log(scriptDisplayNames.of('Hans')); // 简体中文获取并显示自定义词汇表中的名称：
-- -------------------- ---- ------- ----- ------------------- - --- -------------------------- - ----- --------- ------ ------- --------- -------- ------- - ------ -------- -------- ------ ----- --------- ----- - --- ------------------------------------------- -- ------ ------ ------------------------------------------ -- -- ------------------------------------------ -- --
在未找到本地化版本时返回备用语言的版本：
const displayNames = new Intl.DisplayNames('zh-CN', { fallback: 'ja' });
console.log(displayNames.of('Unknown')); // 日本总结
Intl.DisplayNames() 方法提供了一种方便的方法来获取和本地化各种类型名称的显示名称。学习并掌握该方法可以在开发国际化应用程序时提供帮助，并使您的应用更加适合全球用户。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fb2216f6b2d6eab31ccdff