如何在JavaScript中打印带有逗号作为千位分隔符的数字

javascript formatting numbers integer

2022-08-29 21:50:41

我正在尝试在JavaScript中打印一个整数，逗号作为千位分隔符。例如，我想将数字1234567显示为“1，234，567”。我该怎么做？

以下是我的做法：

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

有没有更简单或更优雅的方法来做到这一点？如果它也适用于浮子，那就太好了，但这不是必需的。它不需要特定于区域设置即可在句点和逗号之间做出决定。

答案 1

我使用了克里答案中的想法，但简化了它，因为我只是在寻找一些简单的东西来达到我的特定目的。这是我所拥有的：

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

正则表达式使用 2 个前瞻断言：

一个正数，用于查找字符串中其后一行中具有 3 位数字倍数的任何点，
一个否定断言，以确保该点只有3位数字的倍数。替换表达式将逗号放在此处。

例如，如果您传递它，正断言将匹配7左侧的每个点（因为它是3位数字的倍数，是3位数字的倍数，等等）。否定断言检查 3 位数字的倍数后面是否没有任何数字。它后面有一个句点，所以它正好是3位数字的倍数，所以逗号在那里。是 3 位数字的倍数，但它后面有一个，所以这 3 位数字是一组 4 的一部分，逗号不会去那里。与 . 是 6 位数字，这是 3 的倍数，所以逗号在此之前。是 3 的倍数，但它后面有一个，所以没有逗号去那里。等等。将防止正则表达式在字符串的开头放置逗号。123456789.0178967856778967895674567893456789\B

@neu-rah提到，如果小数点后超过3位数字，此函数会在不需要的位置添加逗号。如果这是一个问题，您可以使用此功能：

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指出，现在JavaScript已经有了lookbehind（支持信息），它可以在正则表达式本身中解决：

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*)是一个负面的后置，表示匹配项前面不能跟着零个或多个数字。负面的观察比和解决方案（比较）更快，至少在V8中是这样。.splitjoin

答案 2

我很惊讶没有人提到Number.prototype.toLocaleString。它是在JavaScript 1.5（1999年推出）中实现的，因此它基本上在所有主流浏览器上都受支持。

var n = 34523453.345;
console.log(n.toLocaleString());    // "34,523,453.345"

它也适用于 Node.js从 v0.12 开始，通过包含 Intl

如果你想要一些不同的东西，数字.js可能会很有趣。