Format Number With Commas in JavaScript | Beginner Guide

You might have tried to format a number with commas in Javascript and faced difficulties. You are at the right place if you are a beginner and don’t know how to format a number in Javascript. This guide will discuss the methods through which you can achieve your objective. 

The methods are:

• Method 1: Using toLocaleString() 
• Method 2: Using Intl.NumberFormat Object
• Method 3: Using Regular Expressions   

Furthermore, we will discuss the above methods in detail with examples. Additionally, we can use the above techniques only with number objects. Moreover, you can convert these Javascript objects to JSON. We will also discuss some advanced formatting techniques in the later sections of the guide. Without further ado, let’s get started.

How to Format Numbers with Commas in JavaScript?

There are various methods for number formatting in Javascript, but we will only focus on how to format numbers with commas in Javascript. 

See Also: How To Create A Calendar In HTML Using JavaScript

Method 1: Using toLocaleString()

The first method in Javascript to format a number is by using the toLocaleString(). This function is the branch of the number prototype in JS. It is one the most straightforward methods that you can utilize.

The toLocaleString() will format the given number into a string based on the mentioned locale and the formatting preferences. It uses the “en-US” locale by default, but you can use any location. Furthermore, it can easily format the floating numbers, too. Let’s look at some examples:

const number = 6294581302;

const uniqueformattednumber = number.toLocaleString(“en-US”);

console.log(uniqueformattednumber);

Output:

6,294,581,302

The above example shows that the toLocaleString() method has formatted the number according to the “en-US” locale. Now, let’s check whether it works for floating points or not. For instance: 

const number = 62945.81302;

const uniqueformattednumber = number.toLocaleString(“en-US”);

console.log(uniqueformattednumber);

Output:

62,945.813

Therefore, it also works for floating numbers. Additionally, let’s say we want to format the number with the locale of Germany. For instance:

const number = 6294581302;

const uniqueformattednumber = number.toLocaleString(“de-DE”);

console.log(uniqueformattednumber);

Output:

6.294.581.302

This is one of the ways to format number with commas in javascript. The above example has shown the correct output, as Germany uses periods instead of commas.  

Method 2: Using Intl.NumberFormat Object

The second method to format numbers with commas in Javascript is to use the Intl.NumberFormat Object. It is utilized to illustrate no.’s in language-sensitive formatting, which is possible due to Internationalization API. Furthermore, you can operate it to illustrate currency or percentages based on the mentioned locale. This object’s format() method can be used to give back a string of the number with the mentioned locale and formatting preferences. Let’s look at some examples: 

let uniqueformattednumber = 7515427567138

console.log(Intl.NumberFormat(‘en-US’).format(uniqueformattednumber))

Output:

7,515,427,567,138

You can also use some of the formatting options. For instance:

let uniqueformattednumber = 7515427567138

console.log(Intl.NumberFormat(‘en-US’, { style: ‘currency’, currency: ‘USD’ }).format(uniqueformattednumber))

Output:

$7,515,427,567,138.00

In the above example, we have used a formatting option to define the currency, which gives the output in dollars and is separated by commas.

Method 3: Using Regular Expressions

The third method to format numbers with commas in Javascript is regular expressions or regex. It is a series of characters that mentions a search term. With the help of regex, you can displace and get the values in the string and format it as per our need. To format the number, you can apply the String.prototype.replace() method with the regex. Before that, let’s look at the regex pattern: 

/\B(?=(\d{3})+(?!\d))/g

The above pattern will find the string and insert a marker when it gets back to back three digits. Afterward, the String.prototype.replace() method will change the markers into commas. Let’s look at an example:

function numberWithCommas(num) {

  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ‘,’);

}

let uniqueformmatteddnumber = numberWithCommas(689157.555);

console.log(uniqueformmatteddnumber); 

Output:

689,157.555

JavaScript Advanced Formatting Techniques

One of the advanced formatting techniques to format numbers with commas in Javascript is to use the Lodash library. For instance: 

const _ = require(‘lodash’);

const number = 1234567.89;

constuniquenumber = _.comma(number);

console.log(uniquenumber);

Output:

1,234,567.89

In the above example, we can see that, at first, the library is imported. Furthermore, the _.comma method is used to separate numbers with commas. 

FAQs

How to format a number as text in JavaScript?

You can employ num. toString() to format a number as text in JS.

How to format integers in JavaScript?

You should utilize the parseInt() method for formatting integers in Javascript.

What is the number method in JavaScript?

The function of the Number() method is to transform a value into a number. Furthermore, the output will be NaN if the conversion is not possible.

How to get the date format in JavaScript?

To get the date format in Javascript, you should employ any of these methods: Date. toLocaleDateString() and Intl. DateTimeFormat().

Conclusion

In conclusion, we learned how to separate numbers with commas in Javascript. The above methods are simple, and you will not face any difficulties using them. Furthermore, the regular expression is one of the old methods used to format numbers. It is advised to use the first two methods to increase your knowledge. You can also improve your skills by learning key concepts like sorting in Javascript and many more. Additionally, you can do a lot with the help of Javascript. You can create Javascript Contact forms, which will make your website intuitive, or make games like Flappy Bird, etc. 

You can also remove a class in Javascript by using 3 methods.