javascriptformattingnumbers

How to format a number with commas as thousands separators?


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;
}

console.log(numberWithCommas(1000))

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.


Solution

  • 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:

    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.