ES12 新增方法之 Intl.ListFormat、Intl.DateTimeFormat、Intl.RelativeTimeFormat

1. Intl.ListFormat 是什么？

Intl.ListFormat 用来处理和多语言相关的对象格式化操作

Intl.ListFormat 参数/用法

new Intl.ListFormat([locales[, options]])
输出处理过后的字符串

参数

name	type	是否可选	默认项	描述
locales	string	是	-	符合 BCP 47 语言标注的字符串或字符串数组。en 英文 / zh-CN 中文环境
options	Object	是	-	拥有下面所列属性中任意几个或全部的对象。
options 配置项：
localeMatcher	string	是	lockup	指定要使用的本地匹配算法。可选参数：‘best fit’ / lockup
type	string	是	conjunction	消息输出的格式。可选参数：disjunction / unit / conjunction ,
style	string	是	long	被格式化消息的长度。可选参数：long / short /narrow , 当 type:unit 时，style 只能取 narrow

zh-CN 表示用在中国大陆区域的中文。包括各种大方言、小方言、繁体、简体等等都可以被匹配到。
zh-Hans 表示简体中文。适用区域范围是全宇宙用中文简体的地方，内容包括各种用简体的方言等。

代码示例：

//不允许存在数字,如有空格，不会忽略空格
let strArr = ["xiaoming", "小明", "小红", "XXMM"]; 

    let EnForm = new Intl.ListFormat("en",{
      localeMatcher:'lookup',
      style:'short',
      type:'disjunction'
    }).format(strArr);

    let cnForm = new Intl.ListFormat("zh-cn",{
      localeMatcher:'lookup',
      style:'short',
      type:'disjunction'
    }).format(strArr);

    // lookup/best fit + long + conjunction  输出：
    // console.log("en", EnForm); // xiaoming, 小明, 小红, and XXMM
    // console.log("cn", cnForm); // xiaoming、小明、小红和XXMM

    // lookup/best fit + short/long + disjunction   输出：
    // console.log("en", EnForm); // xiaoming, 小明, 小红, or XXMM
    // console.log("cn", cnForm); // xiaoming、小明、小红和XXMM

    // lookup/best fit + short + conjunction   输出：
    // console.log("en", EnForm); // xiaoming, 小明, 小红, & XXMM
    // console.log("cn", cnForm); // xiaoming、小明、小红和XXMM

    // lookup/best fit + narrow + unit  输出：
    //  console.log("en", EnForm); // xiaoming 小明 小红 XXMM
    // console.log("cn", cnForm); // xiaoming小明小红XXMM
    

---

2. Intl.DateTimeFormat() 是什么？

可以用来处理多语言下的时间日期格式化函数。与 moment.js 时间插件相似

Intl.DateTimeFormat 参数/用法

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

参数

name	type	是否可选	默认项	描述
locales	string	是	-	符合 BCP 47 语言标注的字符串或字符串数组。en 英文 / zh-CN 中文环境
options	Object	是	-	拥有下面所列属性中任意几个或全部的对象。
options 配置项：	-	-	-	-
localeMatcher	string	是	best fit	使用的 local 的匹配算法。可选参数：lookup / best fit
只想取 年月日+时间
timeStyle	string	是	-	时间格式的长度，可选参数：short / medium / long
dateStyle	string	是	-	日期格式的长度，可选参数：short / medium / long，zh-cn 格式下取哪个都一样
精确用法（不用写上面两项）
weekday	string	是	-	星期几。可选参数：narrow / short / long，zh-cn 转换成 星期，en 转换成数字
era	string	是	-	公元。可选参数：narrow / short / long，zh-cn 转换成 公元
year	string	是	-	年。根据语言转换格式，可选参数：numeric / 2-digit，zh-cn 转换成 年
month	string	是	-	月。可选参数：numeric / 2-digit / narrow / short / long
day	string	是	-	日。可选参数：numeric / 2-digit
hour	string	是	-	小时。可选参数：numeric / 2-digit
minute	string	是	-	分钟。可选参数：numeric / 2-digit
second	string	是	-	秒。可选参数：numeric / 2-digit
timeZoneName	string	是	-	时区名称展示方式。可选参数：short / long

