Intl.DisplayNames快速转换区域代码为本地化国家名称

答案是：能，但必须显式指定 type: "region"，并传入有效的 locale（如 "zh-CN"），否则默认按 language 模式处理，结果只会原样返回 "US"。而且输入必须是大写的 ISO 3166-1 代码，小写或格式不对都会出岔子。

许多开发者初次尝试 new Intl.DisplayNames("zh") 时，发现调用 .of("US") 返回的不是“美国”，而是 undefined 或直接返回 "US"，心里难免疑惑：这个 API 到底能不能用？问题通常出在默认行为上——你没有告诉它要获取的是区域名称，它便按语言模式去匹配，而 "US" 并非有效语言代码，因此触发 fallback。

Intl.DisplayNames 能否直接把 "US" 变成“美国”或“United States”？

能，但必须明确指定 type: "region"，且语言环境（locale）要正确传入。很多人使用 new Intl.DisplayNames("zh") 却得到 undefined 或原样返回 "US"，根源就在这里：默认 type 是 "language"，而非区域。

创建实例时最关键的三个参数

Intl.DisplayNames 构造函数接受两个参数：第一个是 locales（字符串或数组），第二个是配置对象。漏掉或写错任意一个都会导致 fallback 行为（比如返回原始代码）。

• locales 必须是真实支持的 locale 标签，例如 "zh-CN"、"ja-JP"、"en-US"；仅写 "zh" 可能触发内部降级，部分浏览器会退到 "en"
• type: "region" 必须显式声明，否则识别的是语言代码（如 "en" → "English"）
• fallback: "code" 是默认值，意味着当某区域在目标 locale 下无翻译时，直接返回原始代码（如 "ZZ"）；可设为 "none" 让它返回 undefined，便于你主动处理异常

常见错误：为什么调用 of("US") 返回了 "US" 而不是“美国”？

典型表现是控制台输出与输入完全相同，看起来像没生效。根本原因有三个：

• 构造时未传入 type: "region"，实例实际按 language 模式工作，而 "US" 不是合法语言代码，于是 fallback 到原字符串
• locales 值不被当前运行环境支持（例如在旧版 Safari 里传 "zh-Hans"，但该浏览器只认 "zh-CN"），导致内部使用 "en" 回退，结果返回 "United States"
• 传入了非法区域码（如小写 "us"），虽然多数引擎会自动大写，但规范不保证——务必确保输入是 ISO 3166-1 alpha-2 大写格式，如 "US"、"CN"、"JP"

验证方式很简单：console.log(new Intl.DisplayNames(["zh-CN"], { type: "region" }).of("US")); 正常应输出 "美国"。

性能与兼容性要注意什么？

这个 API 在现代浏览器中已全量支持（Chrome 90+、Firefox 88+、Safari 15.4+），但 Node.js 需要 v18.0+ 且开启 --icu-data-dir 或使用完整 ICU 数据的构建版本。生产环境若需兼容旧版 Safari，可以考虑 Intl.Locale + regionNames 的 polyfill 方案（注意：这不是标准 API，属于社区补丁）。

另外，Intl.DisplayNames 实例本身可复用，不要在循环里反复 new；同一 locale + type 组合建议缓存实例，尤其在 React 组件或频繁格式化场景下。