使用 ES12 中的 Intl.DisplayNames 对象处理多语言文本
伴随着全球化的不断发展和互联网的普及，多语言网站已经成为常态。构建多语言网站需要在前端实现多语言文本的处理，这不仅仅是一个 UI 设计的问题，也是一个技术上的挑战。ES12 中新增的 Intl.DisplayNames 对象提供了一种简单而强大的方式来处理多语言文本，它可以轻松地实现多语言标签、时间、货币等方面的本地化。
Intl.DisplayNames 对象是 ES2018 中新增的 API，可以帮助开发者在构建多语言用户界面时规范化地显示各种命名类型，比如语言、国家、货币等。 Intl.DisplayNames 接受一个选项对象作为参数，其中包含要获取的命名类型和用户所在的语言环境。
使用 Intl.DisplayNames 的一个实用场景是展示多语言标签。在构建多语言网站时，我们通常使用标签来标示不同的语言版本。使用国家/地区名称的姓氏根据语言来展示这些标签以确保它们可以被准确解析，这就是 Intl.DisplayNames 所做的。
下面是一个用 Intl.DisplayNames 处理多语言文本的示例代码：
const displayNames = new Intl.DisplayNames(['zh-CN'], {
type: 'language'
});
console.log(displayNames.of('en')); // 英语
console.log(displayNames.of('zh-TW')); // 中文（台湾））
console.log(displayNames.of('th')); // 泰语在以上示例中，我们将语言环境设置为中文环境，使用 type 属性指定要展示的类型为 language，之后使用 of 方法返回对应的名称。在这个示例中，我们使用 displayNames 对象来展示英语、台湾中文和泰语。
请注意，需要根据具体的使用场景和多语言文本处理需求来选择正确的命名类型和语言环境。比如，如果要展示货币名称，就需要把 type 属性设置为 currency，而如果要展示国家/地区名称，就需要把 type 属性设置为 region。
总结
在实现多语言网站时，处理多语言文本是一个重要且具有挑战性的任务。ES12 中的 Intl.DisplayNames 对象为实现多语言文本的本地化提供了强大的支持。通过指定要获取的命名类型和用户所在的语言环境，可以轻松地展示各种类型的本地化命名。在实际项目中，开发者需要根据具体的使用场景和多语言文本处理需求来选择正确的命名类型和语言环境，以确保多语言网站的用户体验和可用性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6549f94f7d4982a6eb4301bb