每三位数字加逗号

160

如何使用jQuery每隔三个数字使用逗号分隔符格式化数字？

例如：

╔═══════════╦═════════════╗
║   Input   ║   Output    ║
╠═══════════╬═════════════╣
║       298 ║         298 ║
║      2984 ║       2,984 ║
║ 297312984 ║ 297,312,984 ║
╚═══════════╩═════════════╝

jquery number-formatting

— 史蒂夫
source

我是jQuery的新手，并且想要一个简单的函数/插件，如果数字长于三位数，则只需在每三位数后添加逗号。仅包含正数，不包含小数，不包含小数，不涉及货币，不包含美国标准格式（1,111）（$ 1,111或$ 1,111.11）。如果可能的话，我宁愿使用jQuery也不只是使用javascript，最好将代码集设置为一个函数，以便可以非常容易地应用它。我该怎么做呢？感谢每个人的投入。再次感谢。

— 史蒂夫

2

@未知：您已经有很多答案。查看收到的答案并进行评估，以找出最适合您的答案。如果您需要其中一个答案的更多说明，请将其作为对该答案的评论。

— Mark Byers

1

抱歉，我的问题不够简洁，但是请使用Paul Creasey的代码查看Doug Neiner插件格式作为答案。

— 史蒂夫

241

@Paul Creasey具有最简单的正则表达式解决方案，但这里是一个简单的jQuery插件：

$.fn.digits = function(){ 
    return this.each(function(){ 
        $(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); 
    })
}

然后，您可以像这样使用它：

$("span.numbers").digits();

— 道格·尼纳
source

4

完美的作品！感谢Paul Creasey提供了简单而优雅的代码，并感谢Doug Neiner将其以插件格式放置。双方都给予好评。

— 史蒂夫

4

RC @Mark Byers语法正确。'999.9999'.replace（/（\ d）（？=（\ d \ d \ d）+（？！\ d））/ g，“ $ 1，”）虽然返回'999.9,999'。

— bentewey 2010年

6

对输入字段做了一个小小的修改：

$.fn.digits = function(){     return this.each(function(){         $(this).val( $(this).val().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );     }) }

— mpemburn'1

3

我认为这将更适合jQuery名称分隔的实用程序样式函数，例如$.digits = function() { ... };。

— alex 2013年

63

最快的方法是number.toLocaleString("en");

— Derek朕会功夫2014年

95

您可以使用Number.toLocaleString()：

var number = 1557564534;
document.body.innerHTML = number.toLocaleString();
// 1,557,564,534

展开摘要

— 阿比耶耶
source

我已经尝试，但没有实际运作的服务器上，但在本地主机上的工作..

— 阿贝德·普特拉

1

在所有浏览器中的@eladsilver w3schools.com/jsref/jsref_tolocalestring.asp

— ricks

这对我来说最简单。我需要货币和逗号。我还可以设置属性：

var n = 26787.89 var myObjCurrency = {   style: "currency",   currency: "USD",   currencyDisplay : "symbol" } n.toLocaleString("en-US", myObjCurrency));

— AWP

78

如果您正在使用正则表达式，则无法确定替换tho的确切语法！

MyNumberAsString.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

— 保罗·克雷西
source

2

语法正确。'999.9999'.replace（/（\ d）（？=（\ d \ d \ d）+（？！\ d））/ g，“ $ 1，”）虽然返回'999.9,999'。

— Mark Byers 2010年

@未知，我将其移至答案。在此页面的更下方是用法示例。

— Doug Neiner'1

27

您可以尝试NumberFormatter。

$(this).format({format:"#,###.00", locale:"us"});

它还支持不同的语言环境，当然包括美国。

这是一个非常简单的用法示例：

<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>

输出：

1,000
2,000,000

— 马克·拜尔斯
source

