Intl.ListFormat

发布日期 · 标签：Intl

现代 Web 应用程序通常使用包含动态数据的列表。例如，一个照片查看器应用程序可能会显示类似以下内容：

这张照片包括 **Ada、Edith 和 Grace**。

一个基于文本的游戏可能会有不同类型的列表

选择你的超能力：**隐身、心灵感应或移情**。

由于每种语言都有不同的列表格式约定和词语，实现本地化的列表格式化程序并非易事。这不仅需要为每种要支持的语言提供所有词语（例如上面的示例中的“and”或“or”）的列表，而且还需要对所有这些语言的精确格式化约定进行编码！Unicode CLDR 提供了这些数据，但要在 JavaScript 中使用它，必须将其嵌入并与其他库代码一起发布。不幸的是，这会增加此类库的包大小，从而对加载时间、解析/编译成本和内存消耗产生负面影响。

全新的 Intl.ListFormat API 将此负担转移到 JavaScript 引擎，该引擎可以发布区域设置数据并使其直接可供 JavaScript 开发人员使用。Intl.ListFormat 允许对列表进行本地化格式化，而不会牺牲性能。

使用示例 #

以下示例展示了如何为英语语言创建用于连词的列表格式化程序

const lf = new Intl.ListFormat('en');
lf.format(['Frank']);
// → 'Frank'
lf.format(['Frank', 'Christine']);
// → 'Frank and Christine'
lf.format(['Frank', 'Christine', 'Flora']);
// → 'Frank, Christine, and Flora'
lf.format(['Frank', 'Christine', 'Flora', 'Harrison']);
// → 'Frank, Christine, Flora, and Harrison'

通过可选的 options 参数也支持析取词（英语中的“or”）

const lf = new Intl.ListFormat('en', { type: 'disjunction' });
lf.format(['Frank']);
// → 'Frank'
lf.format(['Frank', 'Christine']);
// → 'Frank or Christine'
lf.format(['Frank', 'Christine', 'Flora']);
// → 'Frank, Christine, or Flora'
lf.format(['Frank', 'Christine', 'Flora', 'Harrison']);
// → 'Frank, Christine, Flora, or Harrison'

以下是如何使用不同语言（中文，语言代码为 zh）的示例

const lf = new Intl.ListFormat('zh');
lf.format(['永鋒']);
// → '永鋒'
lf.format(['永鋒', '新宇']);
// → '永鋒和新宇'
lf.format(['永鋒', '新宇', '芳遠']);
// → '永鋒、新宇和芳遠'
lf.format(['永鋒', '新宇', '芳遠', '澤遠']);
// → '永鋒、新宇、芳遠和澤遠'

options 参数支持更高级的使用。以下是各种选项及其组合的概述，以及它们如何对应于由 UTS#35 定义的列表模式

类型选项描述示例
标准（或无类型）{}（默认）适用于任意占位符的典型“and”列表'January, February, and March'
或{ type: 'disjunction' }适用于任意占位符的典型“or”列表'January, February, or March'
单位{ type: 'unit' }适用于宽单位的列表'3 feet, 7 inches'
单位-短{ type: 'unit', style: 'short' }适用于短单位的列表'3 ft, 7 in'
单位-窄{ type: 'unit', style: 'narrow' }适用于窄单位的列表，屏幕空间非常有限'3′ 7″'

请注意，在许多语言（例如英语）中，这些列表中的许多可能没有区别。在其他语言中，间距、连词的长度或存在以及分隔符可能会发生变化。

结论 #

随着 Intl.ListFormat API 的普及，你会发现库会放弃对硬编码 CLDR 数据库的依赖，转而使用本机列表格式化功能，从而提高加载时间性能、解析和编译时间性能、运行时性能以及内存使用率。

Intl.ListFormat 支持 #

关于此功能支持列表