有点厉害但冷门的API------toLocalString

1、在数字类型上的应用

1、整数部分可以直接转化为每三位加一个逗号

const num = 1234555;
num.toLocalString(); // 1,234,555

2、带有options参数情况–style
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'});     //  报错                                        

需要特别注意的是:style为currency时,必须同时指定currency(currencyDisplay有无皆可)才行。
以下举例:

const num = 2333333
num.toLocaleString('zh',{style:'currency' , currency:'CNY' }); //¥2,333,333.00
number.toLocaleString('ja-JP', { style: 'currency', currency: 'EUR' }) ; // 123,457€
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人民币

3、自动部位属性
它们是 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

2、在Date类型上的应用

1、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

2、formatMatcher
有俩个属性值:basic 和 basic fit(默认)
有九个选项:分别是 weekday、era、year、month、day、hour、minute、second 与 timeZoneName 我们一个一个的来撸

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

timeZoneName

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、

剩下的属性,均可以取值为 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

最后值得一说的是 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

3 、在Array类型的应用

这个就是结合前俩个,数组的元素会使用各自的方法。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值