Tambahkan koma ke angka setiap tiga digit

160

Bagaimana saya bisa memformat angka menggunakan pemisah koma setiap tiga digit menggunakan jQuery?

Sebagai contoh:

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

jquery number-formatting

— Steve
sumber

Saya baru mengenal jQuery dan ingin fungsi / plugin sederhana yang hanya menambahkan koma setiap tiga digit jika panjangnya lebih dari tiga digit. Hanya angka positif, tidak ada pecahan, tidak ada desimal, tidak ada mata uang yang terlibat, dan format AS standar (1.111) tidak ($ 1.111 atau $ 1.111.11). Saya lebih suka telah selesai menggunakan jQuery dan bukan hanya javascript jika mungkin dan akan lebih baik mengatur kode yang diatur ke fungsi sehingga dapat diterapkan dengan sangat mudah. Bagaimana cara saya melakukan itu? Hargai masukan semua orang. Terima kasih lagi.

— Steve

2

@unknown: Anda sudah memiliki banyak jawaban. Lihatlah jawaban yang telah Anda terima dan evaluasi untuk melihat mana yang terbaik untuk Anda. Jika Anda membutuhkan lebih banyak klarifikasi untuk salah satu jawaban, kirimkan sebagai komentar untuk jawaban itu.

— Mark Byers

1

Maaf pertanyaan saya tidak cukup ringkas tetapi lihat format plugin Doug Neiner menggunakan kode Paul Creasey untuk jawabannya.

— Steve

241

@ Paul Creasey memiliki solusi paling sederhana sebagai regex, tapi ini dia sebagai plugin jQuery sederhana:

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

Anda kemudian dapat menggunakannya seperti ini:

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

— Doug Neiner
sumber

4

Bekerja dengan sempurna! Terima kasih kepada Paul Creasey untuk sederhana, kode elegan dan terima kasih kepada Doug Neiner karena meletakkannya dalam format plugin. Kredit diberikan untuk keduanya.

— Steve

4

RC @Mark Byers Sintaksnya benar. '999.9999'.replace (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1,") mengembalikan' 999.9.999 '.

— Bendewey

6

Membuat sedikit mod untuk bidang input:

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

— mpemburn

3

Saya pikir ini akan lebih cocok untuk fungsi gaya utilitas spasi nama-jQuery, misalnya $.digits = function() { ... };.

— alex

63

Cara tercepat adalahnumber.toLocaleString("en");

— Derek 朕會功夫

95

Anda bisa menggunakan Number.toLocaleString():

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

Luaskan cuplikan

— Abhijeet
sumber

Saya sudah mencobanya, tetapi tidak bekerja di server langsung, tetapi bekerja di localhost ..

— Abed Putra

1

@eladsilver w3schools.com/jsref/jsref_tolocalestring.asp di semua browser

— ricks

Ini bekerja paling mudah bagi saya. Saya membutuhkan mata uang dan koma. Saya bisa mengatur properti juga:

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

— AWP

78

Sesuatu seperti ini jika Anda masuk ke regex, tidak yakin dengan sintaks yang tepat untuk ganti tho!

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

— Paul Creasey
sumber

2

Sintaksnya benar. '999.9999'.replace (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1,") mengembalikan' 999.9.999 '.

— Mark Byers

@ Tidak Diketahui, saya memindahkannya ke sebuah jawaban. Lebih jauh di bawah halaman ini dengan contoh penggunaan.

— Doug Neiner

27

Anda bisa mencoba NumberFormatter .

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

Ini juga mendukung berbagai lokasi, termasuk tentu saja AS.

Berikut adalah contoh yang sangat sederhana tentang cara menggunakannya:

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

Keluaran:

1,000
2,000,000

— Mark Byers
sumber

Saya melirik plugin ini dan dari deskripsi penulis, itu dimaksudkan untuk digunakan dalam kolom input formulir. Bagaimana saya bisa menerapkannya untuk diterapkan ke <span class = "numbers"> 2984 </span> sehingga formatnya ke <span class = "numbers"> 2.984 </span> tanpa desimal. Saya mencoba format $ ('span.numbers'). ({Format: "#, ###", lokal: "us"}); tapi tidak ada yang terjadi. Masih mengeluarkan plugin, bermain-main dengannya. Maaf saya seorang pemula jQuery :-)

— Steve

+1 Sangat menyenangkan untuk mengetahui tentang plugin ini. Saya setuju bahwa untuk pertumbuhan dan internasionalisasi di masa depan, ini akan menjadi rute terbaik untuk diikuti.

— Doug Neiner

Inilah tautan ke repo GitHub-nya. github.com/hardhub/jquery-numberformatter

— Mwangi Thiga

22

Ini bukan jQuery, tetapi ini bekerja untuk saya. Diambil dari situs ini .

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

— sinar
sumber

1

Sangat "akar" dari Anda :)

