JavaScript Intl.ListFormat 怎样生成本地化并列文本

我第一次认真用 Intl.ListFormat，是在一个需要同时支持中英文的筛选页面里。原本只是把数组用逗号拼起来，后来发现英文的最后一个连接词、中文的顿号、日文的分隔习惯都不该由业务代码硬编码。更合适的做法是让 formatter 根据语言和选项生成并列文本。

本文只解决一个问题：怎样用 JavaScript 的 Intl.ListFormat 生成本地化列表。参考文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat

普通展示直接使用 new Intl.ListFormat(locale, options).format(items)；需要给每个项目包裹链接、标签或事件时，改用 formatToParts(items)，不要再用 split 猜分隔符。

先用 locale、style 和 type 生成普通文本

Intl.ListFormat 的选择逻辑可以拆成三部分：locale 决定语言规则，style 决定长短，type 决定是“和”、 “或”还是单位并列。最常用的入口就是 format：

const tools = ["编辑器", "终端", "浏览器"];

// locale 决定语言规则，type 决定连接关系。
const zhAnd = new Intl.ListFormat("zh-CN", {
  style: "long",
  type: "conjunction",
});
console.log(zhAnd.format(tools));

// disjunction 表示“或”，适合表达可选方案。
const enOr = new Intl.ListFormat("en", {
  style: "long",
  type: "disjunction",
});
console.log(enOr.format(["editor", "terminal", "browser"]));

// narrow 适合空间紧张的标签，不要把它当成完整句子。
const enUnit = new Intl.ListFormat("en", {
  style: "narrow",
  type: "unit",
});
console.log(enUnit.format(["5 MB", "2 min", "3 files"]));

如果是普通段落、筛选摘要或卡片副标题，到这里通常就够了。列表只有一个项目时，formatter 不会凭空添加连接词；两个项目时也会按当前语言选择合适的连接方式。

用 supportedLocalesOf 判断语言回退

用户语言往往来自浏览器设置或用户资料，不能假定每个运行时都能完整支持所有 locale。可以先用静态方法筛出运行时支持的语言，再决定是否回退到默认语言：

const requested = ["zh-Hans-CN", "en-US", "fr-FR"];

// 只筛查运行时支持的 locale，不修改原数组。
const supported = Intl.ListFormat.supportedLocalesOf(requested);
const locale = supported[0] ?? "en";

// 复用同一个配置，避免每次渲染都重复创建 formatter。
const formatter = new Intl.ListFormat(locale, {
  style: "long",
  type: "conjunction",
});
const text = formatter.format(["A", "B", "C"]);

这里的回退只是展示策略：如果业务必须和完整翻译资源保持一致，应把语言选择交给应用自己的国际化层。Intl.ListFormat 负责列表连接规则，不负责翻译项目名称。

需要逐项渲染时改用 formatToParts

我第二次踩坑，是把已经格式化的字符串用逗号拆开，再给每项加链接。这样一来，英文的 , and 、中文的顿号和窄样式都会让拆分逻辑变得脆弱。formatToParts 会把结果拆成 element 和 literal，业务只需要分别处理两类片段：

const formatter = new Intl.ListFormat("zh-CN", {
  style: "long",
  type: "conjunction",
});
const items = ["文档", "示例", "FAQ"];

// element 是原始列表项，literal 是语言规则产生的分隔或连接文本。
const parts = formatter.formatToParts(items);
const container = document.querySelector("#related-list");

for (const part of parts) {
  if (part.type === "element") {
    // 列表项可以安全地进入自己的节点，后续可绑定链接或事件。
    const item = document.createElement("span");
    item.className = "related-item";
    item.textContent = part.value;
    container.append(item);
  } else {
    // literal 由 Intl.ListFormat 产生，保留当前语言的标点和连接词。
    container.append(document.createTextNode(part.value));
  }
}

这也是 format 和 formatToParts 最重要的分界：只需要一段字符串就选前者，需要控制每个列表项的结构就选后者。不要把 literal 当作业务字段，也不要自行替换其中的逗号或连接词。

按场景决定是否复用 formatter

formatter 的配置一旦确定就可以复用。列表频繁刷新时，把它放到组件或模块的稳定位置；只有 locale、style 或 type 改变时才重新创建。语言切换后继续复用旧实例，会得到旧语言的连接规则，这是我觉得最容易被忽略的取舍。

相反，如果页面只是偶尔拼接一段摘要，直接在使用处创建更容易读。不要为了“优化”把所有语言的 formatter 做成一个巨大缓存，先把缓存键限定为实际使用的 locale、style 和 type。

选择表：format 还是 formatToParts

最后记住三个边界：项目名称仍由你的翻译资源提供；列表连接规则交给 Intl.ListFormat；需要结构化渲染时保留 formatToParts 的 literal。这样既能减少条件分支，也不会把某一种语言的标点误当成通用规则。

相关问题

Intl.ListFormat 能替我翻译列表项吗？

不能。它负责按 locale 排列和连接已有的项目文本，项目本身的翻译仍应来自应用的语言资源。

什么时候不应该使用 split 拆分结果？

只要列表项需要单独加样式、链接或事件，就不应该拆分最终字符串，应直接使用 formatToParts。