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!)

Raymond Camden