[JavaScript知识库]数字加千分位分隔符，加货币符号，数字转百分数

想必大家在做前端开发的过程中或多或少都会需要显示数字或是金钱，或是百分数，或是小数位取有效数字。Number.parseFloat(x).toFixed(2)或许可以解决取有效数字的问题，但是其他的就没辙了。尤其是js的浮点数计算不精确导致在前端计算合适麻烦，还需要引用第三方库来解决，最后导致怕麻烦的童鞋有时候就直接叫后端直接传计算后的值^ _ ^ |||,其实官方已经提供了api去解决类似问题了，而且还是一起解决的，接下来抛转引玉大家一起来学习一下这个api，Intl ！！！
去看Intl详情请戳

Intl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比、数字格式化，和日期时间格式化。Collator，NumberFormat 和 DateTimeFormat 对象的构造函数是 Intl 对象的属性。本页文档内容包括了这些属性，以及国际化使用的构造器和其他语言的方法等常见的功能。

我自己封装了一个方法去处理以上这些问题，当然，只是初略封装，感兴趣的童鞋可以继续封装。话不多说，直接上代码！

/**
 * 
 * @param  value ：数字/数字字符串
 * @param  config ：
 * config = {
      locales: 'zh-CN',
      currency: 'CNY', 是否显示币种前缀，默认不显示 
      注：currency如果有值，需和locale对应
      fractionDigits: 2, 显示多少位小数，默认2位小数
      useGrouping: false, 千分位逗号分隔 true/false ，默认true
      percent: 2 显示百分号和最高几位小数
    }
 * @returns string 格式化后的数字
 */
function parseNumber (value, config) {
  if (isNaN(value)) return '???'
  if ([null, undefined, '',].includes(value)) return '-' // 没有值时返回‘-’
  if (value == 0) return '0' // 对于0，0.0000，-0.000...这些直接返回0不保留小数位
  let locales = undefined
  let options = {}
  // 1. 如果有配置，使用配置
  if (config) {
    if (Reflect.has(config, 'locales')) {
      locales = config.locales
    }
    // 1.2 千分位逗号分隔
    if (Reflect.has(config, 'useGrouping')) {
      options.useGrouping = config.useGrouping
    }
    // 1.3 加币种前缀
    if (Reflect.has(config, 'currency')) {
      options.style = 'currency'
      options.currency = config.currency
    }
    // 1.4 是否有小数位，显示多少位小数
    if (Reflect.has(config, 'fractionDigits')) {
      options.minimumFractionDigits = config.fractionDigits
      options.maximumFractionDigits = config.fractionDigits
    }
    // 1.5 设置为百分数格式
    if (Reflect.has(config, 'percent')) {
      options.style = 'percent'
      options.maximumFractionDigits = config.percent
    }
  } else {
    // 2. 没有配置使用默认配置,对金钱默认处理为"1,234,567.89"；
    locales = 'zh-CN'
    options.minimumFractionDigits = 2
    options.maximumFractionDigits = 2
  }
  const nf = new Intl.NumberFormat(locales, options)
  return nf.format(value)
}

// 以下是测试数据，可删除
const test = [null, undefined, '', {}, 'aa', '111aaa', [],
  0, 0.0, 0.0000, -0.0,
  '0', '0.0', '0.000', '-0.0',
]
test.forEach(item => console.log(parseMoney(item)))
// 以上是测试数据，可删除

简单说明一下：

1. 传值不是数字或数字字符串时，返回‘???’
2. 对于==0 的数字，咱没必要再显示小数位或是百分号了，直接返回 0
3. 传参value不仅仅只是一个数字，也可以是0.1+0.2这种表达式，把前端计算交给Intl去处理，在js中0.1+0.2 =0.30000000000000004的情况，在Intl中不会出现，放心使用！
4. 具体的使用方法在代码中都有注释，我就不过多废话了！
   有问题的小伙伴欢迎留言，评论，点赞关注，谢啦！！！

谁能仅靠十年寒窗苦读，去经营百岁人生?
活到老，学到老！
知识改变人生！
共勉！