开发者问题收集

如何使用逗号作为千位分隔符来格式化数字？

2010-05-24
2195621
javascript formatting numbers

我尝试在 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;
}

console.log(numberWithCommas(1000))

有没有更简单或更优雅的方法？如果它也能处理浮点数就好了，但这不是必需的。它不需要特定于语言环境来决定使用句号还是逗号。

3个回答

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

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 位数的倍数。替换表达式会在此处放置一个逗号。

例如，如果您传递 123456789.01 ，则肯定断言将匹配 7 左侧的每个位置（因为 789 是 3 位数的倍数， 678 是 3 位数的倍数， 567 等）。否定断言检查 3 位数的倍数后面是否没有任何数字。 789 后面有一个句号，因此它恰好是 3 位数的倍数，因此逗号位于此处。 678 是 3 位数的倍数，但后面有一个 9 ，因此这 3 位数字是 4 位数组的一部分，因此逗号不位于此处。 567 也是如此。 456789 是 6 位数字，是 3 的倍数，所以前面有一个逗号。 345678 是 3 的倍数，但后面有一个 9 ，所以那里没有逗号。等等。 \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 具有后视功能（ 支持信息 ），它可以在正则表达式本身中解决： 

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 中，负向后视比 split 和 join 解决方案（ 比较 ）更快。

Elias Zamaria
2010-05-25

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

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

通过包含 Intl ，它也可以在 Node.js v0.12 中使用。>

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

uKolka
2013-07-15

下面是两种不同的浏览器 API，它们可以将 数字 转换为结构化的 字符串 。请记住，并非所有用户的计算机都具有在数字中使用逗号的 语言环境 。若要强制在输出中使用逗号，可以使用任何“西方” 语言环境 ，例如 en-US 

let number = 1234567890; // Example number to be converted

⚠️ 请注意，javascript 的 最大整数 值为 9007199254740991

toLocaleString 

// default behaviour on a machine with a locale that uses commas for numbers
let number = 1234567890;
number.toLocaleString(); // "1,234,567,890"

// With custom settings, forcing a "US" locale to guarantee commas in output
let number2 = 1234.56789; // floating point example
number2.toLocaleString('en-US', {maximumFractionDigits:2}); // "1,234.57"

//You can also force a minimum of 2 trailing digits
let number3 = 1.5;
number3.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2}); //"1.50"

NumberFormat 

let number = 1234567890;
let nf = new Intl.NumberFormat('en-US');
nf.format(number); // "1,234,567,890"

据我检查（至少 Firefox 是这样），它们在性能方面大致相同。

⚡ 现场演示 ： https://codepen.io/vsync/pen/MWjdbgL?editors=1000

vsync
2015-08-22