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:
6 | => | 6 |
63 | => | 63 |
634 | => | 634 |
6347 | => | 6.3K |
63476 | => | 63K |
634764 | => | 635K |
6347643 | => | 6.3M |
63476432 | => | 63M |
It supports different locales as well. Converting 63476432
looks as follows
ko-KR | => | 6348만 |
zh-TW | => | 6348萬 |
de-CH | => | 63 Mio. |
ar-SA | => | ٦٣ مليون |
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
.
Top comments (0)