随着全球化的加速推进，越来越多的公司和产品开始关注国际化问题。国际化并不仅仅是翻译，它更为重要的是让产品在不同国家和地区的用户中，具有更好的用户体验。在前端开发中，如何处理国际化问题成为了一个很重要的问题。
在 ECMAScript 2021 (ES12) 中，Intl.DisplayNames 作为一种全新的内置对象，给前端开发人员提供了一种简单而强大的方法来处理国际化。
什么是 Intl.DisplayNames？
Intl.DisplayNames 是一个内置对象，它提供了一种由语言、地区、方言等生成符号名称的标准化方法。可以用它来生成诸如货币符号、区域名称、语言名称等符号，帮助用户更好地了解和使用你的产品。
下面是一个简单的示例代码：
const regionCode = "CN";
const displayNames = new Intl.DisplayNames(["zh"], {type: "region"});
console.log(displayNames.of(regionCode)); //输出：中国以上代码中，我们创建了一个 Intl.DisplayNames 对象，并用 of 方法来获取符号名称。在这个例子中，我们传入了 CN 作为参数，表示中国，然后 DisplayNames 对象返回了“中国”。
如何使用 Intl.DisplayNames？
Intl.DisplayNames 接受两个参数，第一个参数是一个数组，表示支持的语言列表，第二个参数是一个选项对象。
选项对象包含了两个属性：type 和 style。type 表示需要生成的符号类型，可以是 "region", "script", "currency", "language", "unit", "conjunction", "alternative", "hourCycle", "nu", "ca", "cf", "precision" 中的任意一个；style 表示需要生成的符号风格，可以是 "long", "short" 或 "narrow" 中的一个。
下面我们来看两个例子：
例子 1：生成货币符号
const currencyCode = "USD";
const displayNames = new Intl.DisplayNames(["en"], {type: "currency", style: "symbol"});
console.log(displayNames.of(currencyCode)); //输出：$在这个例子中，我们创建了一个 DisplayNames 对象，表示使用英语生成货币符号，我们传入了 USD 作为参数，表示美元，然后 DisplayNames 对象返回了美元符号 $。
例子 2：生成语言名称
const languageCode = "fr";
const displayNames = new Intl.DisplayNames(["zh"], {type: "language"});
console.log(displayNames.of(languageCode)); //输出：法语在这个例子中，我们创建了一个 DisplayNames 对象，表示使用中文生成语言名称，我们传入了fr 作为参数，表示法语，然后 DisplayNames 对象返回了“法语”。
如何在项目中使用 Intl.DisplayNames？
在实际项目中，我们可能会使用 Intl.DisplayNames 来生成货币符号、语言名称等符号，以下是一个简单的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- --------------
------ ---- ---- ------------
------ - -------- - ---- --------
------ - ---------------- - ---- -------------
------ - ------- - ---- ----------------
------ ------ ---- --------------------------------------
----- -------------- - -- -- -
----- ------ - ------------
----- - ------ - - -------
----- ---------- ------------ - ----------------
----- ---------------- - -- -- -
-----------------------
--
------ -
---- ----------------------------------
------- ---------------------------
----------------- ------------------- ---------------------- --------- --
---------
--------- -- -
--- ------------------------
---------------- -- -
----- ------------------- - --- --------------------------- -
----- -----------
---------
------ -
--- ------- ---------------------------
----- -------------------- -----------
----------------------------
-------
-----
--
---
-----
--
------
--
--
------ ------- ---------------在这个代码中，我们使用了 Intl.DisplayNames 的 of 方法来获取语言名称。我们可以看到，我们将 DisplayNames 对象创建在了组件的方法内，这意味着我们可以通过 locale 属性来动态更新对象的语言选项，达到多语言效果。
总结
Intl.DisplayNames 提供了一种简单而强大的方法来处理国际化问题，可以帮助我们更好地了解和使用用户所在的国家和地区。在实际开发中，我们可以使用 Intl.DisplayNames 来生成货币符号、语言名称等符号，实现多语言效果。不过需要注意的是，Intl.DisplayNames 在不同浏览器和操作系统之间可能会存在兼容性问题，需要谨慎使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ce1181b5eee0b525605e69