在 Web 开发中，我们经常需要处理多语言和多地区的情况。ES10 中新增的 Intl.DisplayNames 提供了一种方便的方式来实现更友好的地区语言显示。
什么是 Intl.DisplayNames
Intl.DisplayNames 是一个 JavaScript API，用于将语言、国家/地区、货币等标识符转换为本地化的名称。它可以用于创建更友好和可读的用户界面，同时确保正确地呈现本地化的内容。
如何使用 Intl.DisplayNames
要使用 Intl.DisplayNames，我们需要先创建一个实例，然后调用其实例方法来获取本地化的名称。下面是一个简单的示例：
const displayNames = new Intl.DisplayNames('zh', { type: 'region' });
console.log(displayNames.of('US')); // 美国
console.log(displayNames.of('GB')); // 英国在上面的示例中，我们创建了一个 displayNames 实例，并指定了 zh 作为语言环境。然后我们调用 of 方法来获取指定国家/地区的本地化名称。
支持的类型
Intl.DisplayNames 支持以下类型：
- language：语言名称
- region：国家/地区名称
- script：书写系统名称
- currency：货币名称
我们可以在创建实例时指定要转换的类型：
const languageDisplayNames = new Intl.DisplayNames('zh', { type: 'language' });
console.log(languageDisplayNames.of('en')); // 英语
console.log(languageDisplayNames.of('zh')); // 中文
const currencyDisplayNames = new Intl.DisplayNames('zh', { type: 'currency' });
console.log(currencyDisplayNames.of('USD')); // 美元
console.log(currencyDisplayNames.of('CNY')); // 人民币自定义名称
如果默认的本地化名称不符合我们的要求，我们可以提供自定义的名称。下面是一个示例：
// javascriptcn.com 代码示例
const regionDisplayNames = new Intl.DisplayNames('zh', { type: 'region' });
console.log(regionDisplayNames.of('US')); // 美国
console.log(regionDisplayNames.of('GB')); // 英国
const customRegionNames = {
US: '美利坚合众国',
GB: '不列颠及北爱尔兰联合王国',
};
const customRegionDisplayNames = new Intl.DisplayNames('zh', {
type: 'region',
fallback: 'code',
values: customRegionNames,
});
console.log(customRegionDisplayNames.of('US')); // 美利坚合众国
console.log(customRegionDisplayNames.of('GB')); // 不列颠及北爱尔兰联合王国在上面的示例中，我们首先创建了一个 regionDisplayNames 实例，并获取了默认的本地化名称。然后我们定义了一个自定义名称的对象 customRegionNames，并创建了一个新的 customRegionDisplayNames 实例，指定了 fallback: 'code'，表示如果找不到自定义名称，则返回标识符代码。最后我们调用 of 方法来获取自定义的本地化名称。
总结
Intl.DisplayNames 是一个非常有用的 API，可以帮助我们实现更友好和可读的地区语言显示。我们可以使用它来获取本地化的名称，支持多种类型，并且可以提供自定义的名称。在实际开发中，我们可以根据具体需求来使用它，提高用户体验和界面质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65516dd1d2f5e1655db2ff42