中国古玉网了解一下? 想偷懒的话,toLocaleString-奇舞周刊

作者:admin 2015-05-11 05:25:54 标签:
了解一下? 想偷懒的话,toLocaleString-奇舞周刊
编者按:本文由 sea_ljf 发表于掘金,已授权奇舞周刊转载
hello~亲爱的看官老爷们大家好~最近沉迷于学习其他语言,有一段时间没写文章了。时间一晃就到了4月,再不写就怕彻底懒下去了。这次给大家分享 toLocaleString 的一点技巧,如果需要初始化数字或日期时,不妨考虑一下,会有偷懒奇效哦!
注意雕刻爱情!一般而言,数字与日期的显示是有要求的,样式方面需要统一。但如果是内部项目或者是 pm 允许,那么使用 toLocaleString 格式化数字与日期是相当好的,不然还是建议自己写正则或函数转换重生明珠。毕竟每个 API 都有局限性。
本文参考自 MDN 的文档与日常使用所得,如果你对这个 API 已经相当熟悉,请帮我看下是否有遗漏(笑);不了解的同学可以浏览一下,应该会对你有所帮助柏诗宣 。概述
toLocaleString 方法是用于返回格式化对象后的字符串,该字符串格式因不同语言而不同。可以通过传参决定返回的语言与具体的表现,某些场景下相当有用,语法如下:
object.toLocaleString([locales[巫临异世 ,options]]);
locales 参数用于指定格式化对象时使用的语言环境,默认为当前环境的语言,可以不传。该参数具体可选的值可以参考 这里①,一般而言使用 en 或 zh 即可应付绝大多数情况。例子如下:
constdate=newDate();
date.toLocaleString('zh');// 2018/4/4 下午15:08:38
date.toLocaleString('en');// 4/4/2018, 3:08:38 PM
顺带一提,此参数大小写不敏感,已经在浏览器与 Node 验证过。
options 参数为输出样式的配置项,根据 object 类型不同会有不同选项,下文会仔细解释这个参数。但需要注意的是如果不传 locales 参数,那么 options 参数是不会生效的,其实上面的语法其实已经显现出这点。
最后则是兼容性问题,具体如下图:

使用参数的情况下兼容性稍差,这比较可惜,但总体而言还是比较乐观的。Number.prototype.toLocaleString
先介绍 toLocaleString 在数字类型上的使用。面试偶尔会问到如何格式化数字,使整数部分每三位加一个逗号,这时不妨:
constnum=2333333;
num.toLocaleString();// 2,333,333
其实是不需要任何正则的~打完出题者的脸后,我们一起看看 toLocaleString 在数字类型的 options 参数有好用属性,以方便我们偷懒使用。注意北语网院 ,本文不是翻译文档,因而只会介绍一些常用的属性,更具体的选项请查阅MDN相关文档。
style 表示格式化时使用的样式,默认值是 decimal 也就是纯数字异都风流 ,也可为 percent 百分比显示与 currency 货币显示。值为 currency 时必须同时指定 options 中的 currency 属性,否则报错。具体例子如下:
constnum=2333333;
num.toLocaleString('zh',{style:'decimal'});//2,333,333
num.toLocaleString('zh',{style:'percent'});//233,333,300%
num.toLocaleString('zh',{style:'currency'});//报错
接下来的两个属性是 style 设为 currency 时才有用的,它们分别是 currency 与 currencyDisplay,前者指定对应的货币,如 USD、EUR 与 CNY 等,实测也是不区分大小写的。后者是货币符号的展示样式,默认值是 symbol,即对应的符号,如 CNY 是 ¥。该属性的值也可以是 code 与 name,只是用得比较少,看看例子就好了~具体如下:
constnum=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人民币
最后是两组相当强大的属性玄门医圣 ,某些场景下能带来极大的便利。第一组是 minimumIntegerDigits、 minimumFractionDigits 与 maximumFractionDigits,用于指定整数最少位数与小数的最少和最多位数,不够则用0去凑。简单说,自动补0!具体例子如下:
letnum=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
从此之后,补0与控制位数再也不愁~
另一组是 minimumSignificantDigits 与 maximumSignificantDigits,用于控制有效数字位数,只要设置了这一组属性,第一组属性全部忽略不算,具体如下:
constnum=1234.5;
num.toLocaleString('zh',{minimumSignificantDigits:6,useGrouping:false});//1234.50
num.toLocaleString('zh',{maximumSignificantDigits:4,useGrouping:false});//1235
注意,maximumFractionDigits 与 maximumSignificantDigits 均是四舍五入我爱涿州论坛,使用时需要注意。数字类型的 toLocaleString 介绍就告一段落薛宝雯,下面让我们看看日期类型的 toLocaleString 的 options 有什么好用的属性。Date.prototype.toLocaleString
与数字类型不同,日期类型的 locales 对输出的影响十分之大(其实数字类型影响也大,只是一般用不到),因而应该根据实际情况选择合适的语言环境。与数字类型一样,只介绍常用属性,详细的属性介绍请查阅 MDN② 文档。
hour12 表示是使用十二小时制还是二十四小时制,默认值视 locales 而定。例子如下:
constdate=newDate();
date.toLocaleString('zh',{hour12:true});//2018/4/4 下午6:57:36
date.toLocaleString('zh',{hour12:false});//2018/4/4 18:57:36
之后就是格式化年月日时分秒星期等选项了,MDN③ 文档说必须按照一定的分组设置属性,实际使用中发现每个属性单独使用并不报错,因而按属性的值分开介绍会比较好理解。
具体的属性一共有 9 个,分别是 weekday、era、year、month、day、hour、minute、second 与 timeZoneName。具体的意思,看单词估计就能秒懂,不作过多解释。然而需要留意的是他们的可选值。先讨论weekday 与 era,它们均可以取值为 narrow、short 或 long,简单说就是能有多短多短,缩写与正常表现,具体表现如下:
constdate=newDate();
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
跟着是 timeZoneName 属性,这个属性只有short 或 long 两个值,表现如下:
constdate=newDate();
date.toLocaleString('zh',{timeZoneName:'short'});//2018/4/5 GMT+8 下午7:18:26
date.toLocaleString('zh',{timeZoneName:'long'});//2018/4/5 中国标准时间 下午7:18:26
剩下的属性,均可以取值为 numeric 与 2-digit,简单说就是否仅用两位数字表示无敌黑拳,看码说话:
constdate=newDate();
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
(比较奇怪的是 hour、minute 与 second 三个属性傅君婥,无论设置为何值,表现都是一样的,希望有大佬告知原因,我换成 en 环境也是一样的。)
最后是 month 这个属性,语言对月份有不同的展现,除去 numeric 与 2-digit 外,它额外多三个属性,分别是 narrow、short 与 long。展示如下:
constdate=newDate();
date.toLocaleString('en',{month:'narrow'});//A
date.toLocaleString('en',{month:'short'});//Apr
date.toLocaleString('en',{month:'long'});//April小结
至此,关于 toLocaleString 的介绍就暂告一段落了。可以看到,在某些场景下需要格式化对象成字符串时,可以发挥极大的作用,不再需要自己苦兮兮地写函数做转换。尽管这个 API 稍微冷门一点,但还是很有意思的。
感谢各位看官大人看到这里,知易行难,希望本文对你有所帮助~谢谢!文章中的链接
① https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
② https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
③ https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString关于奇舞周刊
《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后,直接发送链接到后台即可给我们投稿。