Thêm dấu phẩy vào số mỗi ba chữ số

160

Làm cách nào tôi có thể định dạng số bằng cách sử dụng dấu tách dấu phẩy mỗi ba chữ số bằng jQuery?

Ví dụ:

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

jquery number-formatting

— Steve
nguồn

Tôi chưa quen với jQuery và muốn một hàm / plugin đơn giản chỉ thêm dấu phẩy sau mỗi ba chữ số nếu các số dài hơn ba chữ số. Chỉ các số dương, không có phân số, không có số thập phân, không liên quan đến tiền tệ và định dạng chuẩn của Hoa Kỳ (1.11) không ($ 1.11 hoặc $ 1.11.11). Tôi thà thực hiện bằng cách sử dụng jQuery và không chỉ javascript nếu có thể và sẽ rất hay khi đặt mã được đặt thành một hàm để nó có thể được áp dụng rất dễ dàng. Làm thế nào để tôi đi về làm điều đó? Đánh giá cao đầu vào của mọi người. Cảm ơn một lần nữa.

— Steve

2

@unknown: Bạn đã có nhiều câu trả lời. Nhìn vào câu trả lời bạn đã nhận được và đánh giá chúng để xem câu trả lời nào là tốt nhất cho bạn. Nếu bạn cần làm rõ hơn cho một trong những câu trả lời, hãy đăng nó dưới dạng nhận xét cho câu trả lời đó.

— Mark Byers

1

Xin lỗi, câu hỏi của tôi không đủ ngắn gọn nhưng hãy xem định dạng plugin Doug Neiner bằng mã của Paul Creasey để biết câu trả lời.

— Steve

241

@Paul Creasey có giải pháp đơn giản nhất là regex, nhưng ở đây nó là một plugin jQuery đơn giản:

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

Sau đó bạn có thể sử dụng nó như thế này:

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

— Doug Neiner
nguồn

4

Hoạt động hoàn hảo! Cảm ơn Paul Creasey vì đơn giản, mã thanh lịch và cảm ơn Doug Neiner đã đưa nó vào định dạng plugin. Tín dụng cho cả hai.

— Steve

4

RC @Mark Byers Cú pháp đúng. '999.9999'.replace (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1,") trả về' 999.9.999 'mặc dù.

— uốn cong

6

Tạo một mod nhỏ cho các trường đầu vào:

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

— mpemburn

3

Tôi nghĩ rằng điều này sẽ phù hợp hơn với một hàm kiểu tiện ích cách nhau tên jQuery, vd $.digits = function() { ... };.

— alex

63

Cách nhanh nhất lànumber.toLocaleString("en");

— Derek 朕會

95

Bạn có thể sử dụng Number.toLocaleString():

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

Mở rộng đoạn trích

— Bào tử
nguồn

Tôi đã thử nó, nhưng không hoạt động trên máy chủ trực tiếp, nhưng hoạt động trên localhost ..

— Abed Putra

1

@eladsilver w3schools.com/jsref/jsref_tolocalestring.asp trong tất cả các trình duyệt

— ricks

Điều này làm việc dễ dàng nhất đối với tôi. Tôi cần tiền tệ và dấu phẩy. Tôi cũng có thể thiết lập các thuộc tính:

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

— AWP

78

Một cái gì đó như thế này nếu bạn vào regex, không chắc chắn về cú pháp chính xác cho tho thay thế!

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

— Paul Creasey
nguồn

2

Cú pháp đúng. '999.9999'.replace (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1,") trả về' 999.9.999 'mặc dù.

— Mark Byers

@Un Unknown, tôi chuyển nó đến một câu trả lời. Nó nằm xa hơn trên trang này với ví dụ sử dụng.

— Doug Neiner

27

Bạn có thể thử NumberFormatter .

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

Nó cũng hỗ trợ các địa phương khác nhau, bao gồm cả Mỹ.

Đây là một ví dụ rất đơn giản về cách sử dụng nó:

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

Đầu ra:

1,000
2,000,000

— Đánh dấu
nguồn

Tôi đã xem qua plugin này và từ mô tả của tác giả, nó có nghĩa là được sử dụng trong các trường nhập mẫu. Làm cách nào tôi có thể áp dụng nó để được áp dụng cho <span class = "Numbers"> 2984 </ span> để nó định dạng thành <span class = "Numbers"> 2.984 </ span> mà không cần số thập phân. Tôi đã thử định dạng $ ('span.numbers'). ({Format: "#, ###", ngôn ngữ: "chúng tôi"}); nhưng không có gì xảy ra Vẫn đang kiểm tra plugin, chơi xung quanh nó. Xin lỗi tôi là người mới sử dụng jQuery :-)

— Steve

+1 Tuyệt vời để biết về plugin này. Tôi đồng ý rằng để tăng trưởng và quốc tế hóa trong tương lai, đây sẽ là con đường tốt nhất để đi theo.

— Doug Neiner

Đây là liên kết đến repo GitHub của nó. github.com/hardhub/jquery-numberformatter

— Mwangi Thiga

22

Đây không phải là jQuery, nhưng nó hoạt động với tôi. Lấy từ trang web này .

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

— cá đuối
nguồn

1

Rất "gốc rễ" của bạn :)

