Dodaj przecinek do liczb co trzy cyfry

160

Jak mogę sformatować liczby za pomocą separatora przecinków co trzy cyfry za pomocą jQuery?

Na przykład:

╔═══════════╦═════════════╗
║   Input   ║   Output    ║
╠═══════════╬═════════════╣
║       298 ║         298 ║
║      2984 ║       2,984 ║
║ 297312984 ║ 297,312,984 ║
╚═══════════╩═════════════╝
Steve
źródło
Jestem nowy w jQuery i chciałbym mieć prostą funkcję / wtyczkę, która dodaje przecinek po każdych trzech cyfrach, jeśli liczby mają więcej niż trzy cyfry. Tylko liczby dodatnie, bez ułamków, bez miejsc po przecinku, bez waluty, a standardowy format amerykański (1111) nie (1111 USD lub 1111,11 USD). Wolałbym raczej używać jQuery, a nie tylko javascript, jeśli to możliwe, i byłoby miło ustawić kod ustawiony na funkcję, aby można ją było bardzo łatwo zastosować. Jak mam to zrobić? Doceniaj wkład wszystkich. Dzięki jeszcze raz.
Steve,
2
@unknown: Masz już wiele odpowiedzi. Spójrz na otrzymane odpowiedzi i oceń je, aby zobaczyć, która jest dla Ciebie najlepsza. Jeśli potrzebujesz więcej wyjaśnień na temat jednej z odpowiedzi, opublikuj ją jako komentarz do tej odpowiedzi.
Mark Byers
1
Przepraszam, że moje pytanie nie było wystarczająco zwięzłe, ale zobacz format wtyczki Douga Neinera wykorzystujący kod Paula Creaseya jako odpowiedź.
Steve,

Odpowiedzi:

241

@Paul Creasey miał najprostsze rozwiązanie jako wyrażenie regularne, ale tutaj jest to prosta wtyczka jQuery:

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

Możesz wtedy użyć tego w następujący sposób:

$("span.numbers").digits();
Doug Neiner
źródło
4
Działa świetnie! Podziękowania dla Paula Creasey za prosty, elegancki kod i Doug Neiner za umieszczenie go w formacie wtyczki. Kredyt przyznany obu.
Steve
4
RC @Mark Byers Składnia jest poprawna. '999.9999'.replace (/ (\ d) (? = (\ D \ d \ d) + (?! \ D))) / g, "$ 1,") zwraca jednak' 999.9,999 '.
Bendewey
6
$.fn.digits = function(){ return this.each(function(){ $(this).val( $(this).val().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); }) }
Dokonałem
3
Myślę, że byłoby to lepiej dostosowane do funkcji stylu narzędzia jQuery z odstępami nazw, np $.digits = function() { ... };.
Alex
63
Najszybszym sposobem jestnumber.toLocaleString("en");
Derek 朕 會 功夫
95

Możesz użyć Number.toLocaleString():

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

Abhijeet
źródło
Próbowałem, ale nie działam na serwerze live, ale pracuję na hoście lokalnym ..
Abed Putra
1
@eladsilver w3schools.com/jsref/jsref_tolocalestring.asp we wszystkich przeglądarkach
ricks
To działało dla mnie najłatwiej. Potrzebowałem waluty i przecinków. Mogłem również ustawić właściwości: var n = 26787.89 var myObjCurrency = { style: "currency", currency: "USD", currencyDisplay : "symbol" } n.toLocaleString("en-US", myObjCurrency));
AWP
78

Coś takiego, jeśli interesujesz się wyrażeniem regularnym, ale nie jesteś pewien dokładnej składni zamiany!

MyNumberAsString.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
Paul Creasey
źródło
2
Składnia jest poprawna. '999.9999'.replace (/ (\ d) (? = (\ D \ d \ d) + (?! \ D))) / g, "$ 1,") zwraca jednak' 999.9,999 '.
Mark Byers
@Nieznany, przeniosłem to do odpowiedzi. Poniżej znajduje się przykład użycia.
Doug Neiner
27

Możesz spróbować NumberFormatter .

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

Obsługuje również różne lokalizacje, w tym oczywiście USA.

Oto bardzo uproszczony przykład, jak go używać:

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

Wynik:

