神奇的 toLocaleString

https://blog.csdn.net/weixin_39749820/article/details/82869537

 

 

概述

• toLocaleString 方法是用于返回格式化对象后的字符串，该字符串格式因语言不同返回值也会不同，可以通过传参决定返回的语言及具体的表现，其语法如下：
  object.toLocaleString([locales [, options]]);
• locales 参数用于指定格式化对象时使用的语言环境，可以不传。该参数具体可选值可以参考这里，一般而言使用 en 或 zh 即可应对大部分的情况，如下图：
  
  注：此参数大小写不敏感。
• options 参数是输出样式的配置项，根据 object 类型的不同会有不同的选项，后面会详细介绍这个参数，但是需要注意的是如果不传 locales 参数，那么 options 参数是无效的。
• 最后再来看看兼容性，具体如下图：
  
  可以发现在使用参数的情况下，兼容性较差，但总体还算可以

Number.prototype.toLocaleString

首先介绍 toLoacleString 在数字类型上的使用（非常之nb）

• 有的时候我们需要是整数部分每三位加一个逗号，这时不妨这么搞：

  	const num = 2333333;   
  	num.toLocaleString();   // 2,333,333
  

  • 1
  • 2
  • 1
  • 2
• 有时候面试时出题人会问如何格式化数字，使用这个是不是可以完打出题人的脸，根本不需要什么正则
• 下面我们再来看一看 toLocaleString 在数字类型上的一些 options 参数（仅仅是一些常用的属性，具体的属性请查阅 MDN 文档）
  • style 属性 – 表示格式化时使用的样式（默认值是 decimal 也就是纯数字，也可以是 percent 百分比以及 currency 货币），举个栗子

    const num = 2333333;                                                      
    num.toLocaleString('zh',{style:'decimal'});  //2,333,333              
    num.toLocaleString('zh',{style:'percent'});   // 233,333,300%                  
    num.toLocaleString('zh',{style:'currency'});     //  报错                                        
    

    • 1
    • 2
    • 3
    • 4
    • 1
    • 2
    • 3
    • 4
    注：如上可知，值为 currency 时必须同时指定 options 中的 currency 属性，否则会报错
  • 下面要看的是 style 设为 currency 时才有用的，它们分别是 currency 与 currencyDisplay ，前者制定对应的货币，比如 USD 、EUR 与 CNY （也是不区分大小写的）；后者则是货币符号的展示样式，默认值是 symbol ，即对应的符号，如 CNY 是 ￥ ，该属性也可以设置为 code 与 name ，不过用的比较少，还是上栗子吧

    const num = 2333333
    num.toLocaleString('zh',{style:'currency' , currency:'CNY' }); //￥2,333,333.00
    num.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'code' });         // CNY2,333,333.00
    num.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'name' });       //2,333,333.00人民币
    

    • 1
    • 2
    • 3
    • 4
    • 1
    • 2
    • 3
    • 4
  • 这一组是相当强大的属性，它们是 minimumIntegerDigits 、minimumIntegerDigits 与 maximumFractionDigits ，分别用于指定整数最少位数、小数最少与最多位数，不够用 0 补全，继续看栗子

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
  • 还有一组也是相当强大的属性，它们是 minimumSignificantDigits 与 maximumSignificantDigits，用于控制有效数字的位数，只要设置了这一组，第三的那一组属性则全部忽略不算，还是栗子

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

    • 1
    • 2
    • 3
    • 1
    • 2
    • 3
    注：maximumFractionDigits 与 maximumSignificantDigits 均是四舍五入，使用时请注意。

Date.prototype.toLocaleString

• 下面我们来看一下 toLocaleString 在日期类型上面的应用，与数字类型不同的是，日期类型的 locales对输出的影响十分之大，因此我们应该根据实际情况选择合适的语言类型，此处也是只介绍常用的属性，详细的属性还是请大家查阅 MDN 文档
  • hour12 表示的是使用十二小时制还是使用二十四小时制，默认值是十二小时制。看栗子

    const date = new Date();
    date.toLocaleString('zh', { hour12: true });  //2018/4/4 下午6:57:36
    date.toLocaleString('zh', { hour12: false });  //2018/4/4 18:57:36
    

    • 1
    • 2
    • 3
    • 1
    • 2
    • 3
  • 剩下的格式化就是年月日时分秒星期等选项了，具体的属性一共有九个，分别是 weekday、era、year、month、day、hour、minute、second 与 timeZoneName 我们一个一个的来撸
    • 首先来看两个比较特殊的 weekday 与 era （即‘公元’），它俩均可以取值为 narrow 、short 以及 long，简单说就是能有多短就有多短、缩写以及正常写法，还是撸代码吧：

      const date = new Date();
      date.toLocaleString('en', { weekday: 'narrow', era: 'narrow' }); //W A
      date.toLocaleString('en', { weekday: 'short', era: 'short' }); //Wed AD
      date.toLocaleString('en', { weekday: 'long', era: 'long' }); //Wednesday Anno Domini
      

      • 1
      • 2
      • 3
      • 4
      • 1
      • 2
      • 3
      • 4
    • 之后再看看 timeZoneName 属性，这个属性只有 short 或 long 两个值，具体中文怎么翻译我也不清楚，不过看了代码应该就知道有何用了:

      const date = new Date();
      date.toLocaleString('zh', { timeZoneName: 'short' });  //2018/4/5 GMT+8 下午7:18:26
      date.toLocaleString('zh', { timeZoneName: 'long' });   //2018/4/5 中国标准时间 下午7:18:26、
      

      • 1
      • 2
      • 3
      • 1
      • 2
      • 3
    • 剩下的属性，均可以取值为 numeric 与 2-digit ，简单说来就是是否用两位数字表示，看码说话：

      const date = new Date();
      date.toLocaleString('zh', { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', });  //2018/4/5 下午7:30:17
      date.toLocaleString('zh', { year: '2-digit', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' });  //18/04/05 下午7:30:17
      

      • 1
      • 2
      • 3
      • 1
      • 2
      • 3
    • 最后值得一说的是 month 这个属性，因为语言对于月份来说有不同的展现，因此除去 numeric与 2-digit 外，它还有额外的三个属性，分别是 narrow 、short 与 long，具体还是来看代码：

      const date = new Date();
      date.toLocaleString('en', { month: 'narrow' }); //A
      date.toLocaleString('en', { month: 'short' }); //Apr
      date.toLocaleString('en', { month: 'long' }); //April
      

      • 1
      • 2
      • 3
      • 4
      • 1
      • 2
      • 3
      • 4

小结

关于 toLocaleString 的介绍就这么多了，可以发现在某些场景下确实可以发挥极大地作用，不再需要正则了，虽然个人感觉这个 API 比较冷门，但还是比较好用的