随着 Web 应用的普及和全球化的发展，国际化和本地化的需求也越来越重要。在前端开发中，我们通常使用 Intl API 来处理跨语种的数据格式化和本地化的问题。但是，在某些场景下，我们需要将一些数据进行翻译或者映射到本地语言文字，这时候就需要使用 Intl.DisplayNames API。
在本文中，我将介绍如何使用 @formatjs/intl-displaynames npm 包来解决这种跨语种的数据映射问题，以及该包的一些特性和使用技巧。
安装和使用
首先需要安装该包：
npm install @formatjs/intl-displaynames --save
然后在代码中引入该包：
import * as IntlDisplayNames from '@formatjs/intl-displaynames';
这时候我们就可以使用 IntlDisplayNames 对象来获取对应语种下的一些系统属性、地理位置、货币单位等等名称了。
const regionDisplayNames = new IntlDisplayNames(['en'], { type: 'region' });
console.log(regionDisplayNames.of('US')) // 'United States'该示例代码中，new IntlDisplayNames(['en'], { type: 'region' }) 会初始化一个 region 类型的数据映射器，用来将国家地区码转化为国家名称。然后，我们通过 of 方法传入一个 US 的国家地区码，返回一个该国家的英文名称 United States。
除了 region 类型之外。 @formatjs/intl-displaynames 还支持以下类型：
language：语言名称script：文字书写方式currency：货币单位unit：衡量单位
我们可以根据业务需求进行选择。
深入了解
除了基本用法外，该包还有以下几个特性：
货币的格式化
我们还可以使用 formatToParts 方法来对货币的格式进行自定义。该方法可以通过指定 unitDisplay: 'narrow' 来缩短货币单位的名称长度。
const currencyDisplayNames = new IntlDisplayNames(['en'], { type: 'currency' });
console.log(currencyDisplayNames.formatToParts('USD', { unitDisplay: 'narrow' }))
// [{type: 'currency', value: '$'}, {type: 'literal', value: ' '}, {type: 'displayName', value: 'US dollar'}]该示例代码中，我们通过 formatToParts 方法和 { unitDisplay: 'narrow' } 配置来缩短货币单位的显示，最终输出结果是一个对象数组。
自定义映射
该包支持在初始化实例时传入一个自定义映射对象，用来将一些自定义的名称转换为本地语言名称。
-- -------------------- ---- -------
----- ----------------- - --- ------------------------ -
----- ---------
--------- -------
-------------- -------
--------- -
--- -
------------ ------- -------
--
--
---
--------------------------------------- -- ------- ------该示例代码中，我们传入了一个 patterns 对象，用来将 CA 的国家地区码映射为该国家的自定义名称 Golden State。这样，在调用 of 方法时，只需要传入 CA，就可以得到该地区的自定义名称。
多语言支持
该包还支持多语言的需求。只需要在初始化实例时传入多个语言代码即可。
const regionDisplayNames = new IntlDisplayNames(['en', 'zh'], { type: 'region' });
console.log(regionDisplayNames.of('US')) // 'United States'
console.log(regionDisplayNames.of('CN')) // '中国'该示例代码中，我们初始化了一个 region 类型的实例，支持 en 和 zh 两种语言，当我们传入 US 和 CN 时，分别返回 United States 和 中国。
总结
在本文中，我们介绍了 @formatjs/intl-displaynames npm 包的基本用法，以及包含货币格式化、自定义映射、多语言支持等特性的高级用法，并提供了详细的示例代码。通过对该包的深入学习和掌握，我们可以更加便捷地实现跨语种的数据映射和本地化需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/169696