随着全球化的发展,本地化已经成为前端开发中不可或缺的一部分。在前端开发中,我们经常需要获取本地化对应的名称,如月份、星期几、货币、语言等等。在 ES11 中,新增了 Intl.DisplayNames 方法,可以帮助我们更方便地获取本地化对应的名称。
Intl.DisplayNames 方法简介
Intl.DisplayNames 方法是 ES11 中新增的一个国际化 API,用于获取本地化对应的名称。它可以用来获取一些常见的名称,如月份、星期几、货币、语言等等。同时,它也支持自定义名称,可以根据自己的需求进行定制。
Intl.DisplayNames 方法的语法如下:
new Intl.DisplayNames(locales, options)
其中,locales 表示需要获取本地化名称的语言环境,可以是一个语言标签字符串,也可以是一个语言标签数组。options 表示一些可选参数,包括 type、style、fallback 和 localeMatcher 等。
使用 Intl.DisplayNames 方法获取本地化对应名称
下面,我们通过几个示例来演示如何使用 Intl.DisplayNames 方法获取本地化对应名称。
获取月份名称
我们可以使用 Intl.DisplayNames 方法来获取本地化对应的月份名称。例如,获取英文环境下的月份名称:
const monthNames = new Intl.DisplayNames('en', {type: 'month'}).of; console.log(monthNames[0]); // January
在上面的代码中,我们使用了 type 参数来指定获取的名称类型为月份。of 属性返回一个对象,对象的属性名为对应的名称索引,属性值为对应的名称。
获取星期几名称
我们也可以使用 Intl.DisplayNames 方法来获取本地化对应的星期几名称。例如,获取中文环境下的星期几名称:
const weekdayNames = new Intl.DisplayNames('zh', {type: 'weekday'}).of; console.log(weekdayNames[1]); // 星期二
在上面的代码中,我们同样使用了 type 参数来指定获取的名称类型为星期几。
获取货币符号
我们可以使用 Intl.DisplayNames 方法来获取本地化对应的货币符号。例如,获取法语环境下的欧元符号:
const currencyNames = new Intl.DisplayNames('fr', {type: 'currency'}).of; console.log(currencyNames['EUR']); // €
在上面的代码中,我们使用了 type 参数来指定获取的名称类型为货币。
自定义名称
除了获取一些常见的名称之外,我们还可以使用 Intl.DisplayNames 方法来自定义名称。例如,我们可以使用以下代码来定义一个自定义的名称列表:
const customNames = { 'en-US': {region: {US: 'United States'}} }; const displayName = new Intl.DisplayNames(['en-US'], {type: 'region', customNames}).of; console.log(displayName['US']); // United States
在上面的代码中,我们使用了 customNames 参数来定义一个自定义的名称列表,其中包含了一个 region 类型的名称,对应的是美国(US)的名称为 United States。
总结
通过本文,我们了解了 ES11 中新增的 Intl.DisplayNames 方法的基本使用方法和一些示例。在实际开发中,我们可以根据自己的需求来使用这个方法,以便更方便地获取本地化对应的名称。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/655f099ad2f5e1655d92d360