Her üç basamağa sayılara virgül ekleyin

160

JQuery kullanarak her üç basamakta bir virgül ayırıcı kullanarak sayıları nasıl biçimlendirebilirim?

Örneğin:

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

jquery number-formatting

— Steve
kaynak

Ben jQuery için yeniyim ve sayılar üç basamaktan uzunsa sadece her üç basamaktan sonra virgül ekleyen basit bir işlev / eklenti istiyorum. Yalnızca pozitif sayılar, kesir yok, ondalık yok, para birimi yok ve standart ABD biçimi (1,111) değil (1,111 dolar veya 1,111,11 dolar). Oldukça jQuery ve sadece javascript değil mümkünse kullanarak yapardı ve çok kolay uygulanabileceği şekilde bir fonksiyona ayarlanmış kod ayarlamak güzel olurdu. Bunu nasıl yapabilirim? Herkesin girdisini takdir edin. Tekrar teşekkürler.

— Steve

2

@unknown: Zaten birçok cevabınız var. Aldığınız cevaplara bakın ve hangisinin sizin için en iyi olduğunu görmek için bunları değerlendirin. Yanıtlardan biri için daha fazla açıklamaya ihtiyacınız varsa, bu yanıta bir yorum olarak gönderin.

— Mark Byers

1

Üzgünüm sorum kısa ve öz değildi ama cevap için Paul Creasey kodunu kullanarak Doug Neiner eklenti formatına bakınız.

— Steve

241

@ Paul Creasey, normal ifade olarak en basit çözüme sahipti, ancak burada basit bir jQuery eklentisi olarak:

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

Daha sonra şu şekilde kullanabilirsiniz:

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

— Doug Neiner
kaynak

4

Mükemmel çalışıyor! Paul Creasey'e sade, zarif kod ve Doug Neiner'e eklenti formatına eklediği için teşekkürler. Her ikisine de verilen kredi.

— Steve

4

RC @Mark Byers Sözdizimi doğru. '999.9999'. Değiştirin (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1,") '999.9,999' değerini döndürür.

— bendewey

6

Giriş alanları için hafif bir mod yaptı:

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

— mpemburn

3

Bu daha iyi bir jQuery ad aralıklı yardımcı stili işlevi, örneğin uygun olacağını düşünüyorum $.digits = function() { ... };.

— alex

64

En hızlı yolnumber.toLocaleString("en");

— Derek 朕會功夫

95

Şunları kullanabilirsiniz Number.toLocaleString():

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

Snippet'i genişlet

— Abhijeet
kaynak

— Abed Putra

1

@eladsilver w3schools.com/jsref/jsref_tolocalestring.asp tüm tarayıcılarda

— Ricks

Bu benim için en kolay işe yaradı. Para ve virgüllere ihtiyacım vardı. Ben de özellikleri ayarlamak başardı:

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

— AWP

78

Eğer regex içine iseniz böyle bir şey, yerine tho tam sözdizimi emin değilim!

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

— Paul Creasey
kaynak

2

Sözdizimi doğru. '999.9999'. Değiştirin (/ (\ d) (? = (\ D \ d \ d) + (?! \ D)) / g, "$ 1,") '999.9,999' değerini döndürür.

— Mark Byers

@Bilinmeyen, bir yanıta taşıdım. Kullanım örneği ile bu sayfada daha aşağıdadır.

— Doug Neiner

27

NumberFormatter'ı deneyebilirsiniz .

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

Ayrıca ABD dahil farklı yerel ayarları da destekler.

İşte nasıl kullanılacağına dair çok basit bir örnek:

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

Çıktı:

1,000
2,000,000

— Mark Byers
kaynak

Bu eklentiye bir göz attım ve yazarın açıklamasından, form giriş alanlarında kullanılması gerekiyordu. <Span class = "numbers"> 2984 </span> 'e uygulanmasını nasıl kabul edebilirim? $ ('Span.numbers'). Biçimini ({format: "#, ###", yerel ayar: "us"}) denedim; ama hiçbir şey olmadı. Hala eklentiyi inceliyor, onunla oynuyor. Üzgünüm ben bir jQuery acemi :-)

— Steve

+1 Bu eklenti hakkında bilmek çok güzel. Büyüme ve gelecekteki uluslararasılaşma için bunun izlenmesi gereken en iyi yol olacağını kabul ediyorum.

— Doug Neiner

İşte GitHub deposuna bağlantı. github.com/hardhub/jquery-numberformatter

— Mwangi Thiga

22

Bu jQuery değil, ama benim için çalışıyor. Alındığı bu sitede .

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

— ışın
kaynak

1

Çok "kökler" :)

