Intl.DisplayNames 是浏览器原生国际化 API，支持 language、region、script 三类代码转本地化名称，需指定 locale 和 type 创建实例，推荐缓存实例以优化性能，Chrome 90+等现代浏览器已稳定支持。
Intl.DisplayNames 是浏览器原生支持的国际化 API，无需任何第三方库即可将国家代码（如 US）、语言代码（如 zh-CN）转换为对应语言环境下的本地化名称（如中文下显示“美国”、“中文（中国）”）。它轻量、标准、零依赖，是现代前端处理多语言地区信息的理想方案。
支持的类型与基本用法
Intl.DisplayNames 支持三种主要类型：
-
language：将语言子标签（如
fr、ja-JP）转为本地化语言名 -
region：将 ISO 3166-1 国家/地区代码（如
DE、BR）转为本地化国名 -
script：将 ISO 15924 书写系统代码（如
Latn、Hans）转为本地化脚本名（较少使用）
创建实例时指定 locale（目标显示语言）和 type 即可：
const regionNames = new Intl.DisplayNames(['zh-CN'], { type: 'region' });
regionNames.of('US'); // → "美国"
regionNames.of('JP'); // → "日本"
const langNames = new Intl.DisplayNames(['en-US'], { type: 'language' });
langNames.of('zh-CN'); // → "Chinese (China)"
langNames.of('pt-BR'); // → "Portuguese (Brazil)"
处理复合语言标签（含区域/变体）
传入完整 BCP 47 标签（如 en-GB、es-419）时，Intl.DisplayNames 会自动解析并组合显示。例如：
const names = new Intl.DisplayNames(['ja-JP'], { type: 'language' });
names.of('en-GB'); // → "英語（英国）"
names.of('pt-PT'); // → "ポルトガル語（ポルトガル）"
注意：部分浏览器对变体子标签（如 -u-nu-arab）支持有限，建议优先使用标准语言+区域组合。若需更精细控制（如只显示语言不带区域），可先用 Intl.Locale 解析再分段调用。
批量转换与性能优化
Intl.DisplayNames 实例可重复调用 .of()，适合在循环或列表渲染中使用。但避免在每次渲染中重复创建实例——应缓存或提升至模块顶层：
- ✅ 推荐：按 locale + type 组合预建实例，例如
getRegionName('zh-CN', 'US')内部复用已创建的Intl.DisplayNames - ⚠️ 避免：组件内每次 render 都
new Intl.DisplayNames(...)，虽无严重性能问题，但不必要 - ? 小技巧：可用 Map 缓存不同 locale 的实例，键为
${locale}-${type}
兼容性与降级策略
Intl.DisplayNames 在 Chrome 90+、Firefox 87+、Safari 15.4+、Edge 91+ 中稳定支持。旧版浏览器（如 IE 或 Safari ReferenceError 或返回 undefined。
安全降级建议：
- 检查构造函数是否存在：
if (typeof Intl.DisplayNames === 'function') { ... } - 降级时可返回原始代码（如
'US'），或搭配精简的静态映射表（如仅覆盖常用 50 个国家的 JSON 映射） - 不推荐用 full ICU 数据包 polyfill（体积大），零依赖前提下，优雅降级比强行兼容更合理