---

代码示例

 let date = new Date(); //获取本机当前时间

// 粗暴用法 获取 年月日+时间
 let dateShort = { timeStyle: "medium", dateStyle: "short" };
 let dateMedium = { timeStyle: "medium", dateStyle: "medium" };

 console.log(new Intl.DateTimeFormat('zh-cn',dateShort).format(date)); // 2022/8/5 15:27:17
 console.log(new Intl.DateTimeFormat('zh-cn',dateMedium).format(date)); // 2022年8月5日 15:27:28




 // 精确用法 获取 公元+星期+年月日+时间

 // 不传，取默认的时间格式
 console.log(new Intl.DateTimeFormat().format(date)); // 2022/8/5


  let options1 = {
	year: "numeric",
    month: "numeric", 
    hour: "numeric",
    minute: "numeric",
    second: "numeric",
    hour12: false, //是否为 12 小时制
  }
  console.log(new Intl.DateTimeFormat("de-DE", options1).format(date)); // de-DE(德语) Freitag, 5. August 2022
  

  let options2 = {
      era: "long", // 公元  locales如果为中文，切换任何参数都是公元，反之，才会有长短显示的区别
      weekday: "long", // 星期几
      year: "numeric",
      month: "numeric", // long 打印: 5. August 2022 um 14:31:44, short 打印：5. Aug. 2022, 14:32:37, narrow 打印：5. A 2022, 14:35:58
      day: "numeric",
      hour: "numeric",
      minute: "numeric",
      second: "numeric",
      hour12: false,
    };
    console.log(new Intl.DateTimeFormat("zh-cn", options2).format(date)); // 公元2022年8月5日星期五 15:31:32


    let options3 = {
      timeStyle: "medium",
      dateStyle: "short",
    };
    console.log(new Intl.DateTimeFormat("zh-cn", options3).format(date)); // 2022/8/5 14:27:59

---

3. Intl.RelativeTimeFormat() 是什么？

处理时间格式，转换为昨天/前天/一天前/季度等

Intl.RelativeTimeFormat() 参数/用法

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

参数

name	type	是否可选	默认项	描述
locales	string	是	-	符合 BCP 47 语言标注的字符串或字符串数组。en 英文 / zh-CN 中文环境
options	Object	是	-	拥有下面所列属性中任意几个或全部的对象。
options 配置项：	-	-	-	-
numeric	string	是	always	返回字符串是数字显示还是文字显示, always 总是文字显示 / auto 自动转换
style	string	是	long	返回字符串的风格，可选参数：long / short / narrow
localeMatcher	string	是	best fit	表示匹配语言参数的算法， 可选参数：best fit / lookup

---

调用 format 传入参数

const tf = new Intl.RelativeTimeFormat(“zh-cn”);
console.log( tf.format(-10, “year”) );
// output :: 10年前

name	type	描述
year	string	年，根据语言转换格式，zh-cn 转换成 年
month	string	月
quarter	string	季度
week	string	周
day	string	天
hour	string	小时
minute	string	分钟
second	string	秒

---

代码示例：

// options 不写表示默认项
 const tf = new Intl.RelativeTimeFormat("zh-cn");
 
    // output :: 10年前
    console.log(tf.format(-10, "year"));
    
    // output :: 5个月前
    console.log(tf.format(-5, "month"));
    
    // output :: 2个季度后
    console.log(tf.format(2, "quarter"));
    
    // output :: 2周后
    console.log(tf.format(2, "week"));
    
    // output :: 2天前
    console.log(tf.format(-2, "day"));
    
     // output :: 8小时后
    console.log(tf.format(8, "hour"));
    
    // output :: 15分钟前
    console.log(tf.format(-15, "minute"));
    
      // output :: 2秒钟后
    console.log(tf.format(2, "second"));
    

---

数据来源参考：

链接: MDN-Intl
链接: 阮一峰- Intl.RelativeTimeFormat