ToFixed () method pit

1. Rounding is not really rounding

Test results on Chrome:

1.35. ToFixed (1) // 1.4 Correct

1.335.toFixed(2) // 1.33 error

1.3335. ToFixed (3) // 1.333 error

1.33335.toFixed(4) // 1.3334 correct

ToFixed (5) // 1.33333 error

1.3333335.toFixed(6) // 1.333333 error

Test results on IE:

1.35. ToFixed (1) // 1.4 Correct

1.335.toFixed(2) // 1.34 Correct

1.3335.toFixed(3) // 1.334 correct

1.33335.toFixed(4) // 1.3334 correct

1.333335.toFixed(5) // 1.33334 correct

1.3333335.toFixed(6) // 1.333334 correct

As you can see, rounding is not really rounding in Chrome

2. Format data using the intl.numberFormat () constructor

Intl.NumberFormat is a built-in browser API for formatting numbers. It is a constructor attribute in the Intl namespace, which is extremely powerful 👍 see MDN

1. Keep at least & at most decimals

new Intl.NumberFormat(undefined, { minimumFractionDigits: 3.maximumFractionDigits: 3 }).format(123456.78967)
/ / "123456790"
Copy the code

If you have strict requirements here, it is recommended to specify both minimumFractionDigits and maximumFractionDigits, otherwise it will be discarded, for example maximumFractionDigits only

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

// Change the original data to 123456.78867
new Intl.NumberFormat(undefined, {maximumFractionDigits: 3 }).format(123456.78867)
// "123,456.789" is now in three digits
Copy the code

The most common thing we’ll do is keep two decimal places

new Intl.NumberFormat(undefined, { minimumFractionDigits: 2.maximumFractionDigits: 2 }).format(123456.78967)
// "123,456.79"
Copy the code

Let’s verify the above toFixed is there any problem

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"
Copy the code

Perfect ؏؏☝ᖗ乛◡乛ᖘ☝؏؏

2. Aggregate statistics (in easy-to-read form) – Notation is not supported in IE11

Compatible processing schemes are here: 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", "120,000 ", "1.2 billion ", "1.2 trillion ", "12,236 trillion "]
nums.map(num= > {
    return new Intl.NumberFormat('ja-JP', { notation: "compact" }).format(num)
})
// ["1234", "120,000 ", "1.2 billion ", "1.2 Trillion ", "12,236 Trillion "]

Copy the code

3. Percentage display

[0.01.1.2.0.0123].map(num= > {
    return new Intl.NumberFormat(undefined, { style: 'percent'.maximumFractionDigits: 2 }).format(num) 
})
/ / / "1%", "120%", "1.23%"]
Copy the code

4. Don’t use thousandths

  • useGrouping: Whether to use group delimiters. Possible values are true and false, such as thousands or thousand/ten thousand/billion separators, and the default is true
new Intl.NumberFormat(undefined, { minimumFractionDigits: 2.maximumFractionDigits: 2.useGrouping: false }).format(123456.78967)
/ / "123456.79"
Copy the code

5. How much is it

new Intl.NumberFormat(undefined, { minimumFractionDigits: 2.maximumFractionDigits: 2.style: 'currency'.currency: 'CNY' }).format(123456.78967)
/ / "selections 123456.79"
Copy the code

End 🔚

I am the south flying goose, you can call me flying goose, I am a striver, in the realization of wealth and freedom on the road……

I like to share, and I like to think; I have my own life plans and dreams; But sometimes it’s confusing…

I am engaged in the IT industry and have studied many and miscellaneous technical fields: PHP, MySQL, Linux, JavaScript, Node.js, NoSQL, PhotoShop, audio and video processing, architecture cluster, network communication, life skills, three views of life, being a person, doing things and reading…

I always write down my thoughts and things to do in the near future on my public account and nuggets. I hope you pay attention to me. I am a striver and my name is Nan Feiyan