JavaScript中的toLocaleString你知道方法吗?
前言
在看到一个需求(面试题)时,如果每隔三位使用一串数字,那就是我们所说的数字千分位格式。当我想实现它的时候,toLocaleString()
这个函数进入了我的视野,它可以很容易地将一串数字转换为千分位格式。但这个函数真的很奇怪,我去理解,但发现了这个函数的神奇用途,下面是一个简单的总结
简单介绍
toLocaleString()
方法是用于返回格式化对象后的字符串,该字符串格式因语言不同返回值也会不同(不同执行环境结果可能不同-比如浏览器和node会有所不同),可以通过决定返回的语言和具体表现。
- 语法:
object.toLocaleString(locale,options)
- 参数:
locale
:字符串用于指定当地环境中的语言类型,默认为美式英语(en-us
),中文使用zh
;【node默认情况下,环境中没有中文,所以即使指定为中文,仍然会用英语表示,这里有一些常见的语言选项:en
(英语),zh
(中文),fr
(法语),de
(德语),ja
(日语)。options
:对象,附加选项,用于指定字符串的显示格式。根据因对象类型而异(Number,Date,Array)
具体使用
数字处理(Number)
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人民币 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 ௧,௨௩௪,௫௬௭,௮௯௦
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天
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
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]