Formatting big numbers using Javascript build in methods
Displaying big numbers in complex user interface can be a pretty tough task. Taking into consideration diffetent viewports
and numbers from thousand (eg. followers) up to billion (eg. views) you could say that there should be more convinient way
of solving this problem.
At first you may think that you have to write custom function with lots of conditionals. If you don't want to do that you
can simply use a npm package that will do this for you.
But there's easier method - Javascript will do this for you with the help of Intl
object. In this short article we will
focus only on Intl.NumberFormat
object with enables number formatting
Basic usage
Let's see the most basic example of using NumberFormat
:
const number = 1_222_333_444.55;
const formattedNumber = new Intl.NumberFormat().format(number);
console.log(formattedNumber); // 1,222,333,444.55
Here we got formatted number in the default locale ('en') and with default options. To specify different locale you can
pass it as an argument to NumberFormat()
method:
console.log(Intl.NumberFormat('en').format(number)) // 1,222,333,444.55
console.log(Intl.NumberFormat('pl-PL').format(number)) // 1 222 333 444,55
console.log(Intl.NumberFormat('de-DE').format(number)) // 1.222.333.444,55
See the difference between those and dots and commas usage?
Formatting social media numbers
Now we will explore more useful methods such as formatting social media numbers - views, likes, number of followers.
We already know that the first argument that NumberFormat
accepts is locale string. There's also second argument which
is options
object. For the next few examples we will use notation
parameter:
const formatter = Intl.NumberFormat('en', { notation: 'compact' })
console.log(formatter.format(1_000)) // 1K
console.log(formatter.format(1_000_000)) // 1M
console.log(formatter.format(1_000_000_000)) // 1B
console.log(formatter.format(34_163_921)) // 34M
console.log(formatter.format(150)) // 150
See how easy it is to format those without writing many lines of code?
Formatting currency
NumberFormat
allows also currency formatting. You can define in the options
object the formatting style to use. By default
it is set to decimal
. For currency formatting we have to change this value to currency
. It is neccesary to provide ISO 4217
currency code such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB.
const formatter = Intl.NumberFormat('en', { style: 'currency', currency: "USD" })
console.log(formatter.format(1_000)) // $1,000.00
console.log(formatter.format(1_000_000)) // $1,000,000.00
console.log(formatter.format(1_000_000_000)) // $1,000,000,000.00
console.log(formatter.format(34_163_921)) // $34,163,921.00
console.log(formatter.format(150)) // $150.00
You can customize the output even more by defining currencyDisplay
property. If you set the value to code
it will use the
ISO currency code, for name
- localized currency name:
const formatter = Intl.NumberFormat('en', { style: 'currency', currency: "USD", currencyDisplay: "code"})
console.log(formatter.format(34_163_921)) // USD 34,163,921.00
const formatter = Intl.NumberFormat('en', { style: 'currency', currency: "USD", currencyDisplay: "name"})
console.log(formatter.format(34_163_921)) // 34,163,921.00 US dollars
Formatting units
The last (and probably the most unexpected) functionality of the NumberFormat
is unit formatting. At first you have to set
style
to unit
and then define unit picking one from this list.
You can even create a compound unit by concatenating pair of simple units with "-per-':
const formatter = Intl.NumberFormat('en', { style: 'unit', unit: "kilometer-per-hour"})
console.log(formatter.format(34_163_921)) // 34,163,921 km/h
console.log(formatter.format(1)) // 1 km/h
console.log(formatter.format(0)) // 0 km/h
Similarly to the previous examples you can define formatting style by changing the unitDisplay
value (the default is short
):
const formatter = Intl.NumberFormat('en', { style: 'unit', unit: "kilometer-per-hour", unitDisplay: "long"})
console.log(formatter.format(34_163_921)) // 34,163,921 kilometers per hour
console.log(formatter.format(1)) // 1 kilometer per hour
console.log(formatter.format(0)) // 0 kilometers per hour
Summary
That's all for today. If you want to dive deeper into Intl
methods and options specific for Intl.NumberFormat
see this page.
⚡️ Action Points
- see my blog a about Javascript and React
- give a like or write a comment
Top comments (0)