toLocaleString

最近开发项目中涉及的大量的时间格式的处理，在处理过程中就接触到了toLocaleString()这个方法，此篇是总结toLocaleString()方法的一些知识点。

概述

toLocale​String()用来返回格式化对象后字符串。它的语法如下：

dateObj.toLocaleString([locales [, options]])

这个方法有两个参数: locale和options。

locale为可选参数，它用来指定格式化对象时使用的语言环境。默认是浏览器当前的语言环境。该参数的可选值可以参考这里。options也是一个可选参数，它是对象格式，用来设置对象格式化样式的一些配置属性。

Date.prototype.toLocaleString

先来介绍toLocale​String()在格式化日期时的使用。在格式化日期时，locale的值一般为zh和en就能满足大部分场景的使用。

var date = new Date();
console.log(date.toLocaleString('zh'));  // 2019-5-12 14:29:34
console.log(date.toLocaleString('en'));  // 5/12/2019, 2:29:34 PM

options参数具体的可选值有

• localeMatcher
• timeZoneName
• hour12
• hourCycle
• formatMatcher
• weekday
• era
• year
• month
• day
• hour
• minute
• second

在这里我们只介绍一些常用的属性。

hour12

该属性用来控制返回的时间是12小时制还是24小时制，它的值是布尔类型（true或false)。默认是true,即返回的时间是12小时制。

 var date = new Date();
 console.log(date.toLocaleString('zh', {hour12: true}));  // 2019/5/12 下午2:53:49
 console.log(date.toLocaleString('zh', {hour12: false})); //  2019/5/12 14:53:49

接下来是介绍格式化年月日时分秒的属性，看上面的单词，想必我们便能猜到是什么意思，这里来介绍一些这些属性的可选值。

year， day， hour，minute， second这五个属性的可选值是一样的，只有两个：numeric和2-digit。

numeric和2-digit简单的说就是是否可以用两个数字表示，可以看如下代码：

  var date = new Date();
  console.log(date.toLocaleString('zh', {year: 'numeric', month: 'numeric',  day: 'numeric',  hour: 'numeric',  minute: 'numeric',  second: 'numeric'})); // 2019/5/12 下午3:05:27
  console.log(date.toLocaleString('zh', {year: '2-digit',  month: '2-digit',  day: '2-digit',  hour: '2-digit',  minute: '2-digit',  second: '2-digit'})); // 19/05/12 下午3:05:27

除此之外， weekday的可选值有三个：long, short 和narrow，而month属性除了上面两个可选值之外，这三个值也是month属性的可选值。
long, short 和narrow的区别，可以看如下代码：

  var date = new Date();
  console.log(date.toLocaleString('en', { month: 'narrow' }));  // M
  console.log(date.toLocaleString('en', {  month: 'short' })); // May
  console.log(date.toLocaleString('en', {  month: 'long' })); .// May
  console.log(date.toLocaleString('en', {  weekday: 'narrow'})); // S
  console.log(date.toLocaleString('en', { weekday: 'short'}));  // Sun
  console.log(date.toLocaleString('en', {  weekday: 'long'})); // Sunday

这三个属性简单说就是: narrow:能有多短就有多短，short: 缩写形式， long: 正常形式 。

最后一个要介绍的属性是timeZoneName。它的可选值有两个：short和long。这两个值的区别如下：

  var date = new Date();
  console.log(date.toLocaleString('zh', { timeZoneName: 'long' })); // 2019/5/12 中国标准时间 下午3:23:59
  console.log(date.toLocaleString('zh', {  timeZoneName: 'short' })); // 2019/5/12 GMT+8 下午3:23:59

Number.prototype.toLocaleString

在格式化数字的时候，locales属性的可选值可以参考这里。而数字类型的options属性的可选值有:

• localeMatcher
• style
• currency
• currencyDisplay
• useGrouping
• minimumIntegerDigits
• minimumFractionDigits
• maximumFractionDigits
• minimumSignificantDigits
• maximumSignificantDigits

同样只介绍一些常用的属性。

style

style用来设置格式化时使用的样式，它有三个值：decimal表示纯数字，percent表示百分比格式，currency表示货币。默认值是decimal。

  const num = 2444222;
  console.log(num.toLocaleString('zh', {style: 'decimal'})); // 2,444,222
  console.log(num.toLocaleString('zh', {style: 'percent'})); // 244,422,200%
  console.log(num.toLocaleString('zh', {style: 'currency'})); // 报错

对于设置style的值为currency时，需要配合currency属性的设置，如果单独使用会报错。

currency和currencyDisplay

这两个属性只有在style的值是“currency”的时候才会生效。currency属性用来设置货币格式化中使用的货币符号。可能的值是ISO的货币代码 ，"CNY"是人民币，"USD" 表示美元，"EUR"表示欧元, 更多参考请点击这里。currencyDisplay属性用来设置货币格式化中显式货币。它的可能值有：symbol表示使用本地化的货币名称，code使用国际标准组织货币代码， name表示使用本地化的货币名称。默认值是symbol。

  const num = 2444222;
  console.log(num.toLocaleString('zh', {style: 'currency', currency: 'CNY'}));  // ￥2,444,222.00
  console.log(num.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'code' })); // CNY 2,444,222.00
  console.log(num.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'name' })); // 2,444,222.00 人民币

minimumIntegerDigits、 minimumFractionDigits 与 maximumFractionDigits

这组属性非常的强大，在某些场合会给我们带来极大的便利。

• minimumIntegerDigits用来指定使用的整数数字的最小数目.可能的值是从1到21,默认值是1。
• minimumFractionDigits用来指定使用的小数位数的最小数目.可能的值是从0到20;默认为普通的数字和百分比格式为0。
• maximumFractionDigits用来指定使用的小数位数的最大数目。可能的值是从0到20。

这三个属性简单来说就是指定整数的最小位数和小数的最大位数和最小位数。不够的位数的自动补零。具体例子如下：

  const num = 2333.3;
  console.log(num.toLocaleString('zh', { minimumIntegerDigits: 5 }));    //02,333.3
  //如果不想有分隔符，可以指定useGrouping为false
  console.log(num.toLocaleString('zh', { minimumIntegerDigits: 5, useGrouping: false }));    //02333.3
  console.log(num.toLocaleString('zh', { minimumFractionDigits: 2, useGrouping: false })); //2333.30

  const num2 = 666.666;
  console.log(num2.toLocaleString('zh', { maximumFractionDigits: 2, useGrouping: false }));     //666.67

minimumSignificantDigits和maximumSignificantDigits

这一组也是很强大的一组属性。

• minimumSignificantDigits 控制使用的有效数字的最小数目。可能的值是从1到21；默认值是1。
• maximumSignificantDigits 控制使用的有效数字的最大数量。可能的值是从1到21；

简单的来说这组属性就是用来控制数字的有效数字的位数的。只要设置了这一组属性，上面那一组属性全部忽略不算。具体示例：

  const num = 1234.5;
  console.log(num.toLocaleString('zh', { minimumSignificantDigits: 6, useGrouping: false }));      //1234.50
  console.log(num.toLocaleString('zh', { maximumSignificantDigits: 4, useGrouping: false }));      //1235

注意：maximumFractionDigits和maximumSignificantDigits均是四舍五入的，在使用的时候需要注意