在前端开发中，我们经常会遇到需要将语言和脚本转换成可读的名称的情况。比如在网站中展示用户所使用的语言和脚本，或者在多语言网站中切换语言时需要显示对应语言的名称。在 ES9 中，新增了 Intl.DisplayNames() 方法，可以方便地实现这一功能。
什么是 Intl.DisplayNames()？
Intl.DisplayNames() 是一个用于将语言和脚本转换成可读的名称的 JavaScript 方法。它提供了一个标准化的方式来获取语言和脚本的本地化名称，可以用于展示给用户。该方法可以接受一个选项对象，用于指定获取名称的类型、语言、脚本等参数。
如何使用 Intl.DisplayNames()？
下面是一个使用 Intl.DisplayNames() 方法获取语言和脚本名称的示例：
const languageDisplayNames = new Intl.DisplayNames(['zh'], { type: 'language' });
const scriptDisplayNames = new Intl.DisplayNames(['zh'], { type: 'script' });
console.log(languageDisplayNames.of('en')); // 英语
console.log(scriptDisplayNames.of('Hans')); // 简体中文在上面的代码中，我们首先创建了两个 Intl.DisplayNames() 实例，分别用于获取语言和脚本名称。在创建实例时，我们传入了一个数组，用于指定本地化的语言。在这个示例中，我们指定了中文（'zh'）作为本地化语言。
接下来，我们调用了 of() 方法来获取语言和脚本的本地化名称。of() 方法接受一个参数，用于指定要获取的语言或脚本代码。在这个示例中，我们分别传入了英语（'en'）和简体中文（'Hans'）作为参数。
运行上面的代码，我们可以看到输出了英语和简体中文的本地化名称。
Intl.DisplayNames() 的选项
除了指定本地化语言外，Intl.DisplayNames() 还可以接受一个选项对象，用于指定获取名称的类型、语言、脚本等参数。下面是 Intl.DisplayNames() 支持的选项：
type：指定要获取的名称类型，可选值为language、script、region、currency、unit和nu。默认值为language。localeMatcher：指定匹配本地化语言的算法，可选值为lookup和best fit。默认值为best fit。style：用于指定名称的样式，可选值为narrow、short和long。默认值为long。fallback：当无法获取对应的名称时，指定使用的备用名称。默认值为code。
下面是一个使用选项的示例：
const languageDisplayNames = new Intl.DisplayNames(['zh'], { type: 'language', style: 'narrow' });
const scriptDisplayNames = new Intl.DisplayNames(['zh'], { type: 'script', style: 'short' });
console.log(languageDisplayNames.of('en')); // 英
console.log(scriptDisplayNames.of('Hans')); // 简在上面的代码中，我们指定了 style 选项为 narrow 和 short，分别用于获取语言和脚本的简短本地化名称。
总结
Intl.DisplayNames() 是一个方便的方法，可以用于将语言和脚本转换成可读的名称。通过传入选项对象，我们可以自定义获取名称的类型、语言、脚本等参数，从而满足不同的需求。在实际开发中，我们可以使用 Intl.DisplayNames() 方法来实现多语言网站中的语言切换、展示用户所使用的语言等功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bf397badd4f0e0ff8c16d3