如何在 JavaScript 中用逗号打印一个数字作为千位

How to print a number with commas as thousands separators in JavaScript(如何在 JavaScript 中用逗号打印一个数字作为千位分隔符)
本文介绍了如何在 JavaScript 中用逗号打印一个数字作为千位分隔符的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试在 JavaScript 中打印一个整数,并用逗号作为千位分隔符.例如,我想将数字 1234567 显示为1,234,567".我该怎么做呢?

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?

这是我的做法:

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.

推荐答案

我使用了 Kerry 的回答中的想法,但简化了它,因为我只是为我的特定目的寻找简单的东西.这是我所拥有的:

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

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

The regex uses 2 lookahead assertions:

  • 一个正数,用于查找字符串中后面连续有 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 防止正则表达式在字符串开头放置逗号.

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 提到如果后面有超过 3 个数字,这个函数会在不需要的地方添加逗号小数点.如果这是一个问题,你可以使用这个功能:

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

@tjcrowder 指出,现在 JavaScript 有lookbehind (支持信息),可以在正则表达式本身解决:

@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*) 是一个否定的lookbehind,表示匹配项前面不能有 . 后跟零个或多个数字.负面的lookbehind比splitjoin解决方案更快(比较),至少在 V8 中.

(?<!.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.

这篇关于如何在 JavaScript 中用逗号打印一个数字作为千位分隔符的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)