锐单电子商城 , 一站式电子元器件采购平台!
  • 电话:400-990-0325

JavaScript中的toLocaleString()方法你知道吗?

时间:2023-01-31 23:00:00 acre5100el精密电阻acre520elh二极管

JavaScript中的toLocaleString你知道方法吗?

前言

在看到一个需求(面试题)时,如果每隔三位使用一串数字,那就是我们所说的数字千分位格式。当我想实现它的时候,toLocaleString()这个函数进入了我的视野,它可以很容易地将一串数字转换为千分位格式。但这个函数真的很奇怪,我去理解,但发现了这个函数的神奇用途,下面是一个简单的总结

简单介绍

toLocaleString()方法是用于返回格式化对象后的字符串,该字符串格式因语言不同返回值也会不同(不同执行环境结果可能不同-比如浏览器和node会有所不同),可以通过决定返回的语言和具体表现。

  • 语法:object.toLocaleString(locale,options)
  • 参数:locale:字符串用于指定当地环境中的语言类型,默认为美式英语(en-us),中文使用zh;【node默认情况下,环境中没有中文,所以即使指定为中文,仍然会用英语表示,这里有一些常见的语言选项:en(英语),zh(中文),fr(法语),de(德语),ja(日语)。 options:对象,附加选项,用于指定字符串的显示格式。根据因对象类型而异(Number,Date,Array)

具体使用

数字处理(Number)
  1. style属性-表示格式化时使用的样式,decimal:纯数字格式(默认),currency:货币格式,percent:百分比格式,unit:为数字加单位
    const num = 123456789; console.log(千分位格式,num.toLocaleString()); ///千分位格式 123,456,789 const num1 = 0.13; console.log(数字转百分比,num1.toLocaleString('zh',{ 
              style:'percent'}));  ///数字转百分比 13% const num2 = 1000000000; console.log(1,num2.toLocaleString('zh',{ 
              style:'currency',currency:'cny'}));  /// ¥1,000,000,000.00 console.log(数字转货币表示法2,num2.toLocaleString('zh',{ 
              style:'currency',currency:'cny',currencyDisplay:'code'
             
              }
              )
              )
              ; 
              //数字转货币表示法2 CNY 1,000,000,000.00 console
              .
              log
              (
              '数字转货币表示法3'
              ,num2
              .
              toLocaleString
              (
              'zh'
              ,
              { 
               style
              :
              'currency'
              ,currency
              :
              'cny'
              ,currencyDisplay
              :
              'name'
              }
              )
              )
              ; 
              //数字转货币表示法3 1,000,000,000.00人民币 
             
  2. numberingSystem:编号系统,可能的值包括很多,这里就简单列举三个:hanidecmlymtamldec
    const num = 1234567890;
    console.log('编号系统-hanidec',num.toLocaleString('zh',{ 
              numberingSystem:'hanidec'}));
    //编号系统-hanidec 一,二三四,五六七,八九〇
    console.log('编号系统-mlym',num.toLocaleString('zh',{ 
              numberingSystem:'mlym'}));
    //编号系统-mlym ൧,൨൩൪,൫൬൭,൮൯൦
    console.log('编号系统-tamldec',num.toLocaleString('zh',{ 
              numberingSystem:'tamldec'}));
    //编号系统-tamldec ௧,௨௩௪,௫௬௭,௮௯௦
    
  3. unit:位数字加单位,当styleunit时必须设置,这里也只举例三个
    const num = 123;
    console.log('单位-acre',num.toLocaleString('zh',{ 
              style:'unit',unit:'acre'}));
    //单位-acre 123英亩
    console.log('单位-byte',num.toLocaleString('zh',{ 
              style:'unit',unit:'byte'}));
    //单位-byte 123 B
    console.log('单位-day',num.toLocaleString('zh',{ 
              style:'unit',unit:'day'}));
    //单位-day 123天
    
  4. minimumIntegerDigits:指定整数最少位数,minimumFractionDigitsmaximumFractionDigits:小数最少与最多位数,不够用0补全
    const num = 123.456;
    console.log(num.toLocaleString('zh',{ 
              minimumIntegerDigits:5}));
    //00,123.456 如果不想有分隔符,可以指定useGrouping为false
    console.log(num.toLocaleString('zh',{ 
              minimumFractionDigits:4,useGrouping:false}));
    //123.4560
    console.log(num.toLocaleString('zh',{ 
              maximumFractionDigits:2,useGrouping:false}));
    //123.46
    
  5. minimumSignificantDigitsmaximumSignificantDigits:用于控制有效数字的位数(注意:这两个属性均为四舍五入)
    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
    