1,000
2,000,000
Mark Byers
źródło
Rzuciłem okiem na tę wtyczkę i na podstawie opisu autora miała być używana w polach do wprowadzania danych w formularzach. Jak mogę go zastosować do <span class = "numbers"> 2984 </span>, aby formatował do <span class = "numbers"> 2984 </span> bez miejsc po przecinku. Próbowałem $ ('span.numbers'). Format ({format: "#, ###", locale: "us"}); ale nic się nie stało. Wciąż sprawdzam wtyczkę, bawię się nią. Przepraszam, jestem nowicjuszem w jQuery :-)
Steve
+1 Dobrze wiedzieć o tej wtyczce. Zgadzam się, że dla wzrostu i przyszłej internacjonalizacji byłaby to najlepsza droga.
Doug Neiner
Oto link do repozytorium GitHub. github.com/hardhub/jquery-numberformatter
Mwangi Thiga
22

To nie jest jQuery, ale dla mnie działa. Zaczerpnięte z tej strony .

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;
}
Promień
źródło
1
Bardzo "korzenie" was :)
MonoThreaded
Może to być „zakorzenione”, ale nie sądzę, aby inne podejścia z fantazyjnymi spodniami zadziałały w mojej sytuacji, w której dane są osadzone w kanwie (Chart.JS). Ale dodanie tej funkcji i wywołanie jej w zdarzeniu afterDraw () wykresu działa doskonale: ctx.fillText (addCommas (dataset.data [i]),
B. Clay Shannon
To nie działa, na przykład 3000000 (7 cyfr). tylko dla 6 i mniej cyfr!
Mostafa Norzade
21

Użyj funkcji 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 />

bamossza
źródło
Dzięki, wykorzystałem twoją odpowiedź. Warto zauważyć, że obsługuje to tylko liczby o długości do 15 cyfr.
tallpaul
21

Odpowiedź 2016:

Javascript ma tę funkcję, więc nie ma potrzeby korzystania z Jquery.

yournumber.toLocaleString("en");
Kamy D.
źródło
2
Czy to zadziała we wszystkich przeglądarkach? Działa dobrze na chromie. Czy będzie działać na IE9 + i operę, safari?
zeppelin
@zeppelin w3schools.com/jsref/jsref_tolocalestring.asp obsługuje wszystkie przeglądarki
ricks
1
Po prostu upewnij się, że numer, na który dzwonisz, jest typem liczbowym (int, float itp.), A nie ciągiem.
el3ati2
16

Dokładniejsze rozwiązanie

Sednem tego jest replacewezwanie. Jak dotąd nie sądzę, aby którekolwiek z proponowanych rozwiązań obejmowało wszystkie następujące przypadki:

  • Liczby całkowite: 1000 => '1,000'
  • Smyczki: '1000' => '1,000'
  • Na smyczki:
    • Zachowuje zera po przecinku: 10000.00 => '10,000.00'
    • Odrzuca zera wiodące przed przecinkiem: '01000.00 => '1,000.00'
    • Nie dodaje przecinków po przecinku: '1000.00000' => '1,000.00000'
    • Zachowuje wiodący -lub +:'-1000.0000' => '-1,000.000'
    • Zwroty, niezmodyfikowane, ciągi zawierające inne niż cyfry: '1000k' => '1000k'

Poniższa funkcja wykonuje wszystkie powyższe czynności.

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

Możesz go użyć we wtyczce jQuery w następujący sposób:

$.fn.addCommas = function() {
  $(this).each(function(){
    $(this).text(addCommas($(this).text()));
  });
};
Nathan Long
źródło
9

Możesz również spojrzeć na wtyczkę jquery FormatCurrency (której jestem autorem); obsługuje również wiele lokalizacji, ale może mieć narzut w postaci obsługi waluty, której nie potrzebujesz.

$(this).formatCurrency({ symbol: '', roundToDecimalPlace: 0 });
Bendewey
źródło
4
to pytanie zmobilizowało mnie do wydania wersji 1.3 tej wtyczki, więc dzięki
bendewey
3

Oto mój javascript, przetestowany tylko na Firefox i 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>
Chłostać
źródło
1

Bardzo prostym sposobem jest użycie toLocaleString()funkcji

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

tot.toLocaleString() //Result : Rs.1,402,598
Rifkan Razak
źródło
1
function formatNumberCapture () {
$('#input_id').on('keyup', function () {
    $(this).val(function(index, value) {
        return value
            .replace(/\D/g, "")
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            ;
    });
});

Możesz spróbować, to działa dla mnie

benoit1521
źródło