. Advertisement .
..3..
. Advertisement .
..4..
Find yourself struggling to format number with commas in Javascript? ITtutoria is coming to the rescue with three different solutions. Let’s delve into each one to see which one will work best for you!
How to Format Number with Commas in Javascript
Method 1: Use toLocaleString ()
The first tactic is the Number.toLocaleString (). It is an integrated method of Number objects that send back locale-sensitive strings that symbolize the number. It is possible to enter “en-US” as a parameter to yield thousands of separators for the number.
A simple example would help you understand this method better:
let x = 164337002;
let string1 = x.toLocaleString("en-US");
console.log(string1);Output:
164,337,002This toLocaleString() function also operates on floating numbers, as seen in the illustration here:
let y = 164337.002;
let string2 = y.toLocaleString("en-US");
console.log(string2);Output:
164,337.002Don’t want to use this tactic? No worry; ITtutoria has got some other methods covered.
Method 2: Use The Intl.NumberFormat()
Another approach is via the Intl.NumberFormat(), which represents your numbers in language-sensitive formats. We might also employ this function to symbolize currency or percentage depending on the particular locale. The given parameter is termed “locale”, aiming to specify your number format.
You might enter “en-US” as the sole parameter. Such operations propel the locale to undertake the formatting of English and the United States language. As a result, it will display your numbers with one comma sandwiched in the thousands.
The format() also proves handy when you wish to send back a number string within a particular locale. This function will receive the numbers and send back a comma-separated string. To understand this theory, let’s inspect a specific example:
<!DOCTYPE html>
<html>
<head>
<title> Using Intl.NumberFormat() </title>
</head>
<body>
<h1> Welcome to the ITtutoria </h1>
<p>
This is an example of using the <b> Intl.NumberFormat() </b> object to format a number with commas as thousands of separators in JavaScript
</p>
<b> Number1 = '164337005' </b> </br>
<b> Number2 = '33708800.5861' </b> </br>
<p> Click the below button to print the above numbers separated with commas </p>
<button onclick = "fun()"> Click now </button>
<script type = "text/javascript">
function fun() {
number1 = 164337005;
object1 = new Intl.NumberFormat('en-US');
output1 = object1.format(number1);
document.write("<b> The given number = </b>", number1);
document.write("</br> <b> The formatted number = </b>", output1);
number2 = 33708800.5861;
object2 = new Intl.NumberFormat('en-US');
output2 = object2.format(number2);
document.write("</br> <br> <b> The given number = </b>", number2);
document.write("</br> <b> The formatted number = </b>", output2);
}
</script>
</body>
</html>Outputs:
The given number = 164337005
The formatted number = 164,337,005
The given number = 33708800.5861
The formatted number = 33,708,800.586Sometimes, when people run these codes through applications in React: jest, a “SyntaxError: unexpected token” message will pop up. To tackle such issues, please refer to this instructional article.
Method 3: Use RegEx
The third plausible approach is to turn to RegEx (Regular Expression), which inserts one comma every three digits. To use RegEx, let’s write:
const str = (1234567890).toString().replace(/B(?=(d{3})+(?!d))/g, ",");
console.log(str)
- “B(?=(d{3})+” searches for 3-digit groups preceding a decimal place.
- “B” holds the “Replace” function from inserting a comma at the string starter.
- “?=” serves as the lookahead assertion. What does that mean, by the way? We can only match three digits if their patterns are succeeded by one non-word boundary.
- And last but not least, “?!” represents negative lookahead assertions.
Conclusion
This article has shown you how to format number with commas in Javascript. Clear and transparent examples for each method are also provided! ITtutoria hopes that these guidelines have alleviated your current troubles, and do not hesitate to reach us if your troubles still refuse to go away!
Leave a comment