如何在 JavaScript 中使用逗号作为千位分隔符打印数字 [英] How to print a number with commas as thousands separators in 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's answer 中的想法，但简化了它，因为我只是为了我的特定目的寻找简单的东西.这是我所做的:
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 did:
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，表示匹配不能以 . 开头，后跟零个或多个数字.负向后视比 split 和 join 解决方案更快(比较)，至少在 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 中使用逗号作为千位分隔符打印数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
