Comment imprimer un nombre avec des virgules comme séparateurs de milliers en JavaScript

Question

Je suis en train d'imprimer un nombre entier en JavaScript avec des virgules comme séparateurs de milliers. Par exemple, j'en veux pour preuve le nombre 1234567 "1,234,567". Comment pourrais-je aller sur le faire?

Voici comment je fais:

function numberWithCommas(x) {
    x = x.toString();
    var pattern = /(-?\d+)(\d{3})/;
    while (pattern.test(x))
        x = x.replace(pattern, "$1,$2");
    return x;
}

Est-il plus simple et plus élégante façon de le faire? Ce serait bien si cela fonctionne avec les chars aussi, mais ce n'est pas nécessaire. Il n'a pas besoin d'être spécifique aux paramètres régionaux de décider entre les périodes et les virgules.

Answer 1

J'ai utilisé l'idée de Kerry réponse, mais simplifiée depuis que je suis juste à la recherche de quelque chose de simple pour mon but spécifique. Voici ce que j'ai fait:

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

C'est tout ce que vous devez vraiment savoir.

@Neils Bom a demandé comment les regex fonctionne. Mon explication est un peu longue. Elle ne rentre pas dans les commentaires et je ne sais pas où le mettre donc je le fais ici. Si quelqu'un a d'autres suggestions pour savoir où le mettre, s'il vous plaît laissez-moi savoir.

La regex utilise 2 les assertions avant: un bilan positif pour regarder pour tout point de la chaîne qui a un multiple de 3 chiffres dans une rangée, et un négatif affirmation assurez-vous que le point a exactement un multiple de 3 chiffres. Le remplacement de l'expression met une virgule.

Par exemple, si vous passer "123456789.01", l'affirmation positive va correspondre à chaque endroit, à gauche de la 7 (depuis "789" est un multiple de 3 chiffres, "678" est un multiple de 3 chiffres, "567", etc.). Le négatif assertion vérifie que les multiples de 3 chiffres, ne dispose pas de chiffres après. "789" dispose d'un délai après il est donc exactement un multiple de 3 chiffres, une virgule y va. "678" est un multiple de 3 chiffres, mais il a un "9" après elle, de sorte que ces 3 chiffres sont une partie d'un groupe de 4, et une virgule ne pas y aller. De même pour "567". "456789" est de 6 chiffres, ce qui est un multiple de 3, donc une virgule va de l'avant. "345678" est un multiple de 3, mais il a un "9" après cela, donc pas de virgule y va. Et ainsi de suite. Le "\B" garde la regex de mettre une virgule au début de la chaîne.

@neu-rah mentionné que cette fonction ajoute des virgules dans des endroits indésirables si il y a plus de 3 chiffres après la virgule. Si c'est un problème, vous pouvez utiliser cette fonction:

function numberWithCommas(x) {
    var parts = x.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
}

Answer 2

Je suis surpris que personne n'a mentionné le Nombre.le prototype.toLocaleString. Il est implémenté en JavaScript 1.5 (qui a été introduit en 1999) donc, c'est essentiellement pris en charge par les principaux navigateurs.

var n = 34523453.345
n.toLocaleString()
"34,523,453.345"

P. S. Pour les personnes qui utilisent nœud ou voulez quelque chose de différent dans le navigateur Numeral.js pourrait être intéressant.

Answer 3

Je suggère d'utiliser phpjs.org 's number_format: http://phpjs.org/functions/number_format:481

function number_format(number, decimals, dec_point, thousands_sep) {
    // http://kevin.vanzonneveld.net
    // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +     bugfix by: Michael White (http://getsprink.com)
    // +     bugfix by: Benjamin Lupton
    // +     bugfix by: Allan Jensen (http://www.winternet.no)
    // +    revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +     bugfix by: Howard Yeend
    // +    revised by: Luke Smith (http://lucassmith.name)
    // +     bugfix by: Diogo Resende
    // +     bugfix by: Rival
    // +      input by: Kheang Hok Chin (http://www.distantia.ca/)
    // +   improved by: davook
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Jay Klehr
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Amir Habibi (http://www.residence-mixte.com/)
    // +     bugfix by: Brett Zamir (http://brett-zamir.me)
    // +   improved by: Theriault
    // +   improved by: Drew Noakes
    // *     example 1: number_format(1234.56);
    // *     returns 1: '1,235'
    // *     example 2: number_format(1234.56, 2, ',', ' ');
    // *     returns 2: '1 234,56'
    // *     example 3: number_format(1234.5678, 2, '.', '');
    // *     returns 3: '1234.57'
    // *     example 4: number_format(67, 2, ',', '.');
    // *     returns 4: '67,00'
    // *     example 5: number_format(1000);
    // *     returns 5: '1,000'
    // *     example 6: number_format(67.311, 2);
    // *     returns 6: '67.31'
    // *     example 7: number_format(1000.55, 1);
    // *     returns 7: '1,000.6'
    // *     example 8: number_format(67000, 5, ',', '.');
    // *     returns 8: '67.000,00000'
    // *     example 9: number_format(0.9, 0);
    // *     returns 9: '1'
    // *    example 10: number_format('1.20', 2);
    // *    returns 10: '1.20'
    // *    example 11: number_format('1.20', 4);
    // *    returns 11: '1.2000'
    // *    example 12: number_format('1.2000', 3);
    // *    returns 12: '1.200'
    var n = !isFinite(+number) ? 0 : +number, 
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
        dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
        toFixedFix = function (n, prec) {
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            var k = Math.pow(10, prec);
            return Math.round(n * k) / k;
        },
        s = (prec ? toFixedFix(n, prec) : Math.round(n)).toString().split('.');
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}

---

Mise à JOUR 02/13/14

Les gens ont été des rapports, cela ne fonctionne pas comme prévu, j'ai donc fait un JS Fiddle qui comprend des tests automatisés:
http://jsfiddle.net/drewnoakes/xc3qh35z/

Answer 4

C'est une variante de @mikez302 réponse, mais modifié pour prendre en charge les nombres avec décimales (par @neu-rah commentaires que numberWithCommas(12345.6789) -> "12,345.6,789" au lieu de "12,345.6789"

function numberWithCommas(n) {
    var parts=n.toString().split(".");
    return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
}

Answer 5

function formatNumber (num) {
    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

print(formatNumber(2665));      // 2,665
print(formatNumber(102665));    // 102,665
print(formatNumber(111102665)); // 111,102,665