Add Commas to Number JavaScript

We can improve the readability of large numbers if we use commas as separators. Users can easily count digits by adding a comma to the number in JavaScript. They have no effect on the value of the number, but they make it easier for humans to read and understand the number by dividing the numbers into groups.

For example, consider the number 1000000. It’s difficult to quickly determine how many zeros are in this number, and whether it represents one million or ten million. By adding commas to a number like 1,000,000, we can clearly see that it represents one million.

So we have to add a comma separator to numbers. In JavaScript, we can easily add commas to numbers by using toLocaleString() method, Intl.NumberFormat() constructor and regular expression.

Table of Contents

1. Intl.NumberFormat() constructor

The Intl.NumberFormat() constructor allows you to specify the locale and formatting options for a number. We can customize the formatting by passing options to the constructor, such as the number of decimal places, and the grouping size.

Ex:

const num = 11000000;
const formattedNum = new Intl.NumberFormat().format(num);

console.log("Number : " + num)
console.log("Formatted Number : " + formattedNum);

In this code:

Firstly, declare a constant variable named ‘num’ and assign it the value of ‘11000000’.
Then we called the ‘Intl.NumberFormat()’ function without any arguments, which creates a new NumberFormat object that uses the default locale and options.
The ‘format()’ method is called on the newly created NumberFormat object and passes in the value of ‘num’ as an argument. This method returns a string representing the number in a formatted way based on the locale.
We assign the value returned by the format() method to the new constant variable ‘formattedNum’
Finally, we logged the constant ‘num’ and ‘formattedNum)’ separately.

Output:

Number : 11000000
Formatted Number : 11,000,000

The above output shows the number with separated by commas ‘11,000,000‘.

2. toLocaleString() method

In this method, we’re going to add commas to number in Javascript using the ‘toLocaleString()’ and it returns a string that represents the number formatted according to the language. This method automatically inserts commas (or other grouping separators) based on the user’s locale settings.

const num = 1234567.89;
const formattedNum = num.toLocaleString();

console.log("Number : " + num)
console.log("Formatted Number : " + formattedNum);

In this code:

The constant ‘num’ have a float value of ‘1234567.89’.
Then the ‘toLocaleString()’ method is called on the ‘num’ constant. It formats the number ‘num’ using the default options for the current locale and the formatted number is returned as a string
Finally, the constant ‘formattedNum’, is assigned the formatted string returned by the ‘toLocaleString()’ method.

Output:

Number : 1234567.89
Formatted Number : 1,234,567.89

The output shows “1234567.89” is successfully converted to “1,234,567.89” after adding commas.

3. Regular expression

We are going to use the regular expression “/\B(?=(\d{3})+(?!\d))/g” to add commas by at least one group of three digits. This regex matches any position that is not the beginning of the string ‘(\B)‘ and is followed by at least one group of three digits ‘(\d{3})+)‘, but not followed by any more digits ‘(?!\d)‘.

let formattedNum = (number) => {
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

console.log("Formatted Number : " + formattedNum(1000000));

In this code:

We have created the function ‘formattedNum’ with the passing parameter ‘number’. This function returns the string value with separated by commas.
And we logged the function ‘formattedNum’ by passing the number ‘1000000’.

Output:

formatted Number : 1,000,000

The number ‘1000000‘, we passed in the function has been returned with the comma ‘1,000,000‘

Conclusion

Using the ‘toLocaleString()’ method is the most straightforward and widely. However, the other methods can offer more control over the formatting if needed.