优化实战 第54期 - 脱离正则的数字格式化

数字格式化在日常开发中是特别普遍的需求。即在特定的业务场景对服务端响应数据中的数字进行一定的格式化处理，以增强其阅读性

千位分隔符

• 基础示例

  const { format } = new Intl.NumberFormat()
  

  format(1000)        format('1000')       // '1,000'
  format(1000.3824)   format('1000.3824')  // '1,000.382'
  format(1000.3856)   format('1000.3856')  // '1,000.386'
  

  默认情况下，支持对 数值 和 字符串数值 进行 千位分隔 且 四舍五入 保留 3 位小数

• 进阶示例

  const { format } = new Intl.NumberFormat('zh-CN', {
    minimumFractionDigits: 2, maximumFractionDigits: 2
  })
  

  format(1000.3824)  format('1000.3824')  // '1,000.38'
  format(1000.3856)  format('1000.3856')  // '1,000.39'
  

  以保留 2 位小数为例，同时指定小数位数的最小和最大数目，实现保留固定小数位数

数量统计换算

• 代码示例

  const { format } = new Intl.NumberFormat('zh-CN', { notation: 'compact' })
  

  format(1234)            format('1234')          // '1234'
  format(123456)          format('123456')        // '12万'
  format(123456789)       format('123456789')     // '1.2亿'
  format(1223562434454)   format('1223562434454') // '1.2万亿'
  

  支持对 数值 和 字符串数值 进行数量统计单位的换算，依次为 万 -> 亿 -> 万亿

• 注意事项

  需要设置指定语言中文 zh-CN 为参数项，以此来保证换算的正确性

百分比显示

• 基础示例

  const { format } = new Intl.NumberFormat('zh-CN', { style: 'percent' })
  

  format(0.02)     format('0.02')     // '2%'
  format(1.2)      format('1.2')      // '120%'
  format(0.0235)   format('0.0235')   // '2%'
  format(0.02358)  format('0.02358')  // '2%'
  

  支持对 数值 和 字符串数值 进行百分比换算，不保留小数位数

• 进阶示例

  const { format } = new Intl.NumberFormat('zh-CN', {
    style: 'percent',
    maximumFractionDigits: 2
  })
  

  format(0.02)     format('0.02')     // '2%'
  format(1.2)      format('1.2')      // '120%'
  format(0.0235)   format('0.0235')   // '2.35%'
  format(0.02358)  format('0.02358')  // '2.36%'
  

  以保留 2 位小数为例，指定小数位数的最大数目，实现保留固定小数位数

人民币表示

• 基础示例

  const { format } = new Intl.NumberFormat('zh-CN', { 
    style: 'currency', currency: 'CNY' 
  })
  

  format(2358921.35869)   format('2358921.35869')  // '¥2,358,921.36'
  

  支持对 数值 和 字符串数值 进行货币表示，默认添加 千位分隔 且保留 2 位小数

• 进阶示例

  const { format } = new Intl.NumberFormat('zh-CN', { 
    style: 'currency', currency: 'CNY', 
    minimumFractionDigits: 4, maximumFractionDigits: 4
  })
  

  format(2358921.35869)  format('2358921.35869')  // '¥2,358,921.3587'
  

  以保留 4 位小数为例，同时指定小数位数的最小和最大数目，实现保留固定小数位数

  通过创建一个 NumberFormat 实例对象并进行实例缓存，然后使用其 format 属性提供的相关格式化功能

性能分析

当格式化非常多的数字时，最好创建一个 Intl.NumberFormat 对象，并且使用其 format 属性提供的方法

除此之外，推荐使用 toLocaleString() 方法，其参数和 Intl.NumberFormat 是一致的

注意事项

使用 toLocaleString() 方法格式化时，如果数据源是字符串数值时会原样输出，此时需要先使用 parseFloat() 方法把字符串数值转换成数值，然后再进行格式化