日期处理(Date)
  • 基本格式

     dateObj.tolocaleString(locale, {
        hour12: true,
        year: '',
        month: '',
        day: '',
        hour: '',
        minute: '',
        second: '',
        weekday: '',
        timeZoneName:'',
        era: '',
        timeZone: '',
        });
    
  • 选项说明:

    • hour12:是否为12小时制,如果为false,则是24小时制显示
    • timeZone:时区设置,一般为UTC-格林尼治时间时区
    • timeZoneName:时区名称显示格式
    • ear:历法显示格式
    • weekday: 星期显示格式
    • year: 年份显示格式
    • month: 月份显示格式
    • day: 日期显示格式
    • hour:小时显示格式
    • minute: 分钟显示格式
    • second: 秒显示格式
  • 其中格式有几个可选值:

    • numeric: 正常数值显示
    • 2-gigit: 两位数字显示
    • long:完整显示
    • short:缩写显示
    • narrow:窄缩写显示
    const date = new Date();
    console.log('时间字符串十二小时制',date.toLocaleString('zh',{ 
              hour12:true})); 
    //时间字符串十二小时制 2022/2/15 下午4:34:15
    console.log('时间字符串二十四小时制',date.toLocaleString('zh',{ 
              hour12:false}));
    //时间字符串二十四小时制 2022/2/15 16:34:15
    console.log('时间字符串星期几窄缩写',date.toLocaleString('zh',{ 
              weekday:'narrow'})); 
    //时间字符串星期几窄缩写 二
    console.log('时间字符串星期几缩写',date.toLocaleString('zh',{ 
              weekday:'short'}));
    //时间字符串星期几缩写 周二
    console.log('时间字符串星期几',date.toLocaleString('zh',{ 
              weekday:'long'}));
    //时间字符串星期几缩写 星期二
    console.log('时间字符串中带时区',date.toLocaleString('zh',{ 
              timeZoneName:'long'}));
    //时间字符串中带时区 2022/2/15 中国标准时间 16:39:06
    console.log('时间字符串中带时区缩写',date.toLocaleString('zh',{ 
              timeZoneName:'short'}));
    //时间字符串中带时区缩写 2022/2/15 GMT+8 16:39:18
    console.log('时间字符串非两位显示',date.toLocaleString('zh', { 
               year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', })); //时间字符串非两位显示 2022/2/15 16:41:02
    console.log('时间字符串两位显示',date.toLocaleString('zh', { 
               year: '2-digit', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }));
    //时间字符串两位显示 22/02/15 16:41:02
    

数组处理

如果数组元素由多种不同类型的值组成,当我们需要它们的字符串格式拼接在一起时,可以使用数组的toLocaleString()方法。具体过程是:对数组中每个元素调用它们自身的toLocaleString()方法,得到转换后的字符串,并使用逗号将它们分隔并返回该字符串

const arr = [100,new Date(),{ 
        a:1,b:2}];
console.log(arr.toLocaleString('zh',{ 
         style:'currency', currency:'CNY', year: 'numeric',  month: 'numeric',  day: 'numeric',  hour: 'numeric',  minute: 'numeric',  second: 'numeric', weekday:'short'}));
//¥100.00,2022/2/15周二 16:46:14,[object Object]

乾坤未定,你我皆是黑马!

锐单商城拥有海量元器件数据手册IC替代型号,打造电子元器件IC百科大全!

相关文章