我想在 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))有没有更简单或更优雅的方法来做到这一点？如果它也可以处理浮点数，那就太好了，但这并不是必需的。它不需要是特定于区域设置的，以决定使用句点还是逗号。
我借鉴了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个前瞻断言：
例如，如果您传递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*)是一个负向零宽断言，意味着匹配的内容不能以一个点.和0个或多个数字为前缀。与 split 和 join 解决方案 (比较) 相比，负向零宽断言在V8引擎中速度更快。
我很惊讶没有人提到Number.prototype.toLocaleString。它在JavaScript 1.5中实现（于1999年引入），因此基本上支持所有主要浏览器。
var n = 34523453.345;
console.log(n.toLocaleString()); // "34,523,453.345"自 Node.js v0.12 版本开始，通过包含 Intl 也可以使用它。
如果您想要不同的东西，Numeral.js 可能会很有趣。
var number = 123456.000;
number.toLocaleString('en-US', {minimumFractionDigits: 2});
"123,456.00"然而，在 Firefox 或 Safari 中这些选项无效。 - uKolkatoLocaleString，可正常使用。 - srobinsonparseInt("1234567", 10).toLocaleString('en-US', {minimumFractionDigits: 2})或者new Number("1234567").toLocaleString('en-US', {minimumFractionDigits: 2})代替。它不能工作是因为你在一个字符串上使用它，而不是一个数字。 - uKolkaen-US。let number = 1234567890; // Example number to be converted
9007199254740991。
// 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"
let number = 1234567890;
let nf = new Intl.NumberFormat('en-US');
nf.format(number); // "1,234,567,890"
toLocaleString 在 Safari 上可以工作，但选项无效。 - dandavisminimumFractionDigits: 2以确保固定的小数位数。https://dev59.com/RFwZ5IYBdhLWcg3wVfAC - SharpC我建议使用phpjs.org的number_format()
function number_format(number, decimals, dec_point, thousands_sep) {
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
toFixedFix = function (n, prec) {
// Fix for IE parseFloat(0.55).toFixed(0) = 0;
var k = Math.pow(10, prec);
return Math.round(n * k) / k;
},
s = (prec ? toFixedFix(n, prec) : Math.round(n)).toString().split('.');
if (s[0].length > 3) {
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
return s.join(dec);
}
更新 02/13/14
有人报告说这不像预期的那样工作，所以我做了一个包含自动化测试的JS Fiddle。
更新 26/11/2017
这里是将该 fiddle 作为 Stack Snippet 的结果，输出略有修改:
function number_format(number, decimals, dec_point, thousands_sep) {
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
toFixedFix = function (n, prec) {
// Fix for IE parseFloat(0.55).toFixed(0) = 0;
var k = Math.pow(10, prec);
return Math.round(n * k) / k;
},
s = (prec ? toFixedFix(n, prec) : Math.round(n)).toString().split('.');
if (s[0].length > 3) {
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
return s.join(dec);
}
var exampleNumber = 1;
function test(expected, number, decimals, dec_point, thousands_sep)
{
var actual = number_format(number, decimals, dec_point, thousands_sep);
console.log(
'Test case ' + exampleNumber + ': ' +
'(decimals: ' + (typeof decimals === 'undefined' ? '(default)' : decimals) +
', dec_point: "' + (typeof dec_point === 'undefined' ? '(default)' : dec_point) + '"' +
', thousands_sep: "' + (typeof thousands_sep === 'undefined' ? '(default)' : thousands_sep) + '")'
);
console.log(' => ' + (actual === expected ? 'Passed' : 'FAILED') + ', got "' + actual + '", expected "' + expected + '".');
exampleNumber++;
}
test('1,235', 1234.56);
test('1 234,56', 1234.56, 2, ',', ' ');
test('1234.57', 1234.5678, 2, '.', '');
test('67,00', 67, 2, ',', '.');
test('1,000', 1000);
test('67.31', 67.311, 2);
test('1,000.6', 1000.55, 1);
test('67.000,00000', 67000, 5, ',', '.');
test('1', 0.9, 0);
test('1.20', '1.20', 2);
test('1.2000', '1.20', 4);
test('1.200', '1.2000', 3);.as-console-wrapper {
max-height: 100% !important;
}这是@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] : "");
}
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
使用正则表达式
function toCommas(value) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
console.log(toCommas(123456789)); // 123,456,789
console.log(toCommas(1234567890)); // 1,234,567,890
console.log(toCommas(1234)); // 1,234
var number = 123456.789;
// request a currency format
console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
// → 123.456,79 €
// the Japanese yen doesn't use a minor unit
console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
// → ￥123,457
// limit to three significant digits
console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
// → 1,23,000
参考 MDN:Number.prototype.toLocaleString()
使用 Intl.NumberFormat()
var number = 123456.789;
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// expected output: "123.456,79 €"
// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// expected output: "￥123,457"
// limit to three significant digits
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
// expected output: "1,23,000"
DEMO AT HERE
<script type="text/javascript">
// Using Regular expression
function toCommas(value) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function commas() {
var num1 = document.myform.number1.value;
// Using Regular expression
document.getElementById('result1').value = toCommas(parseInt(num1));
// Using toLocaleString()
document.getElementById('result2').value = parseInt(num1).toLocaleString('ja-JP', {
style: 'currency',
currency: 'JPY'
});
// Using Intl.NumberFormat()
document.getElementById('result3').value = new Intl.NumberFormat('ja-JP', {
style: 'currency',
currency: 'JPY'
}).format(num1);
}
</script>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE="123456789">
<br>
<INPUT TYPE="button" NAME="button" Value="=>" onClick="commas()">
<br>Using Regular expression
<br>
<INPUT TYPE="text" ID="result1" NAME="result1" VALUE="">
<br>Using toLocaleString()
<br>
<INPUT TYPE="text" ID="result2" NAME="result2" VALUE="">
<br>Using Intl.NumberFormat()
<br>
<INPUT TYPE="text" ID="result3" NAME="result3" VALUE="">
</FORM>Performance
原生JS函数。支持IE11、Edge、最新版Safari、Chrome、Firefox、Opera、iOS上的Safari和Android上的Chrome。
var number = 3500;
console.log(new Intl.NumberFormat().format(number));
// → '3,500' if in US English locale
我对这个问题得到的答案数量印象深刻。我喜欢uKolka的回答：
n.toLocaleString()
但不幸的是，在一些像西班牙语这样的语境中，它对于小于10,000的数字（在我看来）并不像预期的那样有效：
Number(1000).toLocaleString('ES-es')
给出1000而不是1.000。
请查看toLocaleString在所有浏览器中无法处理小于10000的数字了解原因。
所以我不得不使用Elias Zamaria的答案，选择正确的千位分隔符字符：
n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, Number(10000).toLocaleString().substring(2, 3))
这个一行代码可以适用于使用 , 或 . 作为千位分隔符的所有语言环境，并且在所有情况下从1,000开始生效。
Number(1000).toString().replace(/\B(?=(\d{3})+(?!\d))/g, Number(10000).toLocaleString().substring(2, 3))
使用西班牙语环境，将数字格式化为1.000。
如果您想要完全控制数字的格式，还可以尝试以下方法：
let number = 1234.567
let decimals = 2
let decpoint = '.' // Or Number(0.1).toLocaleString().substring(1, 2)
let thousand = ',' // Or Number(10000).toLocaleString().substring(2, 3)
let n = Math.abs(number).toFixed(decimals).split('.')
n[0] = n[0].split('').reverse().map((c, i, a) =>
i > 0 && i < a.length && i % 3 == 0 ? c + thousand : c
).reverse().join('')
let final = (Math.sign(number) < 0 ? '-' : '') + n.join(decpoint)
console.log(final)
给出1,234.57。
这个不需要正则表达式。首先用toFixed将数字调整到所需的小数位数，然后在小数点.周围进行除法运算。左侧变成一个数字数组，然后反转。然后从起始位置每三位数字添加一个千位分隔符并再次反转。最终结果是两部分的合并。如果必要的话，输入数字的符号可以先用Math.abs移除，然后再放回去。
虽然不是一行代码，但长度不长，很容易转换为一个函数。为了清晰起见，变量已经被添加，但如果预先知道它们的值，可以用所需的值替换它们。您可以使用使用toLocaleString的表达式作为查找当前区域设置的小数点和千位分隔符正确字符的方法（请注意，这些表达式需要更现代的Javascript）。
感谢大家的回复。我借鉴了其中一些答案，制作了一个更通用的解决方案。
第一个片段添加了一个函数，模仿PHP的 number_format() 函数到 Number 原型中。如果我正在格式化一个数值，我通常希望显示小数位数，所以该函数接受要显示的小数位数。一些国家使用逗号作为小数点分隔符，将小数和千位分隔符设置为小数点，因此该函数允许这些分隔符被设置。
Number.prototype.numberFormat = function(decimals, dec_point, thousands_sep) {
dec_point = typeof dec_point !== 'undefined' ? dec_point : '.';
thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ',';
var parts = this.toFixed(decimals).split('.');
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousands_sep);
return parts.join(dec_point);
}
var foo = 5000;
console.log(foo.numberFormat(2)); // us format: 5,000.00
console.log(foo.numberFormat(2, ',', '.')); // european format: 5.000,00
我发现我经常需要获取数字进行数学计算，但是parseFloat将5,000转换为5，只取整数值的第一个序列。因此，我创建了自己的浮点数转换函数，并将其添加到String原型中。
String.prototype.getFloat = function(dec_point, thousands_sep) {
dec_point = typeof dec_point !== 'undefined' ? dec_point : '.';
thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ',';
var parts = this.split(dec_point);
var re = new RegExp("[" + thousands_sep + "]");
parts[0] = parts[0].replace(re, '');
return parseFloat(parts.join(dec_point));
}
现在你可以按照以下方式使用这两个函数：
var foo = 5000;
var fooString = foo.numberFormat(2); // The string 5,000.00
var fooFloat = fooString.getFloat(); // The number 5000;
console.log((fooString.getFloat() + 1).numberFormat(2)); // The string 5,001.00
var parts = this.toFixed(decimals).toString().split('.'); - vbwxnumberFormat已经在ES4中，并且支持哪些浏览器：chrome 24+，FF 29+，IE11+。只有在这之后，您应该提供一个可选的polyfill，而不是每个人都需要。 - vsync
Number.prototype.toLocaleString在Safari浏览器中仍然不起作用。它只是返回数字本身，而没有错误抛出。由于这个问题，今天我感到非常无语... #goodworkApple - aendra