在 jQuery 中为数字添加逗号

IT技术 javascript jquery formatting numbers
2021-02-11 07:01:50

我有这些数字

109998094456

我想要做的就是在需要时在正确的位置添加一个逗号,因此它看起来像这样

10,9998,094456

这些都在像这样的 ap 标签中<p class="points">10999</p>

可以做到吗?

我在其他帖子http://jsfiddle.net/pdWTU/1/的帮助下在这里尝试过,但似乎无法让它工作

谢谢

杰米

更新

有点混乱并设法在这里弄清楚http://jsfiddle.net/W5jwY/1/

将查看新的全球化插件以获得更好的方法

谢谢

杰米

6个回答

适用于所有浏览器,这就是您所需要的。

  function commaSeparateNumber(val){
    while (/(\d+)(\d{3})/.test(val.toString())){
      val = val.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
    }
    return val;
  }

由于正则表达式,因此将其编写得紧凑且切中要害。这是直接的 JS,但您可以像这样在 jQuery 中使用它:

$('#elementID').html(commaSeparateNumber(1234567890));

或者

$('#inputID').val(commaSeparateNumber(1234567890));

但是,如果您需要更清洁、更灵活的东西。下面的代码将正确修复小数,删除前导零,并且可以无限使用。感谢评论中的@baacke。

  function commaSeparateNumber(val){
   val = val.toString().replace(/,/g, ''); //remove existing commas first
   var valRZ = val.replace(/^0+/, ''); //remove leading zeros, optional
   var valSplit = valRZ.split('.'); //then separate decimals
    
   while (/(\d+)(\d{3})/.test(valSplit[0].toString())){
    valSplit[0] = valSplit[0].toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
   }

   if(valSplit.length == 2){ //if there were decimals
    val = valSplit[0] + "." + valSplit[1]; //add decimals back
   }else{
    val = valSplit[0]; }

   return val;
  }

在你的 jQuery 中,像这样使用:

$('.your-element').each(function(){
  $(this).html(commaSeparateNumber($(this).html()));
});

这是jsFiddle

这个答案有两个问题: 1. 多次使用相同的值调用函数会导致逗号出现在错误的地方(例如,keyup 事件)。2. 此函数不能正确处理小数,会在小数中添加逗号。请参阅此JSFiddle以获取修复两者的修改版本。
2021-03-17 07:01:50
@baacke 这个函数的想法很简单,所以我没有考虑在同一个 var 或小数上调用它两次(因为它不在问题中)。无论哪种方式,您的小提琴示例对于您需要小数的情况都很有用,所以谢谢您。
2021-04-01 07:01:50
user1655655 的答案更好
2021-04-10 07:01:50
逗号或句点出现的位置由区域设置决定。JS 标准库已经可以为您做到这一点。developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
2021-04-10 07:01:50
Number(10000).toLocaleString('en');  // "10,000"
这在浏览器之间不一致,在 iPad 上根本不起作用。
2021-03-15 07:01:50
这是最简单的解决方案,非常适合我。谢谢!
2021-03-25 07:01:50
对于任何希望在 Node.js 中使用它的人,除非您重新编译 v8 引擎以包含 i18n,否则它将无法工作:stackoverflow.com/questions/23571043/...
2021-03-25 07:01:50
这很棒,并且适用于大多数桌面浏览器,但要注意它现在在移动浏览器中的支持有限... developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ ...
2021-03-30 07:01:50
谢谢你的提示,比编写自定义函数或包含插件要好得多。对我来说答案#1!
2021-04-13 07:01:50

Timothy Pirez 的回答非常正确,但是如果您需要在用户在文本字段中输入时立即用逗号替换数字,您可能想要使用 Keyup 功能。

      $('#textfield').live('keyup', function (event) {
        var value=$('#textfield').val();

      if(event.which >= 37 && event.which <= 40){
          event.preventDefault();
      }
      var newvalue=value.replace(/,/g, '');   
      var valuewithcomma=Number(newvalue).toLocaleString('en');   
      $('#textfield').val(valuewithcomma); 

      });

    <form><input type="text" id="textfield" ></form>

看看微软最近发布的jQuery全球化插件

看看Numeral.js它可以格式化数字、货币、百分比并支持本地化。