Add comma to numbers every three digits

2019-01-01 10:05发布

问题:

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