随着全球化进程的不断加深，人们对于应用程序的多语言需求越来越迫切。而在前端开发中，实现国际化也一直是一个重要的挑战。ES12 提供了一个新的 API，即 Intl.DisplayNames，通过该 API，我们可以更方便地实现国际化。
Intl.DisplayNames API 简介
Intl.DisplayNames 是 ES12 中一个用于获取固定名称的 API，通过该 API，我们可以获取国家、语言、货币等名称，并且可以自定义显示名称的格式。
Intl.DisplayNames 构造函数接受两个参数：locales 和 options。其中 locales 表示你需要获取名称的语言，可以是一个语言代码字符串，也可以是一个语言代码数组；而 options 则用于配置显示名称的格式，具体选项包括 type、style 和 fallback。
const displayNames = new Intl.DisplayNames(['en'], {type: 'region'});
console.log(displayNames.of('US')); // United States上面的例子中，通过 Intl.DisplayNames 获取了一个语言为英文、类型为地区的对象，然后使用 of 方法获取了美国这个地区的名称。
Intl.DisplayNames API 的用途
国际化日期和时间
在处理日期和时间的时候，我们经常需要将日期和时间格式化为各国的标准格式。而在 Intl.DisplayNames 中，我们可以获取到各国的日期和时间格式。
const date = new Date();
const displayNames = new Intl.DisplayNames(['en'], {type: 'calendar'});
console.log(displayNames.of('gregory'));
console.log(displayNames.of('era', 'ad'));
console.log(displayNames.of('month', 0));
console.log(displayNames.of('weekday', date.getDay()));上面的例子中，我们通过 Intl.DisplayNames 获取了一个语言为英文、类型为日历的对象，并使用 of 方法获取了公历、公元、1月和星期几的英文显示名称。
国际化货币
在国际化中，货币是一个非常重要的概念。而在 Intl.DisplayNames 中，我们可以获取各国的货币名称、单位和符号。
const displayNames = new Intl.DisplayNames(['en'], {type: 'currency'});
console.log(displayNames.of('USD')); // US Dollar
console.log(displayNames.of('USD', {type: 'narrow'})); // $
console.log(displayNames.of('USD', {type: 'code'})); // USD上面的例子中，我们通过 Intl.DisplayNames 获取了一个语言为英文、类型为货币的对象，并使用 of 方法获取了美元的英文名称、缩写和代码。
国际化数字
在处理数字的时候，我们经常需要将数字转换为各国的标准格式。而在 Intl.DisplayNames 中，我们可以获取各国的数字格式。
const displayNames = new Intl.DisplayNames(['en'], {type: 'notation'});
console.log(displayNames.of('standard')); // 普通记数法
console.log(displayNames.of('scientific')); // 科学计数法
console.log(displayNames.of('engineering')); // 工程记数法
console.log(displayNames.of('compact', {notation: 'compact'})); // 紧凑记数法上面的例子中，我们通过 Intl.DisplayNames 获取了一个语言为英文、类型为记数法的对象，并使用 of 方法获取了普通记数法、科学计数法、工程记数法和紧凑记数法的英文名称。
实现自定义国际化
在实际应用中，往往需要根据项目需求进行自定义国际化，而 Intl.DisplayNames 也支持自定义定义显示名称的格式。
-- -------------------- ---- -------
----- ------------ - --- ------------------------- -
----- ---------
------ ---------
--------- -------
------------ ----- -- -
-- ------- ----- -------------------- -
------ ----
-
------ ---------
-
---
----------------------------------- -- --
----------------------------------- -- ------上面的例子中，我们通过 Intl.DisplayNames 获取了一个语言为英文、类型为地区、样式为窄的对象，并使用 displayName 方法自定义了美国、加拿大和墨西哥的显示名称为地区代码，其他地区的显示名称为 others。
总结
通过本文的介绍，我们可以看到 Intl.DisplayNames API 提供了丰富的国际化方法，可以处理日期、时间、货币和数字等众多的国际化需求，可以大大简化前端开发中的国际化工作。在实际应用中，我们可以根据项目需求进行自定义，实现更加灵活的国际化方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f593b4f6b2d6eab3e58b73