How to format numbers with vanilla Javascript

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?

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)[https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier]. 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)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl].