优化实战 第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()
方法把字符串数值转换成数值,然后再进行格式化
转载自:https://juejin.cn/post/7166190742170238984