— MonoThreaded

Có thể là "Rootsy", nhưng tôi không nghĩ các cách tiếp cận quần lạ mắt khác sẽ có hiệu quả trong tình huống của tôi, nơi dữ liệu được nhúng trong Canvas (Biểu đồ.JS). Nhưng việc thêm chức năng đó và gọi nó trong sự kiện afterDraw () của biểu đồ hoạt động hoàn hảo: ctx.fillText (addCommas (tập dữ liệu.data [i]),

— B. Clay Shannon

Điều này không hoạt động ví dụ 3000000 (7 chữ số). chỉ cho 6 chữ số trở xuống!

— Mostafa Norzade

21

Sử dụng hàm Số ();

$(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 />

Mở rộng đoạn trích

— bamossza
nguồn

Cảm ơn, tôi đã sử dụng câu trả lời của bạn. Có thể đáng lưu ý rằng điều này chỉ hỗ trợ các số có độ dài tối đa 15 chữ số.

— Tallpaul

21

Trả lời năm 2016:

Javascript có chức năng này, vì vậy không cần Jquery.

yournumber.toLocaleString("en");

— Kamy D
nguồn

2

Điều này sẽ làm việc trên tất cả các trình duyệt? Nó hoạt động tốt trên chrome. Nó sẽ hoạt động trên IE9 + & opera, safari?

— zeppelin

@zeppelin w3schools.com/jsref/jsref_tolocalestring.asp hỗ trợ tất cả các trình duyệt

— ricks

1

Chỉ cần đảm bảo số bạn gọi nó là loại số (int, float, v.v.) chứ không phải là một chuỗi.

— el3ati2

16

Một giải pháp kỹ lưỡng hơn

Cốt lõi của điều này là replacecuộc gọi. Cho đến nay, tôi không nghĩ bất kỳ giải pháp đề xuất nào xử lý tất cả các trường hợp sau:

Số nguyên: 1000 => '1,000'
Dây: '1000' => '1,000'
Đối với chuỗi:
- Bảo toàn số không sau số thập phân: 10000.00 => '10,000.00'
- Loại bỏ các số 0 đứng đầu trước số thập phân: '01000.00 => '1,000.00'
- Không thêm dấu phẩy sau số thập phân: '1000.00000' => '1,000.00000'
- Bảo tồn hàng đầu -hoặc +:'-1000.0000' => '-1,000.000'
- Trả về, không sửa đổi, các chuỗi chứa các chữ số không: '1000k' => '1000k'

Các chức năng sau đây làm tất cả các bên trên.

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

Bạn có thể sử dụng nó trong một plugin jQuery như thế này:

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

— Long Long
nguồn

9

Bạn cũng có thể xem plugin jquery FormatCurrency (trong đó tôi là tác giả); nó cũng hỗ trợ cho nhiều địa phương, nhưng có thể có chi phí hỗ trợ tiền tệ mà bạn không cần.

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

— uốn cong
nguồn

4

câu hỏi này đã điều chỉnh tôi để phát hành v1.3 của plugin này, vì vậy xin cảm ơn

— uốn cong

3

Đây là javascript của tôi, chỉ được thử nghiệm trên firefox và 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>

— Lâm
nguồn

1

Cách rất dễ là sử dụng toLocaleString()chức năng

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

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

— Súng trường Razkan
nguồn

1

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

Bạn có thể thử nó, nó làm việc cho tôi

— benoit1521
nguồn