Intl.ListFormat对象 根据语言环境进行列表格式化

Intl.ListFormat 是一个语言相关的列表格式化构造器。根据默认环境或指定语言项进行列表数据相应格式化输出。Web前端开发过程中通常会从后端获取相应的动态数据，但获取的数据需要将其格式转换后再输出于用户端方可。

Intl.ListFormat: ['苹果', '香蕉', '桃子'] 输出 我喜欢吃的水果是苹果、香蕉和桃子。

const formatter = new Intl.ListFormat();
const fruits = ['苹果', '香蕉', '桃子'];

console.log(`我喜欢吃的水果是${formatter.format(fruits)}。`);
// 我喜欢吃的水果是苹果、香蕉和桃子。

关联文章“Intl.RelativeTimeFormat相对时间格式化”。

背景示例

例如从后端获取到一个对象。

['HTML', 'CSS', 'JavaScript', 'Angular']

需要将其格式化输出中文版

// 中文
// HTML、CSS、JavaScript和Angular

或英文版

// HTML, CSS, JavaScript, and Angular

通过一些方法（或引相关库），也可以将其转换，但比较麻烦，增加一定的捆绑，产生了一定的负影响（加载时间、解析/编译成本及其内存消耗等）。

这时，就可以启用Intl.ListFormat API进行本地列表格式化处理。

Intl.ListFormat语法

new Intl.ListFormat([locales[, options]])

参数

locales 可选。符合 BCP 47 语言标注的字符串或字符串数组。

options 可选。 拥有下面所列属性中任意几个或全部的对象。

1. localeMatcher 指定要使用的本地匹配算法。可选的值有"lookup" 和 "best fit"；默认情况下使用"best fit"。
2. type 消息输出的格式。conjunction 默认值 “且” e.g.:  A, B, and C；disjunction "或" A, B, or C ，以及用于替代带计量单位的值列表的"unit" (例如： 5 pounds, 12 ounces)。
3. style 被格式化消息的长度。可选值有："long" (默认值，例如： A, B, and C)、"short" 或者 "narrow" (例如： A, B, C)。 当style 的值为narrow时，type 属性的值只能取值unit。

例如本地环境默认不配置相应参数（环境默认中文）

const lf = new Intl.ListFormat();
lf.format(['HTML', 'CSS', 'JavaScript', 'Angular']);
// 结果输出：HTML、CSS、JavaScript和Angular

数组元素以“顿号”分隔，最后一项则是“和”。

如果要显示英文格式，则：

const lf = new Intl.ListFormat('en');
lf.format(['HTML', 'CSS', 'JavaScript', 'Angular']);
// 结果：HTML, CSS, JavaScript, and Angular

则以“逗号”和“and”输出。

若以中文语言输出“或”，则设置type为disjunction即可，默认是conjunction。如：

const lf = new Intl.ListFormat('zh', {
  type: 'disjunction'
});
lf.format(['HTML', 'CSS', 'JavaScript', 'Angular']);

// 结果输出：HTML、CSS、JavaScript或Angular

英文相应以“or”连接。

const lf = new Intl.ListFormat('en', {
  type: 'disjunction'
});
lf.format(['HTML', 'CSS', 'JavaScript', 'Angular']);

// 输出：HTML, CSS, JavaScript, or Angular

结尾

所以，既然出来了，在实际Web开发中将其运用起来，现代浏览器基本支持。它的出现，一方面是便于Web开发人员，更重要的是提高加载性能以及解析时和编译时性能。