JS - toLocaleString() 方法

一、浏览器支持

所有主要浏览器都支持toLocaleString() 方法

二、定义和用法

1. 可根据本地时间把 Date 对象转换为本地格字符串。
2. 可把一个 Number 对象转换为本地格字符串。
3. 可把一个 Array 对象转换为本地字符串。

注意，如果是 String 对象，那么 toLocaleString 的一切方法都对其不起作用，输出结果都是它本身。

let d = new Date()
console.log(d.toLocaleString()) // 2020/12/31 上午11:36:33

let num=12345678;
console.log(num.toLocaleString()); // 12,345,678

let arr = ['a', 'b', 'c'];
console.log(arr.toLocaleString()) // 'a', 'b', 'c'

let str = '124';
console.log(str.toLocaleString()) // '123'
console.log(str.toLocaleString('zh-u-nu-hanidec')) // '123'

三、参数

object.toLocaleString([locales [, options]])

locales 参数用于指定格式化对象时使用的语言环境，默认为当前环境的语言，可以不传。

const date = new Date();

date.toLocaleString('zh');  // "2020/12/31 上午11:51:01"
date.toLocaleString('en'); // "12/31/2020, 11:51:01 AM"
date.toLocaleString('ja'); // "2020/12/31 11:51:01"

options 参数为输出样式的配置项，根据 object 类型不同会有不同选项，下文会仔细解释这个参数。但需要注意的是如果不传 locales 参数，那么 options 参数是不会生效的，其实上面的语法其实已经显现出这点。

Number.prototype.toLocaleString

options
可选。包含一些或所有的下面属性的类:

style 表示格式化时使用的样式,默认是 decimal

• decimal 用于纯数字格式；
• percent 用于百分比格式;
• currency 用于货币格式；
• unit 用于单位格式

currency 在货币格式化中使用的货币符号。没有默认值，如果 style 是 “currency”，必须提 currency 属性。

• USD 美元
• EUR 欧元
• CNY 人民币

currencyDisplay 货币符号的展示样式，默认值是 symbol。

• symbol使用本地化的货币符号例如 ¥（默认）
• code使用国际标准组织货币代码
• name使用本地化的货币名称

useGrouping 是否使用分组分隔符，如千位分隔符或千/万/亿分隔符。默认值是 true。

const num = 123.56;
num.toLocaleString('zh', { style: 'decimal' }); // "123.56"
num.toLocaleString('zh', { style: 'percent' }); // "12,356%"
num.toLocaleString('zh', { style: 'currency', currency: 'CNY' });  //"¥123.56"
num.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'code' }); //"CNY 123.56"
num.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'name' }); //"123.56人民币"     

下面带来两组属性

第一组用于指定整数最少位数与小数的最少和最多位数，不够则用0去凑。简单说，自动补0！

minimumIntegerDigits
使用的整数数字的最小数目。可能的值是从1到21，默认值是1。
minimumFractionDigits
使用的小数位数的最小数目，可能的值是从 0 到 20。
maximumFractionDigits
使用的小数位数的最大数目。可能的值是从 0 到 20。

const num = 123.56;
num.toLocaleString('zh', { minimumIntegerDigits: 5 }); // "00,123.56"
num.toLocaleString('zh', { minimumIntegerDigits: 3 }); // "123.56"
num.toLocaleString('zh', { minimumFractionDigits: 1, maximumFractionDigits: 3 }); // "123.56"
num.toLocaleString('zh', { minimumFractionDigits: 1, maximumFractionDigits: 1 }); // "123.6"

第二组用于控制有效数字位数，如果定义了第二组中的任意一个属性,则忽略第一组的设置。

minimumSignificantDigits
使用的有效数字的最小数目。可能的值是从1到21；默认值是1。
maximumSignificantDigits
使用的有效数字的最大数量。可能的值是从1到21；默认是 21。

const num = 123.56;
num.toLocaleString('zh', { minimumSignificantDigits: 1, maximumSignificantDigits: 3 }); // "124"
num.toLocaleString('zh', { minimumSignificantDigits: 1, maximumSignificantDigits: 4 }); // "123.6"
num.toLocaleString('zh', { minimumSignificantDigits: 1, maximumSignificantDigits: 2 }); // "120"

注意，maximumFractionDigits 与 maximumSignificantDigits 均是四舍五入，使用时需要注意

Date.prototype.toLocaleString

只介绍常用属性
hour12
表示是使用十二小时制还是二十四小时制，默认值视 locales 而定。

具体的属性一共有 9 个，分别是 weekday、era、year、month、day、hour、minute、second 与 timeZoneName。
weekday 与 era，可以取值 narrow、short 或 long
timeZoneName 只可以取 short 或 long 两个值。
剩下的属性，均可以取值为 numeric 与 2-digit。

month 这个属性，语言对月份有不同的展现，除去 numeric 与 2-digit 外，它额外多三个属性，分别是 narrow、short 与 long。

const d = new Date();
d.toLocaleString('zh', { hour12: true });    // "2020/12/31 下午2:10:09"
d.toLocaleString('zh', { hour12: false });    // "2020/12/31 14:10:09"
d.toLocaleString("zh", {month: "short"})   // "12月"
d.toLocaleString("zh", {month: "long"})   // "十二月"
d.toLocaleString("zh", {month: "narrow"})  // "12"
d.toLocaleString("zh", {month: "numeric"})   // "12月"
d.toLocaleString("zh", {month: "2-digit"})   // "12月"

Array.prototype.toLocaleString()

数组中的元素将会使用各自的 toLocaleString 方法：

const prices = ['￥7', 500, 8123, 12];
prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
// "￥7,￥500,￥8,123,￥12"

const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
const localeString = array1.toLocaleString('en', { timeZone: 'UTC' });
//  "1,a,12/21/1997, 2:12:00 PM",

四、快捷应用

1.把阿拉伯数字转成中文数字

var num = 1
num.toLocaleString('zh-u-nu-hanidec') // "一"

2.转千分位

var num = 12345678.123
num.toLocaleString() // "12,345,678.123"

3.转百分比

var num = 0.45
num.toLocaleString('zh',{style:'percent'}) // "45%"

4.转货币符号

var num = 1234.2345
num.toLocaleString('zh',{style:'currency' , currency:'CNY' }) // "¥1,234.23"

5.转换时间显示

var date = new Date()
date.toLocaleString() // "2020/9/28 下午5:14:53"

参考链接
MDN