— MonoThreaded

"Rootsy" mungkin saja, tetapi saya tidak berpikir pendekatan fancy-pants lainnya akan berhasil dalam situasi saya, di mana data tertanam dalam Canvas (Chart.JS). Tetapi menambahkan fungsi itu dan memanggilnya di acara afterDraw () grafik bekerja dengan baik: ctx.fillText (addCommas (dataset.data [i]),

— B. Clay Shannon

Ini tidak berfungsi misalnya 3000000 (7 digit). hanya untuk 6 digit dan lebih sedikit!

— Mostafa Norzade

21

Gunakan Nomor fungsi ();

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

Luaskan cuplikan

— bamossza
sumber

Terima kasih, saya menggunakan jawaban Anda. Mungkin perlu dicatat bahwa ini hanya mendukung angka hingga 15 digit.

— tallpaul

21

2016 Jawaban:

Javascript memiliki fungsi ini, jadi tidak perlu untuk Jquery.

yournumber.toLocaleString("en");

— Kamy D
sumber

2

Apakah ini akan berfungsi di semua browser? Ini berfungsi dengan baik pada chrome. Apakah ini akan berfungsi pada IE9 + & opera, safari?

— zeppelin

@zeppelin w3schools.com/jsref/jsref_tolocalestring.asp mendukung semua browser

— ricks

1

Pastikan nomor yang Anda panggil itu adalah tipe angka (int, float, dll.) Dan bukan string.

— el3ati2

16

Solusi yang lebih menyeluruh

Inti dari ini adalah replacepanggilan. Sejauh ini, saya tidak berpikir salah satu solusi yang diusulkan menangani semua kasus berikut:

Integer: 1000 => '1,000'
String: '1000' => '1,000'
Untuk string:
- Mempertahankan nol setelah desimal: 10000.00 => '10,000.00'
- Buang angka nol di depan sebelum desimal: '01000.00 => '1,000.00'
- Tidak menambahkan koma setelah desimal: '1000.00000' => '1,000.00000'
- Tetap memimpin -atau +:'-1000.0000' => '-1,000.000'
- Pengembalian, string yang tidak dimodifikasi, mengandung non-digit: '1000k' => '1000k'

Fungsi berikut melakukan semua hal di atas.

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

Anda bisa menggunakannya dalam plugin jQuery seperti ini:

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

— Nathan Long
sumber

9

Anda juga dapat melihat plugin FormatCurrency jquery (yang saya penulisnya); ia memiliki dukungan untuk beberapa lokal juga, tetapi mungkin memiliki overhead dukungan mata uang yang tidak Anda butuhkan.

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

— bendewey
sumber

4

pertanyaan ini memodulasi saya untuk merilis v1.3 dari plugin ini, jadi terima kasih

— bendewey

3

Ini javascript saya, hanya diuji pada firefox dan 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>

— Lam
sumber

1

Cara yang sangat mudah adalah dengan menggunakan toLocaleString()fungsi

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

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

— Rifkan Razak
sumber

1

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

Anda dapat mencoba ini, ini berhasil untuk saya

— benoit1521
sumber