dev-resources.site
for different kinds of informations.
Formatting numbers in JavaScript
In the last couple of posts, I showed you how you can format dates and relative dates using the native Internationalization API. Today, I'll we're going to format regular numbers using the same API. Yes, Intl is not only used for date formatting, there's a whole range of use cases including numbers, lists and plurals.
So, when I say we are going to format numbers, what I mean is: numbers are not represented the same way in different cultures. For example, in Brazil we the most common way to represent numbers is like so: 1.234.567,89. The comma is the decimal separator and the period is the thousands separators. In other cultures those are switched, or the thousands separator is not used. If your application is served in other locales, you can use the Intl API to resolve these for you and you don't even need to plug in another dependency.
Let's see how we can use it:
const myNumber = 1234657.89;
const formatter = new Intl.NumberFormat('pt-BR');
console.log(formatter.format(myNumber)); // 1.234.567,89
const formatterUS = new Intl.NumberFormat('en-US');
console.log(formatter.format(myNumber)); // 1,234,567.89
If you've read the previous posts, you'll probably be familiar with the syntax. You first instantiate the formatter with the locale and then pass the parameters you want to format. Of course, you can also pass an options object to the formatter if you want to further customize the number format. Let check out a few options:
const myNumber = 1234567.89;
let formatter = new Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL'
});
console.log(formatter.format(myNumber)); // R$ 1.234.567,89
formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
console.log(formatter.format(myNumber)); // $ 1,234,567.89
formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'code' // default: 'symbol'
});
console.log(formatter.format(myNumber)); // USD 1,234,567.89
formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencyDisplay: 'name'
});
console.log(formatter.format(myNumber)); // 1,234,567.89 US dollars
There are also options to customize the way it displays negative values, for example instead of using $ -1.00 it can display ($1.00):
const myNumber = -1234567.89; // notice the negative sign
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
currencySign: 'accounting'
});
console.log(formatter.format(myNumber)); // ($1,234,567.89)
And, if you are working with currencies or percentages, the number of fraction digits is already set using ISO 4217, but if you're working with regular numbers, you can set that option too:
const myNumber = 1234567.00;
formatter = new Intl.NumberFormat('en-US');
console.log(formatter.format(myNumber)); // 1,234,567
formatter = new Intl.NumberFormat('en-US', {
minimumFractionDigits: 2
});
console.log(formatter.format(myNumber)); // 1,234,567.00
formatter = new Intl.NumberFormat('en-US', {
maximumFractionDigits: 3
});
const myNumber2 = 1234567.891011
console.log(formatter.format(myNumber2)); // 1,234,567.891
You can customize the notation as well:
formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
notation: 'standard' // default
});
console.log(formatter.format(myNumber)); // $1,234,567.89
formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
notation: 'scientific'
});
console.log(formatter.format(myNumber)); // $1,23E6
formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
notation: 'engineering'
});
console.log(formatter.format(myNumber)); // $1,23E6
formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
notation: 'compact'
});
console.log(formatter.format(myNumber)); // $1.2M
There are still plenty of options we did not cover but I think the most popular ones are those in the examples, but if you can check out the full list here. And this is it for this post. See you on the next one!
Featured ones: