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、音視頻處理、架構集羣、網絡通訊、生活技巧、人生三觀、作人作事讀書……

我老是會在本身的公衆號和掘金上寫下本身的所思所想和近期要作的事，但願你關注我，我是一個奮鬥者，我叫南飛雁