How to Print JavaScript Number Format with Commas?

Guide of How to Print JavaScript Number Format with Commas as thousands of separators. In order to make a number value simpler to read. You may need to format it using commas and decimals in your HTML pages I was able to find both in one place. Using JavaScript, you may convert an integer value into a comma-separated list containing decimals.

In JavaScript, there are a variety of ways to print an integer with a comma as a thousand separator. I came across a useful function that explains how to do it and thought I’d share it here. It simply converts an integer into a structured string with commas and decimals separating the thousands.

Method 01: Using Intl.NumberFormat() to Print JavaScript Number Format with Commas

This technique is use to format numbers in a language-sensitive manner and to represent currencies based on the parameters given. The locale option is used to specify how the number should be formatted. The en-IN locale, For example, uses India’s format and the English language. And you use any one of them ‘en-IN’, ‘ja-JP’,’en-US’ and ‘de-DE’, etc. Thousands are separate by the first comma from the right, while hundreds are separate by the rest.

Example: The format() function will be applied to the object returned by Intl.NumberFormat(). The number is sent in and a comma-separated string is returned. We can utilize the en-US locale to get a string split by thousands.

const givenNumber = 984627946593885903849;

const internationalNumberFormat = new Intl.NumberFormat('en-US')
console.log(internationalNumberFormat.format(givenNumber))

Output:

img1

Method 02: Using toLocaleString() to Print JavaScript Number Format with Commas

To return a string containing a language-sensitive representation of a number, use the function toLocaleString(). The locales argument can be use to determine the number’s format.

The locale ‘en-US’ specifies that the locale uses the United States and English language format. In which numbers are separate by a comma in the thousands. This will format the number with commas thousands of times and return the formatted number as a string.

Example:

const givenNumber = 7335346568768792343658;

console.log(givenNumber.toLocaleString('en-US'))

Output:

JavaScript Number Format img2

Method 03: Using Regular Expressions (regex)

The regex uses two lookahead assertions:

  • One positive lookahead assertion that searches for a point in the string containing a group of 3 digits after it.
  • One negative lookahead assertion that makes sure that the given point has a group size of exactly 3 digits.

Then the replacement expression inserts a comma at that position.

The decimal places are also taken care of by separating the string before applying the regex expression to the section preceding the decimal.

Example:

const numb= 3436547568768345;

function separator(numb) {
    var str = numb.toString().split(".");
    str[0] = str[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return str.join(".");
}

console.log(separator(numb))

Output:

regex comma example

Conclusion

And those are three ways you can Print JavaScript Number Format with Commas. Formatting a number using the regex and replace() method is always faster than using toLocaleString() and Intl.NumberFormat(). Because toLocaleString() and Intl.NumberFormat() method needs to check out the localization (country). Selected by your computer or JavaScript engine first before formatting the number.

When you’re handling a huge request to format numbers with commas. t’s probably better to use the regex pattern and String.replace() method instead of toLocaleString() and Intl.NumberFormat() method.

That’s all for this article if you have any confusion contact us through our website or email us at [email protected] or by using LinkedIn.

Suggested Articles:

  1. JavaScript URL Builder – Build an URL and its Search Parameters
  2. How to Get URL Parameters with JavaScript [With Examples]
  3. JavaScript URL Parse with parse-url

Leave a Comment