new Intl.NumberFormat 解决toFixed不四舍五入的问题

toFixed()方法的坑

1. 四舍五入并非真正的四舍五入

chrome 上的测试结果：

1.35.toFixed(1) // 1.4 正确

1.335.toFixed(2) // 1.33 错误

1.3335.toFixed(3) // 1.333 错误

1.33335.toFixed(4) // 1.3334 正确

1.333335.toFixed(5) // 1.33333 错误

1.3333335.toFixed(6) // 1.333333 错误

IE 上的测试结果：

1.35.toFixed(1) // 1.4 正确

1.335.toFixed(2) // 1.34 正确

1.3335.toFixed(3) // 1.334 正确

1.33335.toFixed(4) // 1.3334 正确

1.333335.toFixed(5) // 1.33334 正确

1.3333335.toFixed(6) // 1.333334 正确

综上能够看到, 四舍五入在 chrome 中并非真正的四舍五入

2. 使用 Intl.NumberFormat()构造函数格式化数据

Intl.NumberFormat是浏览器内置的一个作数字作格式化处理的 API, 它是 Intl 命名空间下的一个构造器属性, 功能异常强大 👍 参考 MDN

1.最少 & 最多保留几位小数

new Intl.NumberFormat(undefined, { minimumFractionDigits: 3, maximumFractionDigits: 3 }).format(123456.78967)
// "123,456.790"
复制代码

若是你这里有严格要求,建议把minimumFractionDigits和maximumFractionDigits都指定上, 要不可能会被舍弃掉, 好比只写maximumFractionDigits

new Intl.NumberFormat(undefined, {maximumFractionDigits: 3 }).format(123456.78967)
// "123,456.79"

// 若是把原始数据变为123456.78867
new Intl.NumberFormat(undefined, {maximumFractionDigits: 3 }).format(123456.78867)
// "123,456.789" 此时又变成了三位了
复制代码

咱们最经常使用的应该是保留两位小数

new Intl.NumberFormat(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(123456.78967)
// "123,456.79"
复制代码

咱们来验证一下上面使用toFixed的还有问题吗

new Intl.NumberFormat(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(1.335)
// "1.34"

new Intl.NumberFormat(undefined, { minimumFractionDigits: 3, maximumFractionDigits: 3 }).format(1.3335)
// "1.334"
复制代码

完美؏؏☝ᖗ乛◡乛ᖘ☝؏؏

2.总量统计（以易于阅读的形式）--- notation在IE11不被支持,

兼容的处理方案在这里: formatjs.io/docs/polyfi…

const nums = [1234, 123456.78967, 1223562434, 1223562434454, 12235624344544165]

nums.map(num => {
    return new Intl.NumberFormat('en-US', { notation: "compact" }).format(num)
})
// ["1.2K", "123K", "1.2B", "1.2T", "12,236T"]
nums.map(num => {
    return new Intl.NumberFormat('zh-CN', { notation: "compact" }).format(num)
})
// ["1234", "12万", "12亿", "1.2万亿", "12,236万亿"]
nums.map(num => {
    return new Intl.NumberFormat('ja-JP', { notation: "compact" }).format(num)
})
// ["1234", "12万", "12億", "1.2兆", "12,236兆"]

复制代码

3.百分比显示

[0.01, 1.2, 0.0123].map(num => {
    return new Intl.NumberFormat(undefined, { style: 'percent', maximumFractionDigits: 2 }).format(num) 
})
// ["1%", "120%", "1.23%"]
复制代码

4.不使用千分位

• useGrouping：是否使用分组分隔符。如千位分隔符或千/万/亿分隔符，可能的值是 true 和 false ，默认值是 true

new Intl.NumberFormat(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2, useGrouping: false }).format(123456.78967)
// "123456.79"
复制代码

5.加上¥符号,表示多少钱

new Intl.NumberFormat(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2, style: 'currency', currency: 'CNY' }).format(123456.78967)
// "¥123,456.79"
复制代码

结束🔚

我是南飞雁，你能够叫我飞雁，我是一名奋斗者，在实现财富自由的路上……

我喜欢分享，也喜欢思考；我有本身的人生规划和梦想；但有时也很迷茫……

我从事IT行业，研究的技术领域相对比较多而杂： PHP、MySQL、Linux、JavaScript、Node.js、NoSQL、PhotoShop、音视频处理、架构集群、网络通讯、生活技巧、人生三观、作人作事读书……

我老是会在本身的公众号和掘金上写下本身的所思所想和近期要作的事，但愿你关注我，我是一个奋斗者，我叫南飞雁