ES12 新特性 - Intl.DisplayNames 解析
ES2022 标准 (简称 ES12) 中，新增了一个全新的国际化 API - Intl.DisplayNames。
该 API 的主要作用是提供了一种灵活的方式，用于将语言、地区、货币等标识符 (identifier) 解析为人类易于识别的本地化 (localized) 名称。
本文将带您深入探讨 Intl.DisplayNames API 的细节，并为您提供实用的示例代码和指导意义，以帮助您更好地掌握该 API。
- 基本语法
Intl.DisplayNames API 包含两个构造函数：Intl.DisplayNames() 和 Intl.DisplayNamesOf()。
其中，Intl.DisplayNames() 构造函数需要传入两个参数：
- locales，表示本地化区域；
- options，表示一些可选配置参数，如语言类型 (languageDisplay)，使用何种常用风格 (style) 等。
例如，下面的代码创建了一个用于“中文-简体中文”区域的 DisplayNames 实例：
const displayNames = new Intl.DisplayNames(['zh-CN'], { type: 'language' });
- 支持的类型
Intl.DisplayNames API 支持的本地化类型 (type) 包括:
- language，表示语言类型；
- region，表示国家或地区；
- script，表示书写系统或字母表；
- currency，表示货币类型；
- unit，表示单位。
例如，下面的代码创建了一个用于“中文-简体中文”区域的 DisplayNames 实例，用于解析货币类型 (currency)：
const displayNames = new Intl.DisplayNames(['zh-CN'], { type: 'currency' });
- 支持的风格
Intl.DisplayNames API 支持的常用风格 (style) 包括：
- narrow，表示使用最简称呼；
- short，表示使用短称呼；
- long，表示使用完整称呼。
例如，下面的代码创建了一个用于“中文-简体中文”区域的 DisplayNames 实例，用于解析语言类型 (language)，并指定风格为长：
const displayNames = new Intl.DisplayNames(['zh-CN'], { type: 'language', style: 'long' });
- 实际应用
Intl.DisplayNames API 可以在很多实际的场景中发挥作用，例如：
- 多语言网站中，根据用户本地化设置展现不同的语言名称；
- 货币转换程序中，根据本地化设置展现不同的货币符号；
- 单位转换程序中，根据本地化设置展现不同的单位名称。
例如，下面的代码演示了一个简单的货币转换程序，使用了 Intl.DisplayNames API 来格式化货币符号：
-- -------------------- ---- ------- ----- ------------ - --- ---------------------------- - ----- ----------- ------ -------- --- ----- --------- - --- -------------------------- - ------ ----------- --------- ----- --- -------- ------------------- - ----- ------ - ----------------------- ------ ------------------------ - - - - ------- - --------------------- -- ---------- ----展开代码
- 总结
在本文中，我们对 ES12 新特性 - Intl.DisplayNames 进行了详细的解析，并提供了多个示例代码来解释其实际应用场景。
使用 Intl.DisplayNames API 可以更加方便地实现国际化，提升用户体验。因此，我们建议您在日常的前端开发中积极使用该 API，以便为全球用户提供更好的产品和服务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa2e8148841e9894659970
