Followup to My Intl Short Number Post

A few days ago I shared a blog post about using the Intl object in JavaScript to create short, more readable numbers. So for example, instead of 9123456, it would display 9.1M. This was done using the notation option in In…


This content originally appeared on Raymond Camden and was authored by Raymond Camden

A few days ago I shared a blog post about using the Intl object in JavaScript to create short, more readable numbers. So for example, instead of 9123456, it would display 9.1M. This was done using the notation option in Intl.NumberFormat. Yesterday I randomly ran into an interesting modification on this using yet another option, compactDisplay.

The compactDisplay option is only used when notation is set to compact. It supports two options, short which is default and what I demonstrated in the previous post, and long.

So given a number, i, you would use it like so:

new Intl.NumberFormat('en-US', { notation:'compact', compactDisplay:'long'}).format(i);

And the result is, well, longer. ;) What's nice though is that it's still a shortened, simpler version. You can see the result here:

See the Pen Intl Number Formatting (long) by Raymond Camden (@cfjedimaster) on CodePen.

Awesome. And if you want to dig deeper into Intl, I recommend the very cool Intl Explorer site. It's an interactive explorer for the Intl spec and covers everything. (If I had paid more attention to it, I would have seen compact sooner!)


This content originally appeared on Raymond Camden and was authored by Raymond Camden


Print Share Comment Cite Upload Translate Updates
APA

Raymond Camden | Sciencx (2023-01-10T18:00:00+00:00) Followup to My Intl Short Number Post. Retrieved from https://www.scien.cx/2023/01/10/followup-to-my-intl-short-number-post/

MLA
" » Followup to My Intl Short Number Post." Raymond Camden | Sciencx - Tuesday January 10, 2023, https://www.scien.cx/2023/01/10/followup-to-my-intl-short-number-post/
HARVARD
Raymond Camden | Sciencx Tuesday January 10, 2023 » Followup to My Intl Short Number Post., viewed ,<https://www.scien.cx/2023/01/10/followup-to-my-intl-short-number-post/>
VANCOUVER
Raymond Camden | Sciencx - » Followup to My Intl Short Number Post. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/01/10/followup-to-my-intl-short-number-post/
CHICAGO
" » Followup to My Intl Short Number Post." Raymond Camden | Sciencx - Accessed . https://www.scien.cx/2023/01/10/followup-to-my-intl-short-number-post/
IEEE
" » Followup to My Intl Short Number Post." Raymond Camden | Sciencx [Online]. Available: https://www.scien.cx/2023/01/10/followup-to-my-intl-short-number-post/. [Accessed: ]
rf:citation
» Followup to My Intl Short Number Post | Raymond Camden | Sciencx | https://www.scien.cx/2023/01/10/followup-to-my-intl-short-number-post/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.