在如今这个全球化的时代，越来越多的应用需要支持国际化，以满足不同地区的用户需求。而在前端开发中，我们可以使用 ES12 中的 Intl.DisplayNames 来帮助我们更方便地处理不同语言和地区的数据显示问题。
什么是 Intl.DisplayNames
Intl.DisplayNames 是 ES12 中的一个 API，它能够将语言、国家和区域等标识符转换成它们对应的本地化名称，以帮助我们更好地展示数据。它支持 29 种不同的语言，并可以根据不同地区的习惯来处理数据。
如何使用 Intl.DisplayNames
使用 Intl.DisplayNames 非常简单，首先我们需要创建一个 Intl.DisplayNames 的实例，代码如下：
const displayNames = new Intl.DisplayNames(['zh'], { type: 'region' });上面的代码创建了一个用于处理地区名称的实例。我们将语言设置为中文，type 设置为 region，表示这个实例用于处理地区名称。
接下来，我们可以通过实例的 of 方法来获取具体标识符对应的显示名称。例如，我们可以通过以下代码来获取中国对应的中文地区名称：
const regionName = displayNames.of('CN');
console.log(regionName); // 中国同样地，我们也可以使用以下代码来获取美国对应的中文地区名称：
const regionName = displayNames.of('US');
console.log(regionName); // 美国除了处理地区名称，Intl.DisplayNames 还支持处理语言、国家和货币等标识符，我们可以通过在创建实例时设置不同的 type 参数来选择不同的处理方式。
如何将 Intl.DisplayNames 应用到实际中
在实际应用中，我们可以将 Intl.DisplayNames 用于多个方面，例如：
处理表格中的数据
当我们需要展示大量的表格数据时，表头往往需要显示各个列对应的数据类型。在国际化应用中，我们需要将这些数据类型转换为对应的本地化名称。我们可以使用 Intl.DisplayNames 来对这些数据类型进行转换，例如：
const headers = [
{ id: 'name', label: 'Name' },
{ id: 'age', label: displayNames.of('age') },
{ id: 'country', label: displayNames.of('region') },
];
// 展示表格...上面的代码中，我们将表头数据类型为 age 和 region 的列转换为了对应的本地化名称。
处理日期和时间
不同地区往往有着不同的日期和时间格式，因此在国际化应用中，我们需要根据不同地区的习惯来展示日期和时间。我们可以使用 Intl.DisplayNames 来获取对应的本地化名称，例如：
-- -------------------- ---- ------- ----- ---- - --- ------- ----- ------- - - ----- ---------- ------ ------- ---- ---------- -------- ------- ----- ---------- ------- ---------- ------- ---------- ------------- -------- -- ----- --------- - --- ---------------------------- --------- ----- ------------- - ----------------------- --------------------------- -- ---------- ----- --- ----- ------- -- ---
上面的代码中，我们使用 Intl.DateTimeFormat 获取当前日期时间的格式化字符串，并将其展示给用户。在格式化字符串中，我们包含了时区名称，这时就可以使用 Intl.DisplayNames 来获取不同地区的时区名称。
总结
Intl.DisplayNames 是一个有用的 ES12 API，它可以帮助我们更方便地展示国际化应用中的数据。我们可以将其用于处理表格中的数据、日期和时间以及其他需要使用本地化名称的场景中。在实际应用中，我们需要根据不同地区的习惯来选择合适的参数，以确保展示的数据能够更好地被用户理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6590eacaeb4cecbf2d62c0c2