web-dev-qa-db-fra.com

Ajouter une virgule aux nombres tous les trois chiffres

Comment formater les nombres avec un séparateur de virgule tous les trois chiffres avec jQuery?

Par exemple:

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

@Paul Creasey avait la solution la plus simple comme regex, mais la voici sous la forme d'un simple plugin jQuery:

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

Vous pouvez ensuite l'utiliser comme ceci:

$("span.numbers").digits();
212
Doug Neiner

Quelque chose comme ça si vous aimez regex, vous n'êtes pas sûr de la syntaxe exacte du remplacement!

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

Vous pouvez utiliser Number.toLocaleString() :

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

71
Abhijeet

Vous pouvez essayer NumberFormatter .

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

Il prend également en charge différents paramètres régionaux, y compris bien sûr US.

Voici un exemple très simplifié d'utilisation:

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

Sortie:

1,000
2,000,000
26
Mark Byers

Ce n'est pas jQuery, mais ça marche pour moi. Tiré de ce site .

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

2016 Réponse:

Javascript a cette fonction, pas besoin de Jquery.

yournumber.toLocaleString("en");
18
Kamy D

Utilisez la fonction 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 />

17
bamossza

Une solution plus complète

Le coeur de ceci est l'appel replace. Jusqu'à présent, je ne pense pas que les solutions proposées gèrent tous les cas suivants:

  • Entiers: 1000 => '1,000'
  • Chaînes: '1000' => '1,000'
  • Pour les chaînes:
    • Conserve les zéros après le nombre décimal: 10000.00 => '10,000.00' 
    • Élimine les zéros non significatifs avant le point décimal: '01000.00 => '1,000.00'
    • N'ajoute pas de virgules après le point décimal: '1000.00000' => '1,000.00000'
    • Conserve les - ou + en tête: '-1000.0000' => '-1,000.000'
    • Renvoie, non modifié, des chaînes contenant des chiffres non-numériques: '1000k' => '1000k'

La fonction suivante fait tout ce qui précède.

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

Vous pouvez l'utiliser dans un plugin jQuery comme ceci:

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

Vous pouvez aussi regarder le fichier jquery FormatCurrency plugin (dont je suis l'auteur); il prend également en charge plusieurs paramètres régionaux, mais peut avoir les frais généraux de prise en charge des devises dont vous n'avez pas besoin.

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

Voici mon javascript, testé sur Firefox et Chrome uniquement

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

Le moyen le plus simple est d’utiliser la fonction toLocaleString()

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

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