toLocaleString奇淫技巧

toLocaleString介绍

toLocaleString用于将对象根据语言的不同转换成某种语言环境下的字符串，同时也可以根据传入的参数来判断具体的表现形式。本文主要介绍Number和Date类型的toLocaleString方法

Number.prototype.toLocaleString

首先谈一个面试中经常会被问道的问题：如何对数字进行千位符格式化？一般人可能想到的做法是换成字符数组循环手动插入,或者使用正则的方法。其实知道了toLocaleString完全可以不需要这么做，一行代码就能搞定。

const num = 1122333444455551
num.toLocaleString() //1,122,333,444,455,551

Number.prototype.toLocaleString支持两个参数。一个是语言代码，表示将数字格式化成哪国语言；另一个是格式化时的可选的一些属性，包括localeMatcher、style、currency、currencyDisplay、useGrouping、minimumIntegerDigits、minimumFractionDigits、maximumFractionDigits、minimumSignificantDigits、maximumSignificantDigits等。例如：

const num = 1276482;
num.toLocaleString('zh', { style: 'decimal' }) // 1,276,482，纯数字格式
num.toLocaleString('zh', { style: 'percent' }) // 127,648,200%，百分数格式
num.toLocaleString('zh', { style: 'currency', currency: 'CNY' }); // ￥1,276,482.00，人民币形式
num.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'code' }); // CNY1,276,482.00，currency不区分大小写
num.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'name' }); // 1,276,482.00人民币

上面提到的比较长的属性用来控制整数、小数位数和有效数字位数，可以分为两组。第一组是minimumIntegerDigits、minimumFractionDigits、maximumFractionDigits，应用场景是自动补0。

const num = 1413.56;
num.toLocaleString('zh', { minimumIntegerDigits: 7 }); //0,001,413.56
// 如果不想要分隔符可以指定useGrouping为false
num.toLocaleString('zh', { minimumIntegerDigits: 7, useGrouping: false }); // 0001413.56
num.toLocaleString('zh', { minimumFractionDigits: 3, useGrouping: false }); // 1413.560
num.toLocaleString('zh', { maximumFractionDigits: 1, useGrouping: false }); // 1413.6

另一组是minimumSignificantDigits和maximumSignificantDigits，用来控制有效数字位数，只要设置了这一组属性，第一组的属性就会被忽略。

const num = 141.56;
num.toLocaleString('zh', { minimumSignificantDigits: 8 useGrouping: false }); // 141.56000
num.toLocaleString('zh', { maximumSignificantDigits: 3, useGrouping: false }); // 142

兼容型

可惜的是，好用的API兼容性往往都不是很好。如果想使用参数的化，项目需要支持到IE11

MDN地址：toLocaleString

Date.prototype.toLocaleString

Date类型的语言代码一般用的不多，保持默认或者使用zh即可，格式化时的常用的属性主要有weekday、year、month、day、hour、minute。

weekday表示星期几（中文形式没有），可选属性有narrow、short、long，用来控制缩写的形式

const date = new Date();
date.toLocaleString('en', { weekday: 'narrow' }); // M
date.toLocaleString('en', { weekday: 'short' }); // Mon
date.toLocaleString('en', { weekday: 'long' }); // Monday

timeZoneName表示时区的表现形式，有short和long两个值

const date = new Date();
date.toLocaleString('zh', { timeZoneName: 'short' }); // 2018/4/23 GMT+8 下午2:17:37
date.toLocaleString('zh', { timeZoneName: 'long' }); // "2018/4/23 中国标准时间 下午2:17:37"

剩下的属性可以取值为numeric和2-digit来控制位数展示。不过好像对于小时、分钟、秒不起作用

const date = new Date(Date.UTC(2012, 1, 2, 3, 1, 1)); // 2012/2/2 11:01:01
date.toLocaleString('zh', { hour12: false, year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }); // 2012/2/2 11:01:01
date.toLocaleString('zh', { hour12: false, year: '2-digit', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }); // 12/02/02 11:01:01

兼容性

和上面差不多，如图：

MDN地址：toLocaleString

原文链接

本文参考自sea_ljf的文章想偷懒的话，toLocaleString 了解一下？