跳到主要内容

`Intl.DisplayNames`

· 阅读需 4 分钟
Shu-yu Guo ([@_shu](https://twitter.com/_shu)) 和 Frank Yung-Fong Tang

面向全球用户的 Web 应用需要以许多不同语言显示语言、地区、书写系统和货币的名称。这些名称的翻译需要数据，该数据可在 Unicode CLDR 中找到。将数据打包为应用的一部分会耗费开发时间。用户往往更喜欢语言和地区名称的统一翻译，而随着全球地缘政治情况的变化保持数据更新需要持续维护。

幸运的是，大多数 JavaScript 运行时已经导入并保持这些翻译数据的更新。新的 Intl.DisplayNames API 使 JavaScript 开发者能够直接访问这些翻译，从而让应用更容易显示本地化名称。

使用示例​

以下示例展示如何创建一个 Intl.DisplayNames 对象以使用 ISO-3166 2字母国家代码 获取英文的地区名称。

const regionNames = new Intl.DisplayNames(['en'], { type: 'region' });
regionNames.of('US');
// → 'United States'
regionNames.of('BA');
// → 'Bosnia & Herzegovina'
regionNames.of('MM');
// → 'Myanmar (Burma)'

以下示例使用 Unicode'的语言标识符语法 获取繁体中文的语言名称。

const languageNames = new Intl.DisplayNames(['zh-Hant'], { type: 'language' });
languageNames.of('fr');
// → '法文'
languageNames.of('zh');
// → '中文'
languageNames.of('de');
// → '德文'

以下示例使用 ISO-4217 3字母货币代码 获取简体中文的货币名称。在存在单数和复数形式区别的语言中，货币名称为单数形式。对于复数形式，可以使用 Intl.NumberFormat。

const currencyNames = new Intl.DisplayNames(['zh-Hans'], {type: 'currency'});
currencyNames.of('USD');
// → '美元'
currencyNames.of('EUR');
// → '欧元'
currencyNames.of('JPY');
// → '日元'
currencyNames.of('CNY');
// → '人民币'

以下示例展示最终支持的数据类型“书写系统”，在英文中使用 ISO-15924 4字母书写系统代码。

const scriptNames = new Intl.DisplayNames(['en'], { type: 'script' });
scriptNames.of('Latn');
// → 'Latin'
scriptNames.of('Arab');
// → 'Arabic'
scriptNames.of('Kana');
// → 'Katakana'

对于更高级的用法，第二个 options 参数还支持 style 属性。style 属性对应于显示名称的宽度，可以是 "long"、"short" 或 "narrow"。不同样式的值不一定有差异。默认值是 "long"。

const longLanguageNames = new Intl.DisplayNames(['en'], { type: 'language' });
longLanguageNames.of('en-US');
// → 'American English'
const shortLanguageNames = new Intl.DisplayNames(['en'], { type: 'language', style: 'short' });
shortLanguageNames.of('en-US');
// → 'US English'
const narrowLanguageNames = new Intl.DisplayNames(['en'], { type: 'language', style: 'narrow' });
narrowLanguageNames.of('en-US');
// → 'US English'

完整 API​

完整的 Intl.DisplayNames API 如下。

Intl.DisplayNames(locales, options)
Intl.DisplayNames.prototype.of( code )

构造函数与其他 Intl API 一致。它的第一个参数是一个 语言环境列表，第二个参数是一个 options 参数，其中包含 localeMatcher、type 和 style 属性。

"localeMatcher" 属性的处理方式与 其他 Intl API 相同。type 属性可以是 "region"、"language"、"currency" 或 "script"。style 属性可以是 "long"、"short" 或 "narrow"，默认值是 "long"。

Intl.DisplayNames.prototype.of( code ) 的期望格式根据实例构造的 type 不同而有所变化。

结论​

与其他 Intl APIs 类似，随着 Intl.DisplayNames 得到更广泛的支持，库和应用程序将选择不再使用其自身的翻译数据包，而是更喜欢利用原生功能。

Intl.DisplayNames 支持​