How to Add Commas to Number in Javascript?

Do you want to learn more about how to add commas to a number in JavaScript? 🤔 If yes, then keep reading. This article is just for you, 😀.

JavaScript uses the comma operator (,) in the same manner as many other programming languages, including C, C++, etc. Mostly, this operator evaluates its operands in order from left to right before returning the value of the rightmost operand. When just one expression is needed, the comma operator is used to separate the several expressions. Every expression that contains a comma is executed, and the rightmost expression is then returned.

In this article, we’ll discuss how to add commas to numbers in JavaScript. Sometimes structuring a number in an HTML page with commas is necessary to make it easier to understand. We can convert a number into a comma-separated value using JavaScript. So without further ado, let’s dive deep into the topic and see some real examples!

How to Add Commas to Number in Javascript?

In computing, a number’s format plays a crucial role in how large numbers are represented. As a result, this technique improves the consumers’ ability to read. Numerous ways are available in JavaScript to deal with number formatting. JavaScript may be used to convert an integer value into a comma-separated string. We can use three different methods depending on our use case and the speed/efficiency required in processing the given number. 

Following are the given methods through which we can insert commas in Javascript.

1. Use regular expression 
2. Use locale string
3. Use Intl.NumberFormat

Method 1: Use Regular Expression

The string of letters that defines a search query is known as a regex, or regular expression. Regex allows us to replace, locate, and format values in a string in accordance with our needs.

The regex takes advantage of two lookahead statements. one affirmative lookahead statement that looks for a point in the string that comes after a trio of numbers. One negative lookahead assertion that guarantees the provided point has precisely three digits in its group size. The replacement expression then places a comma there. Separating the string before using the regex expression on the portion preceding the decimal also takes care of the decimal places.

Let’s see an example:

Code

const number=7858435639;

function separator(number) {

    var string = number.toString().split(".");

    string[0] = string[0].replace(/\B(?=(\d{2})+(?!\d))/g, ",");

    return string.join(".");

}

console.log(separator(number));

Output

78,58,43,56,39

The comma is added after two numbers in the above example because we have given the value 2 in the expression d{2}. if we give here 3, it will add a comma after three integers

Method 2: Use Locale String

The function toLocaleString(), like the method above, returns a string containing a language-sensitive representation of a number. Additionally, it accepts locale-specific arguments that define the number’s format. The elements of the provided array are converted into a string using the JavaScript function toLocaleString() function, and these Strings are separated by commas “,“. The method will express the numbers with a comma between the thousands if we give the argument “en-US” to make it use the United States and English language formatting.

Code

console.log("Comma is added to the number: ");

const number = 56734343708;

const out_number = number.toLocaleString();

console.log(out_number);

Output

Comma is added to the number: 

56,734,343,708

In the above example, the value “56734343708” is stored as a variable number. Then, the number is given a comma and stored in the “out_number” variable using the function toLocaleString(). Finally, a number is shown in the console window using the log() function.

Method 3: Use Intl.NumberFormat

Using the parameters supplied, this function is used to represent currencies and integers in language-sensitive formats. The locale argument, which is offered, defines the format of the number. For instance, the en-IN locale uses English and the format of India. Thousands are separated by the first comma from the right, while the remaining numbers are in hundreds.

We’ll make use of the object returned by Intl.format() NumberFormat’s method (). This function accepts a number and outputs a string with commas between each element. We may make use of the en-US locale to obtain a string with thousand separators.

Let’s see an example:

Code

const Number = 768689238002503;

INFormat = new Intl.NumberFormat('en-US');

console.log(INFormat.format(Number));

Output

768,689,238,002,503

The above example demonstrates that you can declare a variable Number, and an integer value is stored in the variable Number.

Conclusion

To summarize the article, we have discussed how to add commas to numbers in Javascript. Using the regex and replace() method to format a number is always quicker than using the function toLocaleString() method since the latter requires checking the localization (country) setting chosen by your computer or JavaScript engine first.

Regex pattern and String.replace() technique are usually preferable to the function toLocaleString() method when managing a large request to format integers with commas.

Let’s have a quick recap of the topics discussed in this article.

1.  How to add commas to a number in javascript?
2.  Use regular expressions.
3.  Use locale string.
4.  Use Intl.NumberFormat

If you’ve found this article helpful, comment below and let 👇 know which solutions have helped you solve the problem.