JavaScript has a built-in language-sensitive number formatting feature, called Intl.NumberFormat
. This is useful if you want to format large numbers, use thousand separators, format currency values. It is supported by all evergreen browsers, except Internet Explorer.
Example
const formatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR'
})
console.log(formatter.format(123456.789));
// expected output: "123.456,79 €"
Playground
The NumberFormat
documentation on MDN is not very clear about the available options, so I decided to build a playground that allows you to customize the formatting options and immediately see the result for a list of locales and input numbers.
In the sidebar you'll find some presets that showcase interesting use cases.
Note: The features marked as V3 will be implemented in a future version of ECMAScript. Therefore, they may not yet be available in your browser yet. I will add a polyfill as soon as it is available.
Open the Codesandbox fullscreen for easy editing. The playground is built in React using the Mantine component library.
Top comments (0)