— MonoThreaded

"Rootsy" olabilir, ancak verilerin bir Tuval'e gömüldüğü durumumda diğer fantezi pantolon yaklaşımlarının işe yarayacağını düşünmüyorum (Grafik.JS). Ancak bu işlevi eklemek ve grafiğin afterDraw () etkinliğinde çağırmak mükemmel bir şekilde çalışır: ctx.fillText (addCommas (dataset.data [i]),

— B. Clay Shannon

Bu, örneğin 3000000 (7 basamak) için geçerli değildir. sadece 6 ve daha az basamak için!

— Mostafa Norzade

21

Number () işlevini kullanın;

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

Snippet'i genişlet

— bamossza
kaynak

Teşekkürler, cevabını kullandım. Bunun yalnızca 15 basamağa kadar olan sayıları desteklediğini belirtmek gerekir.

— tallpaul

21

2016 Cevap:

Javascript bu işlevi vardır, bu yüzden Jquery gerek yok.

yournumber.toLocaleString("en");

— Kamy D
kaynak

2

Bu tüm tarayıcılarda çalışır mı? Krom üzerinde iyi çalışıyor. IE9 + & opera, safari üzerinde çalışacak mı?

— zeppelin

@zeppelin w3schools.com/jsref/jsref_tolocalestring.asp tüm tarayıcıları destekler

— Ricks

1

Sadece aradığınız numaranın bir dize değil, bir sayı tipi (int, float vb.) Olduğundan emin olun.

— el3ati2

16

Daha kapsamlı bir çözüm

Bunun özü replaceçağrıdır. Şimdiye kadar, önerilen çözümlerin hiçbirinin aşağıdaki durumların tümünü ele almadığını düşünmüyorum:

tamsayılar: 1000 => '1,000'
Teller: '1000' => '1,000'
Dizeler için:
- Ondalıktan sonra sıfırları korur: 10000.00 => '10,000.00'
- Ondalık sayıdan önce baştaki sıfırları atar: '01000.00 => '1,000.00'
- Ondalık virgülden sonra virgül eklemez: '1000.00000' => '1,000.00000'
- Liderliği korur -veya+ :'-1000.0000' => '-1,000.000'
- Rakam içermeyen, değiştirilmemiş dizeleri döndürür: '1000k' => '1000k'

Aşağıdaki işlev yukarıdakilerin tümünü yapar.

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

Şöyle bir jQuery eklentisinde kullanabilirsiniz:

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

— Nathan Long
kaynak

9

Ayrıca jquery FormatCurrency eklentisine de bakabilirsiniz (ki ben yazarım); birden fazla yerel ayar için de destek vardır, ancak ihtiyacınız olmayan para birimi desteğinin ek yükü olabilir.

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

— bendewey
kaynak

4

Bu soru beni bu eklentinin v1.3 sürümünü yayınlamak için değiştirdi, bu yüzden teşekkürler

— bendewey

3

İşte benim javascript, sadece firefox ve chrome üzerinde test edildi

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

— dayak atmak
kaynak

1

Çok kolay yolu toLocaleString()fonksiyonu kullanmaktır

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

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

— Rifkan Razak
kaynak

1

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

Bunu deneyebilirsin, benim için çalışıyor

— benoit1521
kaynak