A Svelte component to format numbers

Photo by Nick Hiller on Unsplash

Let's develop a Svelte component that formats numbers in a human readable way.

Instead of 63476432, the component displays 64M. Here are a few more examples:

It supports different locales as well. Converting 63476432 looks as follows

How it's done

We leverage the Number.prototype.toLocaleString() method (docs). Thanks to that, the Svelte component becomes very basic:

<script> export let number; export let locale = "en"; $: formattedNumber = number.toLocaleString(locale, { notation: "compact", compactDisplay: "short", }); </script> <style> span { font-variant-numeric: tabular-nums; } </style> <span>{formattedNumber}</span> 

It is important to make sure number is of type Number. If you pass a string, the toLocaleString method will not work as intended.

Typescript

I highly recommend you enable Typescript for your Svelte project (instructions) and refactor the FormattedNumber component as follows:

<script lang="ts"> export let number: number; export let locale: string = "en"; $: formattedNumber = number.toLocaleString(locale, { notation: "compact", compactDisplay: "short", }); </script> <style> span { font-variant-numeric: tabular-nums; } </style> <span>{formattedNumber}</span> 

Voilà, now the Typescript compiler makes sure you pass a Number.