我想使用JavaScript格式化数字。
例如：
10 => 10.00
100 => 100.00
1000 => 1,000.00
10000 => 10,000.00
100000 => 100,000.00
答案 0 :(得分：132)
如果您想使用内置代码，可以将toLocaleString()与minimumFractionDigits一起使用，但toLocaleString() is limited上的扩展选项的浏览器兼容性。
var n = 100000;
var value = n.toLocaleString(
undefined, // leave undefined to use the browser's locale,
// or use a string like 'en-US' to override it.
{ minimumFractionDigits: 2 }
);
console.log(value);
// In en-US, logs '100,000.00'
// In de-DE, logs '100.000,00'
// In hi-IN, logs '1,00,000.00'
如果您使用的是Node.js，则需will need to npm install intl个包。
答案 1 :(得分：32)
简短解决方案：
var n = 1234567890;
String(n).replace(/(.)(?=(\d{3})+$)/g,'$1,')
// "1,234,567,890"
答案 2 :(得分：29)
使用
num = num.toFixed(2);
其中2是小数位数
编辑：
这是根据需要格式化数字的功能
function formatNumber(number)
{
number = number.toFixed(2) + '';
x = number.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
Sorce：www.mredkj.com
答案 3 :(得分：27)
由于JasperV发现的错误 - 好点！ - 我改写了我的旧代码。我想我只用过两位小数的正值。
根据你想要实现的目标，你可能想要舍入或不舍入，所以这里有两个版本分开。
我已经引入了toFixed()方法，因为它可以更好地处理到特定小数位的舍入，并得到很好的支持。但它确实减慢了速度。
此版本仍会分离小数，但使用的方法与以前不同。 w|0部分删除小数。有关这方面的更多信息，这是good answer。然后保留剩余的整数，将其存储在k中，然后再从原始数字中减去它，并自行留下小数。
另外，如果我们考虑负数，我们需要while循环（跳过三位数）直到我们点击b。在处理负数时，计算结果为1，以避免出现-,100.00
循环的其余部分与之前相同。
function formatThousandsWithRounding(n, dp){
var w = n.toFixed(dp), k = w|0, b = n < 0 ? 1 : 0,
u = Math.abs(w-k), d = (''+u.toFixed(dp)).substr(2, dp),
s = ''+k, i = s.length, r = '';
while ( (i-=3) > b ) { r = ',' + s.substr(i, 3) + r; }
return s.substr(0, i + 3) + r + (d ? '.'+d: '');
};
在下面的代码段中，您可以编辑数字以自行测试。
function formatThousandsWithRounding(n, dp){
var w = n.toFixed(dp), k = w|0, b = n < 0 ? 1 : 0,
u = Math.abs(w-k), d = (''+u.toFixed(dp)).substr(2, dp),
s = ''+k, i = s.length, r = '';
while ( (i-=3) > b ) { r = ',' + s.substr(i, 3) + r; }
return s.substr(0, i + 3) + r + (d ? '.'+d: '');
};
var dp;
var createInput = function(v){
var inp = jQuery('<input class="input" />').val(v);
var eql = jQuery('<span> = </span>');
var out = jQuery('<div class="output" />').css('display', 'inline-block');
var row = jQuery('<div class="row" />');
row.append(inp).append(eql).append(out);
inp.keyup(function(){
out.text(formatThousandsWithRounding(Number(inp.val()), Number(dp.val())));
});
inp.keyup();
jQuery('body').append(row);
return inp;
};
jQuery(function(){
var numbers = [
0, 99.999, -1000, -1000000, 1000000.42, -1000000.57, -1000000.999
], inputs = $();
dp = jQuery('#dp');
for ( var i=0; i<numbers.length; i++ ) {
inputs = inputs.add(createInput(numbers[i]));
}
dp.on('input change', function(){
inputs.keyup();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dp" type="range" min="0" max="5" step="1" value="2" title="number of decimal places?" />
这采用不同的路径并尝试避免数学计算（因为这会引入舍入或舍入误差）。如果你不想要舍入，那么你只是将事物作为一个字符串处理，即转换为两位小数的1000.999只会是1000.99而不是1001.00。
此方法避免使用.split()和RegExp()，但两者都比较慢。虽然我从迈克尔关于toLocaleString的答案中学到了一些新东西，但我也很惊讶地发现它是 - 从某种程度上说 - 是最慢的方法（至少在Firefox和Chrome中; Mac OSX）。
使用lastIndexOf()我们找到可能存在的小数点，从那里一切都差不多。在需要的地方保存带有额外0的填充。此代码限制为5位小数。在我的测试中，这是更快的方法。
var formatThousandsNoRounding = function(n, dp){
var e = '', s = e+n, l = s.length, b = n < 0 ? 1 : 0,
i = s.lastIndexOf('.'), j = i == -1 ? l : i,
r = e, d = s.substr(j+1, dp);
while ( (j-=3) > b ) { r = ',' + s.substr(j, 3) + r; }
return s.substr(0, j + 3) + r +
(dp ? '.' + d + ( d.length < dp ?
('00000').substr(0, dp - d.length):e):e);
};
var formatThousandsNoRounding = function(n, dp){
var e = '', s = e+n, l = s.length, b = n < 0 ? 1 : 0,
i = s.lastIndexOf('.'), j = i == -1 ? l : i,
r = e, d = s.substr(j+1, dp);
while ( (j-=3) > b ) { r = ',' + s.substr(j, 3) + r; }
return s.substr(0, j + 3) + r +
(dp ? '.' + d + ( d.length < dp ?
('00000').substr(0, dp - d.length):e):e);
};
var dp;
var createInput = function(v){
var inp = jQuery('<input class="input" />').val(v);
var eql = jQuery('<span> = </span>');
var out = jQuery('<div class="output" />').css('display', 'inline-block');
var row = jQuery('<div class="row" />');
row.append(inp).append(eql).append(out);
inp.keyup(function(){
out.text(formatThousandsNoRounding(Number(inp.val()), Number(dp.val())));
});
inp.keyup();
jQuery('body').append(row);
return inp;
};
jQuery(function(){
var numbers = [
0, 99.999, -1000, -1000000, 1000000.42, -1000000.57, -1000000.999
], inputs = $();
dp = jQuery('#dp');
for ( var i=0; i<numbers.length; i++ ) {
inputs = inputs.add(createInput(numbers[i]));
}
dp.on('input change', function(){
inputs.keyup();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dp" type="range" min="0" max="5" step="1" value="2" title="number of decimal places?" />
我将很快更新一个页内代码段演示，但现在这里有一个小提琴：
https://jsfiddle.net/bv2ort0a/2/
为什么要使用RegExp呢？ - 当牙签使用时，不要使用锤子，即使用字符串操作：
var formatThousands = function(n, dp){
var s = ''+(Math.floor(n)), d = n % 1, i = s.length, r = '';
while ( (i -= 3) > 0 ) { r = ',' + s.substr(i, 3) + r; }
return s.substr(0, i + 3) + r +
(d ? '.' + Math.round(d * Math.pow(10, dp || 2)) : '');
};
formatThousands( 1000000.42 );
首先剥离小数：
s = '1000000', d = ~ 0.42
从字符串末尾开始向后工作：
',' + '000'
',' + '000' + ',000'
通过添加剩余前缀和十进制后缀（四舍五入到dp没有小数点）来最终确定：
'1' + ',000,000' + '.42'
答案 4 :(得分：18)
在支持ECMAScript® 2016 Internationalization API Specification (ECMA-402)的浏览器上，您可以使用Intl.NumberFormat实例：
var nf = Intl.NumberFormat();
var x = 42000000;
console.log(nf.format(x)); // 42,000,000 in many locales
// 42.000.000 in many other locales
if (typeof Intl === "undefined" || !Intl.NumberFormat) {
console.log("This browser doesn't support Intl.NumberFormat");
} else {
var nf = Intl.NumberFormat();
var x = 42000000;
console.log(nf.format(x)); // 42,000,000 in many locales
// 42.000.000 in many other locales
}
答案 5 :(得分：6)
我认为通过这个jQuery-numberformatter你可以解决你的问题。
当然，这假设您在项目中使用jQuery没有问题。请注意，该功能与blur事件有关。
$("#salary").blur(function(){
$(this).parseNumber({format:"#,###.00", locale:"us"});
$(this).formatNumber({format:"#,###.00", locale:"us"});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/timdown/jshashtable/hashtable.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hardhub/jquery-numberformatter/src/jquery.numberformatter.js"></script>
<input type="text" id="salary">
答案 6 :(得分：5)
使用数字函数toFixed和此函数添加逗号。
function addCommas(nStr)
{
nStr += '';
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
n = 10000;
r = n.toFixed(2); //10000.00
addCommas(r); // 10,000.00
答案 7 :(得分：4)
function numberWithCommas(x) {
x=String(x).toString();
var afterPoint = '';
if(x.indexOf('.') > 0)
afterPoint = x.substring(x.indexOf('.'),x.length);
x = Math.floor(x);
x=x.toString();
var lastThree = x.substring(x.length-3);
var otherNumbers = x.substring(0,x.length-3);
if(otherNumbers != '')
lastThree = ',' + lastThree;
return otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree + afterPoint;
}
console.log(numberWithCommas(100000));
console.log(numberWithCommas(10000000));
1,00,000
1,00,00,000
答案 8 :(得分：3)
This是一篇关于您的问题的文章。 JavaScript中没有内置千位分隔符，因此您必须编写自己的函数（示例来自链接页面）：
function addSeperator(nStr){
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
答案 9 :(得分：2)
格式（地点= 0，数千=＆＃39;，＆＃39;，十进制=＆＃39;。＆＃39;）将数字格式化为可读字符串。如果地点未定义，将自动进行 确定地点。成千上万是用于成千上万的人物 分隔器。 decimal是用于小数点的字符。
示例：
(56782).format() > "56,782"
(56782).format(2) > "56,782.00"
(4388.43).format(2, ' ') > "4 388.43"
(4388.43).format(3, '.', ',') > "4.388,430"
答案 10 :(得分：2)
如果您要查找限制为三位有效数字的格式，例如：
1,23,45,67,890.123
使用：
number.toLocaleString('en-IN');
工作示例：
let number = 1234567890.123;
document.write(number.toLocaleString('en-IN'));
在Chrome v60.0.3112.113中测试
答案 11 :(得分：1)
让我也在这里抛出我的解决方案。为了便于阅读，我对每一行进行了评论，并提供了一些示例，因此它可能看起来很大。
function format(number) {
var decimalSeparator = ".";
var thousandSeparator = ",";
// make sure we have a string
var result = String(number);
// split the number in the integer and decimals, if any
var parts = result.split(decimalSeparator);
// if we don't have decimals, add .00
if (!parts[1]) {
parts[1] = "00";
}
// reverse the string (1719 becomes 9171)
result = parts[0].split("").reverse().join("");
// add thousand separator each 3 characters, except at the end of the string
result = result.replace(/(\d{3}(?!$))/g, "$1" + thousandSeparator);
// reverse back the integer and replace the original integer
parts[0] = result.split("").reverse().join("");
// recombine integer with decimals
return parts.join(decimalSeparator);
}
document.write("10 => " + format(10) + "<br/>");
document.write("100 => " + format(100) + "<br/>");
document.write("1000 => " + format(1000) + "<br/>");
document.write("10000 => " + format(10000) + "<br/>");
document.write("100000 => " + format(100000) + "<br/>");
document.write("100000.22 => " + format(100000.22) + "<br/>");
答案 12 :(得分：1)
这将为您提供逗号分隔值，并将固定表示法添加到结尾。
nStr="1000";
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
commaSeperated = x1 + x2 + ".00";
alert(commaSeperated);
答案 13 :(得分：0)
这大约是接受答案版本的3倍。它不会创建数组，并且最终会避免对整个数字的对象创建和字符串连接。如果您渲染大量值，这可能很有用，例如在桌子上。
function addThousandSeparators(number) {
var whole, fraction
var decIndex = number.lastIndexOf('.')
if (decIndex > 0) {
whole = number.substr(0, decIndex)
fraction = number.substr(decIndex)
} else {
whole = number
}
var rgx = /(\d+)(\d{3})/
while (rgx.test(whole)) {
whole = whole.replace(rgx, '$1' + ',' + '$2')
}
return fraction ? whole + fraction : whole
}
答案 14 :(得分：0)
function formatNumber1(number) {
var comma = ',',
string = Math.max(0, number).toFixed(0),
length = string.length,
end = /^\d{4,}$/.test(string) ? length % 3 : 0;
return (end ? string.slice(0, end) + comma : '') + string.slice(end).replace(/(\d{3})(?=\d)/g, '$1' + comma);
}
function formatNumber2(number) {
return Math.max(0, number).toFixed(0).replace(/(?=(?:\d{3})+$)(?!^)/g, ',');
}
答案 15 :(得分：0)
如果您使用的是jQuery，则可以使用format或number format插件。
答案 16 :(得分：0)
function formatThousands(n,dp,f) {
// dp - decimal places
// f - format >> 'us', 'eu'
if (n == 0) {
if(f == 'eu') {
return "0," + "0".repeat(dp);
}
return "0." + "0".repeat(dp);
}
/* round to 2 decimal places */
//n = Math.round( n * 100 ) / 100;
var s = ''+(Math.floor(n)), d = n % 1, i = s.length, r = '';
while ( (i -= 3) > 0 ) { r = ',' + s.substr(i, 3) + r; }
var a = s.substr(0, i + 3) + r + (d ? '.' + Math.round((d+1) * Math.pow(10,dp)).toString().substr(1,dp) : '');
/* change format from 20,000.00 to 20.000,00 */
if (f == 'eu') {
var b = a.toString().replace(".", "#");
b = b.replace(",", ".");
return b.replace("#", ",");
}
return a;
}