How to print a number with commas as thousands separators in JavaScript

Question

I am trying to print an integer in JavaScript with commas as thousands separators. For example, I want to show the number 1234567 as "1,234,567". How would I go about doing this?

Here is how I am doing it:

function numberWithCommas(x) {     x = x.toString();     var pattern = /(-?\d+)(\d{3})/;     while (pattern.test(x))         x = x.replace(pattern, "$1,$2");     return x; } 

Is there a simpler or more elegant way to do it? It would be nice if it works with floats also, but that is not necessary. It does not need to be locale-specific to decide between periods and commas.

Answer 1

I used the idea from Kerry's answer, but simplified it since I was just looking for something simple for my specific purpose. Here is what I have:

function numberWithCommas(x) {     return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } 

function numberWithCommas(x) {     return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); }  function test(x, expect) {     const result = numberWithCommas(x);     const pass = result === expect;     console.log(`${pass ? "✓" : "ERROR ====>"} ${x} => ${result}`);     return pass; }  let failures = 0; failures += !test(0,        "0"); failures += !test(100,      "100"); failures += !test(1000,     "1,000"); failures += !test(10000,    "10,000"); failures += !test(100000,   "100,000"); failures += !test(1000000,  "1,000,000"); failures += !test(10000000, "10,000,000"); if (failures) {     console.log(`${failures} test(s) failed`); } else {     console.log("All tests passed"); }

.as-console-wrapper {     max-height: 100% !important; }

---

The regex uses 2 lookahead assertions:

• a positive one to look for any point in the string that has a multiple of 3 digits in a row after it,
• a negative assertion to make sure that point only has exactly a multiple of 3 digits. The replacement expression puts a comma there.

For example, if you pass it 123456789.01, the positive assertion will match every spot to the left of the 7 (since 789 is a multiple of 3 digits, 678 is a multiple of 3 digits, 567, etc.). The negative assertion checks that the multiple of 3 digits does not have any digits after it. 789 has a period after it so it is exactly a multiple of 3 digits, so a comma goes there. 678 is a multiple of 3 digits but it has a 9 after it, so those 3 digits are part of a group of 4, and a comma does not go there. Similarly for 567. 456789 is 6 digits, which is a multiple of 3, so a comma goes before that. 345678 is a multiple of 3, but it has a 9 after it, so no comma goes there. And so on. The \B keeps the regex from putting a comma at the beginning of the string.

@neu-rah mentioned that this function adds commas in undesirable places if there are more than 3 digits after the decimal point. If this is a problem, you can use this function:

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

function numberWithCommas(x) {     var parts = x.toString().split(".");     parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");     return parts.join("."); }  function test(x, expect) {     const result = numberWithCommas(x);     const pass = result === expect;     console.log(`${pass ? "✓" : "ERROR ====>"} ${x} => ${result}`);     return pass; }  let failures = 0; failures += !test(0              , "0"); failures += !test(0.123456       , "0.123456"); failures += !test(100            , "100"); failures += !test(100.123456     , "100.123456"); failures += !test(1000           , "1,000"); failures += !test(1000.123456    , "1,000.123456"); failures += !test(10000          , "10,000"); failures += !test(10000.123456   , "10,000.123456"); failures += !test(100000         , "100,000"); failures += !test(100000.123456  , "100,000.123456"); failures += !test(1000000        , "1,000,000"); failures += !test(1000000.123456 , "1,000,000.123456"); failures += !test(10000000       , "10,000,000"); failures += !test(10000000.123456, "10,000,000.123456"); if (failures) {     console.log(`${failures} test(s) failed`); } else {     console.log("All tests passed"); }

.as-console-wrapper {     max-height: 100% !important; }

@t.j.crowder pointed out that now that JavaScript has lookbehind (support info), it can be solved in the regular expression itself:

function numberWithCommas(x) {     return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); } 

function numberWithCommas(x) {     return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); }  function test(x, expect) {     const result = numberWithCommas(x);     const pass = result === expect;     console.log(`${pass ? "✓" : "ERROR ====>"} ${x} => ${result}`);     return pass; }  let failures = 0; failures += !test(0,               "0"); failures += !test(0.123456,        "0.123456"); failures += !test(100,             "100"); failures += !test(100.123456,      "100.123456"); failures += !test(1000,            "1,000"); failures += !test(1000.123456,     "1,000.123456"); failures += !test(10000,           "10,000"); failures += !test(10000.123456,    "10,000.123456"); failures += !test(100000,          "100,000"); failures += !test(100000.123456,   "100,000.123456"); failures += !test(1000000,         "1,000,000"); failures += !test(1000000.123456,  "1,000,000.123456"); failures += !test(10000000,        "10,000,000"); failures += !test(10000000.123456, "10,000,000.123456"); if (failures) {     console.log(`${failures} test(s) failed`); } else {     console.log("All tests passed"); }

.as-console-wrapper {     max-height: 100% !important; }

(?<!\.\d*) is a negative lookbehind that says the match can't be preceded by a . followed by zero or more digits. The negative lookbehind is faster than the split and join solution (comparison), at least in V8.