How to easily format numbers with vanilla Javascript
Published: 2023-02-15 08:16:00

# 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`:

```javascript
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:

```javascript
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:

```javascript
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.

```javascript
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:

```javascript
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-':

```javascript
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`):

```javascript
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).

### ⚡️ Action Points
- [see my blog a about Javascript and React](https://www.nikolasbarwicki.com/)
- give a like or write a comment