. Advertisement .
..3..
. Advertisement .
..4..
This tutorial introduces 4 ways to add commas to number in Javascript. Follow to know more!
How To Add Commas To Numbers In Javascript
Method 1: Use The toLocaleString() Function
This built-in method returns a locale-sensitive string. Here is an example:
Code:
let exp_number = 449272783789821;
let exp_string = exp_number.toLocaleString("en-US");
console.log(exp_string);
Output:
449,272,783,789,821
It will also work with other floating numbers:
Code:
let float_number = 3419244.546;
let exp_string1 = float_number.toLocaleString("en-US");
console.log(exp_string1);
Output:
3,419,244.546
Method 2: Use Regular Expressions
A regex contains a string of characters specifying a search term. Using these regular expressions allows you to find and replace any value in your string and format in a required way.
function float_number(number1) {
return number1.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
let exp_number = float_number(6723141.141);
console.log(exp_number);
Output:
6,723,141.141
Method 3: Use Intl.NumberFormat() Function
This function is best suited for formatting in a language-sensitive way. In this case, you create an object with the Intl.NumberFormat() constructor, which accepts the number’s formatting and locale.
let example_number = 2224446668886;
// England uses commas as decimal separators and periods for thousands
let fixed_Number = new Intl.NumberFormat('en-EN');
console.log(fixed_Number.format(example_number));
// Italy uses dots as decimal separators and periods for thousands
fixed_Number = new Intl.NumberFormat('it-IT');
console.log(fixed_Number.format(example_number));
// Arabic in most Arabic-speaking countries uses absolute Arabic digits
fixed_Number = new Intl.NumberFormat('ar-EG');
console.log(fixed_Number.format(example_number));
// India uses thousands/lakh/crore separators
fixed_Number = new Intl.NumberFormat('en-IN');
console.log(fixed_Number.format(example_number));
Output:
2,224,446,668,886
2.224.446.668.886
٢٬٢٢٤٬٤٤٦٬٦٦٨٬٨٨٦
22,24,44,66,68,886
Method 4: Insert Commas Manually
If all the functions are disabled, you can insert commas manually. Here is an example:
Code:
// I: ADD A COMMA TO SEPARATE THE GIVEN NUMBER
// number: original number
// per: add comma per n digits (default 3)
// places: number of decimal places (default 3)
function insert_comma (number, per, places) {
// 1 - Set defaults
if (per==undefined) { per = 3; }
if (places==undefined) { places = 3; }
// 2 - No decimal places - round off
// Remove this if you don't want to round off
if (places==0) { number = Math.round(number); }
// 3- Split whole and decimal numbers
var ex_str = number.toString(),
ex_Dot = ex_str.indexOf("."),
ex_Whole = "", ex_Decimal = "";
if (ex_Dot == -1) {
ex_Whole = ex_str;
ex_Decimal = 0;
} else {
ex_Whole = ex_str.substring(0, ex_Dot);
ex_Decimal = ex_str.substring(ex_Dot+1);
}
// 4 - Add commas to the whole number
var add_Comma = "", count = 0;
if (ex_Whole.length > per) { for (let i=(ex_Whole.length-1); i>=0; i--) {
add_Comma = ex_Whole.charAt(i) + add_Comma;
count++;
if (count == per && i!=0) {
add_Comma = "," + add_Comma;
count = 0;
}
}} else { add_Comma = ex_Whole; }
// 5 - Round off to given decimal places
if (places==0) { ex_Decimal = ""; }
else {
ex_Decimal = +("0." + ex_Decimal);
ex_Decimal = ex_Decimal.toFixed(places).toString().substring(1);
}
// 6 - Return "whole with a comma" plus decimal places
return add_Comma + ex_Decimal;
}
// II: TEST
// 1 - Whole number
var whole_num = 3336669997;
console.log(insert_comma(whole_num));
console.log(insert_comma(whole_num, 3, 0));
// 2 - Decimal
var dec_num = 24680.213;
console.log(insert_comma(dec_num));
console.log(insert_comma(dec_num, 3, 0));
Output:
3,336,669,997.000
3,336,669,997
24,680.213
24,680
Conclusion
There are four ways to add commas to number in Javascript. Depending on your cases, you should choose a suitable method.
Leave a comment