数字格式化

前端开发时经常要对数字格式化处理，下面来总结一下前端常用的使用场景。

1.保留两位小数

const num1 = 3
const num2 = 3.6666
const num3 = NaN
console.log(num1.toFixed(2)) 
// 输出 3.00
console.log(num2.toFixed(0)) 
// 输出  4
console.log(num2.toFixed(2))
 // 输出  3.67
console.log(num3.toFixed(2)) 
// 输出 NaN

需要注意的是toFixed采用了四舍五入来处理数值的

2. 数字百分比处理

var number = 6666.6666;
console.log(number.toLocaleString('zh', { style: 'percent', minimumFractionDigits: 2, useGrouping: false}))
// 输出 666666.66%

3. 数字千分符展示

var number = 6666.6666;
console.log(number.toLocaleString());
// 输出 6,666.667  默认保留三位小数
// 需要注意的是toLocaleString采用了四舍五入来处理数值的

4. 带上货币符号

var number = 6666.6666;
console.log(number.toLocaleString('zh', { style: 'currency', currency: 'CNY' }) )
// 输出 ¥6,666.67

看到这儿想必各位看官对toLocaleString产生了一定兴趣了吧，简要介绍下toLocaleString的使用语法

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

locales 字符串参数，指定语言环境，默认为当前环境的语言，可以不传，zh(中国) ，zh-Hans-CN（中文，使用中国大陆）

options 对象参数,配置如下

{
  style:  'decimal', // "decimal" 纯数字显示, "percent" 百分比显示与 ,"currency" 货币显示
  currency: 'CNY', // 货币符号 "CNY"人民币， "JPY" 日元 "USN" 美元
  useGrouping: false, // Boolean 是否显示分隔符
  // minimumIntegerDigits: 3, 指定整数最少位数，不够则用0去凑
  // minimumFractionDigits: 2,小数的最少位数，不够则用0去凑
  // maximumFractionDigits:  2,小数的最多位数，不够则用0去凑
}