我看了一眼这个插件，并从作者的描述中得知，它打算在表单输入字段中使用。我如何才能将其应用于<span class =“ numbers”> 2984 </ span>，以便将其格式化为<span class =“ numbers”> 2,984 </ span>，不带小数。我尝试了$（'span.numbers'）。format（{format：“＃，###”，locale：“ us”}））; 但是什么也没发生。仍在检查插件，玩弄它。抱歉，我是jQuery新手:-)

— Steve

+1非常了解此插件。我同意，对于增长和未来的国际化，这将是最好的选择。

— Doug Neiner'1

这是其GitHub存储库的链接。github.com/hardhub/jquery-numberformatter

— Mwangi Thiga

22

这不是jQuery，但对我有用。取自本网站。

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

— 射线
source

1

非常“扎根”的人:)

— MonoThreaded

可能是“粗鲁的”，但我认为其他情况并不适用，因为我的情况是将数据嵌入到Canvas（Chart.JS）中。但是添加该函数并在图表的afterDraw（）事件中调用它可以很好地工作：ctx.fillText（addCommas（dataset.data [i]），

— B. Clay Shannon

例如，这不起作用3000000（7位数字）。仅用于6位以下的数字！

— Mostafa Norzade

21

使用函数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 />

展开摘要

— 巴莫萨
source

谢谢，我用你的答案。可能值得注意的是，该方法仅支持长度不超过15位的数字。

— tallpaul 2015年

21

2016年答案：

JavaScript具有此功能，因此不需要Jquery。

yournumber.toLocaleString("en");

— 凯米·D
source

2

可以在所有浏览器上使用吗？在chrome上工作正常。可以在IE9 +和Opera，Safari中使用吗？

— zeppelin

@zeppelin w3schools.com/jsref/jsref_tolocalestring.asp支持所有浏览器

— ricks 18-10-12

1

只要确保您调用的数字是数字类型（int，float等），而不是字符串即可。

— el3ati2

16

更彻底的解决方案

这是replace呼叫的核心。到目前为止，我认为所提出的解决方案均不能处理以下所有情况：

整数： 1000 => '1,000'
字串： '1000' => '1,000'
对于字符串：
- 小数点后保留零： 10000.00 => '10,000.00'
- 舍弃小数点前的前导零： '01000.00 => '1,000.00'
- 小数点后不添加逗号： '1000.00000' => '1,000.00000'
- 保留前导-或+：'-1000.0000' => '-1,000.000'
- 返回未修改的包含非数字的字符串： '1000k' => '1000k'

以下功能可完成上述所有操作。

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

您可以在jQuery插件中使用它，如下所示：

$.fn.addCommas = function() {
  $(this).each(function(){
    $(this).text(addCommas($(this).text()));
  });
};

— 内森·朗
source

9

您还可以查看jquery FormatCurrency插件（我是作者）；它也支持多种语言环境，但可能会带来不必要的货币支持开销。

$(this).formatCurrency({ symbol: '', roundToDecimalPlace: 0 });

— 本迪威
source

4

这个问题使我无法释放该插件的v1.3版本，所以谢谢

— bentewey 2010年

3

这是我的JavaScript，仅在Firefox和chrome上测试过

<html>
<header>
<script>
    function addCommas(str){
        return str.replace(/^0+/, '').replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    function test(){
        var val = document.getElementById('test').value;
        document.getElementById('test').value = addCommas(val);
    }
</script>
</header>
<body>
<input id="test" onkeyup="test();">
</body>
</html>

— 我是
source

1

非常简单的方法是使用toLocaleString()功能

tot = Rs.1402598 //Result : Rs.1402598

tot.toLocaleString() //Result : Rs.1,402,598

— 里夫坎·拉扎克（Rifkan Razak）
source

1

function formatNumberCapture () {
$('#input_id').on('keyup', function () {
    $(this).val(function(index, value) {
        return value
            .replace(/\D/g, "")
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            ;
    });
});

你可以试试看，对我有用

— benoit1521
source