HomeQuestionBlogAboutMessageToolbox
English

如何在JavaScript中以逗号将数字打印为千位分隔符

卡卡西逆天2020-03-09

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

有没有更简单或更优雅的方法？如果它也可以与浮点数一起使用，那就太好了，但这不是必需的。在句点和逗号之间进行决策不需要特定于区域设置。

流云2020/03/09 19:56:56

My “true” regular-expressions-only solution for those love one-liners

You see those enthusiastic players above? Maybe you can golf out of it. Here’s my stroke.

n => `${n}`.replace(/(?<!\.\d+)\B(?=(\d{3})+\b)/g, " ").replace(/(?<=\.(\d{3})+)\B/g, " ")

Uses a  THIN SPACE (U+2009) for a thousands separator, as the International System of Units said to do in the eighth edition(2006) of their publication “SI Brochure: The International System of Units (SI)” (See §5.3.4.). The ninth edition(2019) suggests to use a space for it (See §5.4.4.). You can use whatever you want, including a comma.

See.

const integer_part_only = n => `${n}`.replace(/(?<!\.\d+)\B(?=(\d{3})+\b)/g, " I ");
const fractional_part_only = n => `${n}`.replace(/(?<=\.(\d{3})+)\B/g, " F ");
const both = n => fractional_part_only(integer_part_only(n));

function demo(number) { // I’m using Chrome 74.
	console.log(`${number}
		→ "${integer_part_only(number)}" (integer part only)
		→ "${fractional_part_only(number)}" (fractional part only)
		→ "${both(number)}" (both)
	`);
}
demo(Math.random() * 10e5);
demo(123456789.01234567);
demo(123456789);
demo(0.0123456789);

How does it work?

For an integer part

.replace(/(?<!\.\d+)\B(?=(\d{3})+\b)/g, " I ")
  • .replace(……, " I ") Put “ I ”
    • /……/g at each of
      • \B the in-between of two adjacent digits
        • (?=……)POSITIVE LOOKAHEAD whose right part is
          • (\d{3})+ one or more three-digit chunks
          • \b followed by a non-digit, such as, a period, the ending of the string, et cetera,
        • (?<!……)NEGATIVE LOOKBEHIND excluding ones whose left part
          • \.\d+ is a dot followed by digits (“has a decimal separator”).

For a decimal part

.replace(/(?<=\.(\d{3})+)\B/g, " F ")
  • .replace(……, " F ") Put “ F ”
    • /……/g at each of
      • \B the in-between of two adjacent digits
        • (?<=……)POSITIVE LOOKBEHIND whose left part is
          • \. a decimal separator
          • (\d{3})+ followed by one or more three-digit chunks.

Character classes and boundaries

\d

Matches any digit (Arabic numeral). Equivalent to [0-9].

For example,

  • /\d/ or /[0-9]/ matches 2 in B2 is the suite number.

\b

Matches a word boundary. This is the position where a word character is not followed or preceded by another word-character, such as between a letter and a space. Note that a matched word boundary is not included in the match. In other words, the length of a matched word boundary is zero.

Examples:

  • /\bm/ matches the m in moon ;
  • /oo\b/ does not match the oo in moon, because oo is followed by n which is a word character;
  • /oon\b/ matches the oon in moon, because oon is the end of the string, thus not followed by a word character;
  • /\w\b\w/ will never match anything, because a word character can never be followed by both a non-word and a word character.

\B

Matches a non-word boundary. This is a position where the previous and next character are of the same type: either both must be words, or both must be non-words. Such as between two letters or between two spaces. The beginning and end of a string are considered non-words. Same as the matched word boundary, the matched non-word boundary is also not included in the match.

For example,

  • /\Bon/ matches on in at noon;
  • /ye\B/ matches ye in possibly yesterday.

Browser compatibility

蛋蛋伽罗猿2020/03/09 19:56:56

if you are dealing with currency values and formatting a lot then it might be worth to add tiny accounting.js which handles lot of edge cases and localization:

// Default usage:
accounting.formatMoney(12345678); // $12,345,678.00

// European formatting (custom symbol and separators), could also use options object as second param:
accounting.formatMoney(4999.99, "€", 2, ".", ","); // €4.999,99

// Negative values are formatted nicely, too:
accounting.formatMoney(-500000, "£ ", 0); // £ -500,000

// Simple `format` string allows control of symbol position [%v = value, %s = symbol]:
accounting.formatMoney(5318008, { symbol: "GBP",  format: "%v %s" }); // 5,318,008.00 GBP
JinJin米亚2020/03/09 19:56:56

I think this is the shortest regular expression that does it:

/\B(?=(\d{3})+\b)/g

"123456".replace(/\B(?=(\d{3})+\b)/g, ",")

I checked it on a few numbers and it worked.

梅Harry2020/03/09 19:56:56

这是@ mikez302答案的一种变体，但已修改为支持带小数的数字（根据@ neu-rah的反馈，即numberWithCommas（12345.6789）->“ 12,345.6,789”而不是“ 12,345.6789”

function numberWithCommas(n) {
    var parts=n.toString().split(".");
    return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
}
十三Harry神无2020/03/09 19:56:56
function formatNumber (num) {
    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

print(formatNumber(2665));      // 2,665
print(formatNumber(102665));    // 102,665
print(formatNumber(111102665)); // 111,102,665
西里阳光2020/03/09 19:56:56
var number = 1234567890; // Example number to be converted

⚠记住javascript的最大整数值为9007199254740991

toLocaleString：

number.toLocaleString(); // "1,234,567,890"

// A more complex example: 
var number2 = 1234.56789; // floating point example
number2.toLocaleString(undefined, {maximumFractionDigits:2}) // "1,234.57"


NumberFormat（不支持 Safari）：

var nf = new Intl.NumberFormat();
nf.format(number); // "1,234,567,890"

根据我的检查（至少是Firefox），它们在性能上或多或少都相同。

Near小哥神奇2020/03/09 19:56:56

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

var n = 34523453.345
n.toLocaleString()
"34,523,453.345"

通过包含Intl，它也可以从v0.12版本开始在Node.js中工作。

请注意，此函数返回的是字符串，而不是数字。

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

路易番长2020/03/09 19:56:56

我使用了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位数的整数倍。替换表达式在此处放置逗号。

例如，如果传递它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;
}

@ tjcrowder指出，现在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解决方案（比较）快。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标
5 Answer
如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)
25 Answer
MAC终端删除代理有效命令
1 Answer
vue动态路由跳转同一地址不刷新页面
0 Answer
NUXT引入tailwindcss报错Error: Expected an opening square bracket.
1 Answer

LINKS

QuestionBlogMessageToolbox