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

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 ¥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：编号系统，可能的值包括很多，这里就简单列举三个：hanidec，mlym，tamldec

   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：位数字加单位，当style为unit时必须设置，这里也只举例三个

   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：指定整数最少位数，minimumFractionDigits和maximumFractionDigits：小数最少与最多位数，不够用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. minimumSignificantDigits和maximumSignificantDigits：用于控制有效数字的位数(注意:这两个属性均为四舍五入)

   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]

乾坤未定，你我皆是黑马！