可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
How can I format numbers using a comma separator every three digits using jQuery?
For example:
╔═══════════╦═════════════╗
║ Input ║ Output ║
╠═══════════╬═════════════╣
║ 298 ║ 298 ║
║ 2984 ║ 2,984 ║
║ 297312984 ║ 297,312,984 ║
╚═══════════╩═════════════╝
回答1:
@Paul Creasey had the simplest solution as the regex, but here it is as a simple jQuery plugin:
$.fn.digits = function(){
return this.each(function(){
$(this).text( $(this).text().replace(/(\\d)(?=(\\d\\d\\d)+(?!\\d))/g, \"$1,\") );
})
}
You could then use it like this:
$(\"span.numbers\").digits();
回答2:
Something like this if you\'re into regex, not sure of the exact syntax for the replace tho!
MyNumberAsString.replace(/(\\d)(?=(\\d\\d\\d)+(?!\\d))/g, \"$1,\");
回答3:
You could use Number.toLocaleString()
:
var number = 1557564534;
document.body.innerHTML = number.toLocaleString();
// 1,557,564,534
回答4:
You could try NumberFormatter.
$(this).format({format:\"#,###.00\", locale:\"us\"});
It also supports different locales, including of course US.
Here\'s a very simplified example of how to use it:
<html>
<head>
<script type=\"text/javascript\" src=\"jquery.js\"></script>
<script type=\"text/javascript\" src=\"jquery.numberformatter.js\"></script>
<script>
$(document).ready(function() {
$(\".numbers\").each(function() {
$(this).format({format:\"#,###\", locale:\"us\"});
});
});
</script>
</head>
<body>
<div class=\"numbers\">1000</div>
<div class=\"numbers\">2000000</div>
</body>
</html>
Output:
1,000
2,000,000
回答5:
This is not jQuery, but it works for me. Taken from this site.
function addCommas(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;
}
回答6:
Use function Number();
$(function() {
var price1 = 1000;
var price2 = 500000;
var price3 = 15245000;
$(\"span#s1\").html(Number(price1).toLocaleString(\'en\'));
$(\"span#s2\").html(Number(price2).toLocaleString(\'en\'));
$(\"span#s3\").html(Number(price3).toLocaleString(\'en\'));
console.log(Number(price).toLocaleString(\'en\'));
});
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></script>
<span id=\"s1\"></span><br />
<span id=\"s2\"></span><br />
<span id=\"s3\"></span><br />
回答7:
2016 Answer:
Javascript has this function, so no need for Jquery.
yournumber.toLocaleString(\"en\");
回答8:
A more thorough solution
The core of this is the replace
call. So far, I don\'t think any of the proposed solutions handle all of the following cases:
- Integers:
1000 => \'1,000\'
- Strings:
\'1000\' => \'1,000\'
- For strings:
- Preserves zeros after decimal:
10000.00 => \'10,000.00\'
- Discards leading zeros before decimal:
\'01000.00 => \'1,000.00\'
- Does not add commas after decimal:
\'1000.00000\' => \'1,000.00000\'
- Preserves leading
-
or +
: \'-1000.0000\' => \'-1,000.000\'
- Returns, unmodified, strings containing non-digits:
\'1000k\' => \'1000k\'
The following function does all of the above.
addCommas = function(input){
// If the regex doesn\'t match, `replace` returns the string unmodified
return (input.toString()).replace(
// Each parentheses group (or \'capture\') in this regex becomes an argument
// to the function; in this case, every argument after \'match\'
/^([-+]?)(0?)(\\d+)(.?)(\\d+)$/g, function(match, sign, zeros, before, decimal, after) {
// Less obtrusive than adding \'reverse\' method on all strings
var reverseString = function(string) { return string.split(\'\').reverse().join(\'\'); };
// Insert commas every three characters from the right
var insertCommas = function(string) {
// Reverse, because it\'s easier to do things from the left
var reversed = reverseString(string);
// Add commas every three characters
var reversedWithCommas = reversed.match(/.{1,3}/g).join(\',\');
// Reverse again (back to normal)
return reverseString(reversedWithCommas);
};
// If there was no decimal, the last capture grabs the final digit, so
// we have to put it back together with the \'before\' substring
return sign + (decimal ? insertCommas(before) + decimal + after : insertCommas(before + after));
}
);
};
You could use it in a jQuery plugin like this:
$.fn.addCommas = function() {
$(this).each(function(){
$(this).text(addCommas($(this).text()));
});
};
回答9:
You can also look at the jquery FormatCurrency plugin (of which I am the author); it has support for multiple locales as well, but may have the overhead of the currency support that you don\'t need.
$(this).formatCurrency({ symbol: \'\', roundToDecimalPlace: 0 });