JavaScript Intl.DisplayNames 怎样显示语言与地区名称

如果页面要把 US、zh-Hant 这样的标准代码显示成用户能读懂的名称，不必自己维护“代码到中文名称”的对象表。Intl.DisplayNames 由 locale 决定输出语言，由 type 决定代码属于语言、地区还是脚本，再通过 of(code) 取得名称。

技术依据：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames

最小用法是先按展示语言创建一个固定类型的 formatter，再把同类型代码交给 of()。语言切换时重建实例；不要把地区代码和语言代码混在同一个 type 下。

• type: "region" 处理 US、CN 等地区代码。
• type: "language" 处理 en、zh-Hant 等语言标识。
• type: "script" 处理 Latn、Hans 等文字脚本代码。

用 locale 和 type 创建名称格式器

构造器的第一个参数是 locale 列表，第二个参数至少要指定 type。例如中文地区选择器可以这样写：

// 把地区代码转换成中文地区名称，formatter 只负责 region 类型
const regionNames = new Intl.DisplayNames(["zh-CN"], { type: "region" });

// US 是地区代码，不要交给 type: "language" 的 formatter
const unitedStates = regionNames.of("US");
console.log(unitedStates); // 期望得到类似“美国”的本地化名称

// 同一个 formatter 可以复用来处理同类型的多个地区
const labels = ["CN", "JP", "DE"].map((code) => regionNames.of(code));
console.log(labels); // 期望得到中文地区名称数组

切换成语言名称时，保留 locale 但改成 type: "language"；切换成脚本名称时则使用 type: "script"。type 不是输出格式开关，而是输入代码的语义边界。

用 supportedLocalesOf 处理语言回退

当 locale 来自用户设置或浏览器偏好时，可以先调用 supportedLocalesOf()。它返回当前运行时愿意直接支持的请求 locale，不会替你创建 formatter，也不会替你决定业务上的兜底语言。

// 先从用户偏好中挑出运行时支持的 locale
function chooseLocale(preferred) {
  try {
    const supported = Intl.DisplayNames.supportedLocalesOf(preferred);
    // 没有直接支持项时，使用应用约定的稳定回退语言
    return supported[0] || "en";
  } catch (error) {
    // 非法的 BCP 47 标签不应让页面渲染直接中断
    return "en";
  }
}

const locale = chooseLocale(["zh-CN", "en"]);
const displayNames = new Intl.DisplayNames([locale], { type: "region" });
console.log(displayNames.of("US")); // 结果语言取决于最终选中的 locale

这一步解决的是“用哪种语言显示”，不是“某个代码是否有效”。因此，应用仍应保留自己的原始代码，并把查询结果为空时的展示策略放在业务层。

用 of 读取具体代码并区分类型

of() 接收一个代码并返回与 formatter 配置匹配的名称。地区码、语言码、脚本码外形相似，但语义不同；例如 US 应配合 region，en-US 应配合 language。

// 根据业务字段选择同一类代码的 formatter，并保留空结果兜底
function readableLanguage(code, locale) {
  const names = new Intl.DisplayNames([locale], { type: "language" });
  const label = names.of(code);
  // 未得到名称时返回原始代码，避免列表出现空白项
  return label || code;
}

console.log(readableLanguage("en-US", "zh-CN"));
console.log(readableLanguage("zh-Hant", "en"));

如果类型写错，最常见的表现不是“翻译不准确”，而是结果无法表达该代码。把代码字段和 type 一起建模，例如用 { code, type } 保存，而不是只传一个没有语义的字符串。

按界面语言复用或重建实例

同一页面在语言不变时可以复用 formatter；但 locale 或 type 变化后，应创建新实例，因为这些选项属于构造器配置。

// 缓存当前页面语言下的语言名称 formatter
let languageNames = new Intl.DisplayNames(["zh-CN"], { type: "language" });

function setDisplayLocale(locale) {
  // locale 改变时重建实例，避免继续使用旧语言输出
  languageNames = new Intl.DisplayNames([locale], { type: "language" });
}

function languageLabel(code) {
  // 将未知代码保留为可追踪的原值
  return languageNames.of(code) || code;
}

常见误区与选择表

不要用 split 或固定对象表替代这个 API 来拼接名称：那样既难覆盖语言差异，也容易把代码类型和显示语言混在一起。真正需要自定义标签样式时，可以先取得名称，再交给页面组件渲染；Intl.DisplayNames 只负责名称本身。

相关问题

Intl.DisplayNames 能直接把任意缩写翻译成名称吗？

不能。它面向标准化的语言、地区、脚本等代码；业务内部缩写仍需自己的映射或数据清洗层。

locale 改变后可以继续复用旧实例吗？

不建议。locale 是构造器配置，切换界面语言时重建对应 type 的实例更直观，也更不容易留下旧语言结果。