web-dev-qa-db-fra.com

Mettre en forme les nombres en JavaScript similaires à C #

Existe-t-il un moyen simple de formater des nombres en JavaScript similaires aux méthodes de formatage disponibles en C # (ou VB.NET) via ToString("format_provider") ou String.Format()?

javascriptjqueryformatnumbers
71
xiemails

Vous devriez probablement jeter un coup d'œil au plugin JQuery NUMBERFORMATTER:

Jquery Number Formatter

Et cette question:

Javascript pour formater les nombres plus facilement

9
karim79

Généralement

En jQuery

74
rahul

Oui, il existe certainement un moyen de formater des nombres correctement en javascript, par exemple:

var val=2489.8237

val.toFixed(3) //returns 2489.824 (round up)
val.toFixed(2) //returns 2489.82
val.toFixed(7) //returns 2489.8237000 (padding)

Avec l'utilisation de variablename .toFixed.

Et il y a une autre fonction toPrecision() ..____. Pour plus de détails, vous pouvez aussi visiter 

http://raovishal.blogspot.com/2012/01/number-format-in-javascript.html

46
Vishal Barot

Voici une simple fonction JS pour ajouter des virgules à un nombre entier au format chaîne. Il gérera des nombres entiers ou décimaux. Vous pouvez lui passer un nombre ou une chaîne. Il retourne évidemment une chaîne.

function addCommas(str) {
    var parts = (str + "").split("."),
        main = parts[0],
        len = main.length,
        output = "",
        first = main.charAt(0),
        i;

    if (first === '-') {
        main = main.slice(1);
        len = main.length;    
    } else {
        first = "";
    }
    i = len - 1;
    while(i >= 0) {
        output = main.charAt(i) + output;
        if ((len - i) % 3 === 0 && i > 0) {
            output = "," + output;
        }
        --i;
    }
    // put sign back
    output = first + output;
    // put decimal part back
    if (parts.length > 1) {
        output += "." + parts[1];
    }
    return output;
}

Voici un ensemble de cas de test: http://jsfiddle.net/jfriend00/6y57j/

Vous pouvez le voir utilisé dans cette version précédente de jsFiddle: http://jsfiddle.net/jfriend00/sMnjT/ . Vous pouvez également trouver des fonctions permettant de gérer les nombres décimaux avec une simple recherche sur Google pour "javascript add virg".

La conversion d'un nombre en chaîne peut se faire de plusieurs manières. Le plus simple est simplement de l'ajouter à une chaîne:

var myNumber = 3;
var myStr = "" + myNumber;   // "3"

Dans le contexte de votre jsFiddle, vous devez insérer des virgules dans le compteur en modifiant cette ligne:

jTarget.text(current);

pour ça:

jTarget.text(addCommas(current));

Vous pouvez le voir fonctionner ici: http://jsfiddle.net/jfriend00/CbjSX/

24
jfriend00

J'ai écrit une fonction simple (pas encore un autre plugin jQuery nécessaire !!) qui convertit un nombre en chaîne séparée par des décimales ou une chaîne vide si le nombre n'était pas un nombre pour commencer:

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

format(578999); résulte en 578,999

format(10); résulte en 10

si vous voulez avoir un point décimal au lieu d'une virgule, remplacez simplement la virgule dans le code par un point décimal. 

L'un des commentaires a correctement déclaré que cela ne fonctionne que pour les entiers, avec quelques petites adaptations, vous pouvez également le faire fonctionner pour les points flottants:

function format(x) {
    if(isNaN(x))return "";

    n= x.toString().split('.');
    return n[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",")+(n.length>1?"."+n[1]:"");
}
12
patrick

Voici quelques solutions. Toutes passent avec succès la suite de tests, la suite de tests et le test inclus, si vous voulez copier et coller pour tester, essayez This Gist .

Méthode 0 (RegExp)

Base sur https://stackoverflow.com/a/14428340/1877620 , mais corrigez s'il n'y a pas de point décimal.

if (typeof Number.prototype.format === 'undefined') {
    Number.prototype.format = function (precision) {
        if (!isFinite(this)) {
            return this.toString();
        }

        var a = this.toFixed(precision).split('.');
        a[0] = a[0].replace(/\d(?=(\d{3})+$)/g, '$&,');
        return a.join('.');
    }
}

Méthode 1

if (typeof Number.prototype.format1 === 'undefined') {
    Number.prototype.format1 = function (precision) {
        if (!isFinite(this)) {
            return this.toString();
        }

        var a = this.toFixed(precision).split('.'),
            // skip the '-' sign
            head = Number(this < 0);

        // skip the digits that's before the first thousands separator 
        head += (a[0].length - head) % 3 || 3;

        a[0] = a[0].slice(0, head) + a[0].slice(head).replace(/\d{3}/g, ',$&');
        return a.join('.');
    };
}

Méthode 2 (Split to Array)

if (typeof Number.prototype.format2 === 'undefined') {
    Number.prototype.format2 = function (precision) {
        if (!isFinite(this)) {
            return this.toString();
        }

        var a = this.toFixed(precision).split('.');

        a[0] = a[0]
            .split('').reverse().join('')
            .replace(/\d{3}(?=\d)/g, '$&,')
            .split('').reverse().join('');

        return a.join('.');
    };
}

Méthode 3 (boucle)

if (typeof Number.prototype.format3 === 'undefined') {
    Number.prototype.format3 = function (precision) {
        if (!isFinite(this)) {
            return this.toString();
        }

        var a = this.toFixed(precision).split('');
        a.Push('.');

        var i = a.indexOf('.') - 3;
        while (i > 0 && a[i-1] !== '-') {
            a.splice(i, 0, ',');
            i -= 3;
        }

        a.pop();
        return a.join('');
    };
}

Exemple

console.log('======== Demo ========')
var n = 0;
for (var i=1; i<20; i++) {
    n = (n * 10) + (i % 10)/100;
    console.log(n.format(2), (-n).format(2));
}

Séparateur

Si nous voulons un séparateur de milliers ou un séparateur décimal personnalisé, utilisez replace ():

123456.78.format(2).replace(',', ' ').replace('.', ' ');

Suite de tests

function assertEqual(a, b) {
    if (a !== b) {
        throw a + ' !== ' + b;
    }
}

function test(format_function) {
    console.log(format_function);
    assertEqual('NaN', format_function.call(NaN, 0))
    assertEqual('Infinity', format_function.call(Infinity, 0))
    assertEqual('-Infinity', format_function.call(-Infinity, 0))

    assertEqual('0', format_function.call(0, 0))
    assertEqual('0.00', format_function.call(0, 2))
    assertEqual('1', format_function.call(1, 0))
    assertEqual('-1', format_function.call(-1, 0))
    // decimal padding
    assertEqual('1.00', format_function.call(1, 2))
    assertEqual('-1.00', format_function.call(-1, 2))
    // decimal rounding
    assertEqual('0.12', format_function.call(0.123456, 2))
    assertEqual('0.1235', format_function.call(0.123456, 4))
    assertEqual('-0.12', format_function.call(-0.123456, 2))
    assertEqual('-0.1235', format_function.call(-0.123456, 4))
    // thousands separator
    assertEqual('1,234', format_function.call(1234.123456, 0))
    assertEqual('12,345', format_function.call(12345.123456, 0))
    assertEqual('123,456', format_function.call(123456.123456, 0))
    assertEqual('1,234,567', format_function.call(1234567.123456, 0))
    assertEqual('12,345,678', format_function.call(12345678.123456, 0))
    assertEqual('123,456,789', format_function.call(123456789.123456, 0))
    assertEqual('-1,234', format_function.call(-1234.123456, 0))
    assertEqual('-12,345', format_function.call(-12345.123456, 0))
    assertEqual('-123,456', format_function.call(-123456.123456, 0))
    assertEqual('-1,234,567', format_function.call(-1234567.123456, 0))
    assertEqual('-12,345,678', format_function.call(-12345678.123456, 0))
    assertEqual('-123,456,789', format_function.call(-123456789.123456, 0))
    // thousands separator and decimal
    assertEqual('1,234.12', format_function.call(1234.123456, 2))
    assertEqual('12,345.12', format_function.call(12345.123456, 2))
    assertEqual('123,456.12', format_function.call(123456.123456, 2))
    assertEqual('1,234,567.12', format_function.call(1234567.123456, 2))
    assertEqual('12,345,678.12', format_function.call(12345678.123456, 2))
    assertEqual('123,456,789.12', format_function.call(123456789.123456, 2))
    assertEqual('-1,234.12', format_function.call(-1234.123456, 2))
    assertEqual('-12,345.12', format_function.call(-12345.123456, 2))
    assertEqual('-123,456.12', format_function.call(-123456.123456, 2))
    assertEqual('-1,234,567.12', format_function.call(-1234567.123456, 2))
    assertEqual('-12,345,678.12', format_function.call(-12345678.123456, 2))
    assertEqual('-123,456,789.12', format_function.call(-123456789.123456, 2))
}

console.log('======== Testing ========');
test(Number.prototype.format);
test(Number.prototype.format1);
test(Number.prototype.format2);
test(Number.prototype.format3);

Référence

function benchmark(f) {
    var start = new Date().getTime();
    f();
    return new Date().getTime() - start;
}

function benchmark_format(f) {
    console.log(f);
    time = benchmark(function () {
        for (var i = 0; i < 100000; i++) {
            f.call(123456789, 0);
            f.call(123456789, 2);
        }
    });
    console.log(time.format(0) + 'ms');
}

async = [];
function next() {
    setTimeout(function () {
        f = async.shift();
        f && f();
        next();
    }, 10);
}

console.log('======== Benchmark ========');
async.Push(function () { benchmark_format(Number.prototype.format); });
async.Push(function () { benchmark_format(Number.prototype.format1); });
async.Push(function () { benchmark_format(Number.prototype.format2); });
async.Push(function () { benchmark_format(Number.prototype.format3); });
next();
9
Steely Wing

Si vous ne voulez pas utiliser jQuery, jetez un oeil à Numeral.js

7
adamwdraper

Premièrement, convertir un entier en chaîne dans JS est très simple:

// Start off with a number
var number = 42;
// Convert into a string by appending an empty (or whatever you like as a string) to it
var string = 42+'';
// No extra conversion is needed, even though you could actually do
var alsoString = number.toString();

Si vous avez un nombre sous forme de chaîne et que vous voulez le transformer en entier, vous devez utiliser parseInt(string) pour les entiers et parseFloat(string) pour les flottants. Ces deux fonctions renvoient ensuite l'entier/float souhaité. Exemple:

// Start off with a float as a string
var stringFloat = '3.14';
// And an int as a string
var stringInt = '42';

// typeof stringInt  would give you 'string'

// Get the real float from the string
var realFloat = parseFloat(someFloat);
// Same for the int
var realInt = parseInt(stringInt);

// but typeof realInt  will now give you 'number'

Ce que vous essayez d’ajouter, etc., n’est pas clair pour moi par votre question.

4
zatatatata

http://code.google.com/p/javascript-number-formatter/ :

  • Court, rapide, flexible mais autonome. Seules 75 lignes, y compris les informations de licence MIT, les lignes vierges et les commentaires.
  • Acceptez le formatage de nombres standard comme #, ## 0.00 ou avec négation -000. ####.
  • Acceptez tous les formats de pays tels que # ## 0,00, #, ###. ##, # '###. ## ou tout autre type de symbole non numéroté.
  • Accepter n'importe quel nombre de groupe de chiffres. #, ##, # 0.000 ou #, ### 0. ## sont tous valides.
  • Acceptez tout formatage redondant/infaillible. ##, ###, ##. # ou 0 #, # 00 #. ### 0 # sont tous OK.
  • Arrondissement automatique des chiffres.
  • Interface simple, il suffit de fournir masque et valeur comme ceci: format ("0.0000", 3.141592) 

METTRE &AGRAVE; JOUR

Comme dit Tomáš Zato, voici une solution en ligne:

(666.0).toLocaleString()
numObj.toLocaleString([locales [, options]])

décrit dans l’ECMA-262 5.1 Edition:

et fonctionnera dans les futures versions de navigateurs ...

3
gavenkoa

Par exemple:

var flt = '5.99';
var nt = '6';

var rflt = parseFloat(flt);
var rnt = parseInt(nt);
2
Jake Badlands

Utiliser JQuery .

$(document).ready(function()
 {
    //Only number and one dot
    function onlyDecimal(element, decimals)
    {
        $(element).keypress(function(event)
        {
            num = $(this).val() ;
            num = isNaN(num) || num === '' || num === null ? 0.00 : num ;
            if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57))
            {
                event.preventDefault();

            }
            if($(this).val() == parseFloat(num).toFixed(decimals))
            {
                event.preventDefault();
            }
        });
    }

     onlyDecimal("#TextBox1", 3) ;



});

1
Adrian

Pour obtenir une décimale avec 2 chiffres après la virgule, vous pouvez simplement utiliser:

function nformat(a) {
   var b = parseInt(parseFloat(a)*100)/100;
   return b.toFixed(2);
}
1
Nekudotayim

Puis-je suggérer numbro pour le formatage basé sur les paramètres régionaux et number-format.js pour le cas général. Une combinaison des deux selon le cas d'utilisation peut aider.

0
John Stephenson

Pour approfondir la réponse de jfriend00 (je n'ai pas assez de points pour commenter), j'ai étendu sa réponse à ce qui suit:

function log(args) {
    var str = "";
    for (var i = 0; i < arguments.length; i++) {
        if (typeof arguments[i] === "object") {
            str += JSON.stringify(arguments[i]);
        } else {
            str += arguments[i];
        }
    }
    var div = document.createElement("div");
    div.innerHTML = str;
    document.body.appendChild(div);
}

Number.prototype.addCommas = function (str) {
    if (str === undefined) {
    	str = this;
    }
    
    var parts = (str + "").split("."),
        main = parts[0],
        len = main.length,
        output = "",
        first = main.charAt(0),
        i;
    
    if (first === '-') {
        main = main.slice(1);
        len = main.length;    
    } else {
    	  first = "";
    }
    i = len - 1;
    while(i >= 0) {
        output = main.charAt(i) + output;
        if ((len - i) % 3 === 0 && i > 0) {
            output = "," + output;
        }
        --i;
    }
    // put sign back
    output = first + output;
    // put decimal part back
    if (parts.length > 1) {
        output += "." + parts[1];
    }
    return output;
}

var testCases = [
    1, 12, 123, -1234, 12345, 123456, -1234567, 12345678, 123456789,
    -1.1, 12.1, 123.1, 1234.1, -12345.1, -123456.1, -1234567.1, 12345678.1, 123456789.1
];
 
for (var i = 0; i < testCases.length; i++) {
	log(testCases[i].addCommas());
}
 
/*for (var i = 0; i < testCases.length; i++) {
    log(Number.addCommas(testCases[i]));
}*/

0
Graham Harris

Voici une autre version:

$.fn.digits = function () {
    return this.each(function () {
        var value = $(this).text();
        var decimal = "";
        if (value) {
            var pos = value.indexOf(".");
            if (pos >= 0) {
                decimal = value.substring(pos);
                value = value.substring(0, pos);
            }
            if (value) {
                value = value.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
                if (!String.isNullOrEmpty(decimal)) value = (value + decimal);
                $(this).text(value);
            }
        }
        else {
            value = $(this).val()
            if (value) {
                var pos = value.indexOf(".");
                if (pos >= 0) {
                    decimal = value.substring(pos);
                    value = value.substring(0, pos);
                }
                if (value) {
                    value = value.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
                    if (!String.isNullOrEmpty(decimal)) value = (value + decimal);
                    $(this).val(value);
                }
            }
        }
    })
};
0
user673117

J'ai créé une fonction simple, peut-être que quelqu'un peut l'utiliser

function secsToTime(secs){
  function format(number){
    if(number===0){
      return '00';
    }else {
      if (number < 10) {
          return '0' + number
      } else{
          return ''+number;
      }
    }
  }

  var minutes = Math.floor(secs/60)%60;
  var hours = Math.floor(secs/(60*60))%24;
  var days = Math.floor(secs/(60*60*24));
  var seconds = Math.floor(secs)%60;

  return (days>0? days+"d " : "")+format(hours)+':'+format(minutes)+':'+format(seconds);
}

cela peut générer les sorties suivantes:

  • 5d 02:53:39
  • 4d 22:15:16
  • 03:01:05
  • 00:00:00
0
Alejandro Silva

Si vous souhaitez formater le numéro pour la vue plutôt que pour le calcul, vous pouvez utiliser cette option.

function numberFormat( number ){

    var digitCount = (number+"").length;
    var formatedNumber = number+"";
    var ind = digitCount%3 || 3;
    var temparr = formatedNumber.split('');

    if( digitCount > 3 && digitCount <= 6 ){

        temparr.splice(ind,0,',');
        formatedNumber = temparr.join('');

    }else if (digitCount >= 7 && digitCount <= 15) {
        var temparr2 = temparr.slice(0, ind);
        temparr2.Push(',');
        temparr2.Push(temparr[ind]);
        temparr2.Push(temparr[ind + 1]);
        // temparr2.Push( temparr[ind + 2] ); 
        if (digitCount >= 7 && digitCount <= 9) {
            temparr2.Push(" million");
        } else if (digitCount >= 10 && digitCount <= 12) {
            temparr2.Push(" billion");
        } else if (digitCount >= 13 && digitCount <= 15) {
            temparr2.Push(" trillion");

        }
        formatedNumber = temparr2.join('');
    }
    return formatedNumber;
}

Entrée: {Integer} Number

Sorties: {String} Number

22,870 => si numéro 22870

22,87 millions => si numéro 2287xxxx (x peut être ce que vous voulez)

22,87 milliards => si numéro 2287xxxxxxx 

22,87 milliards de dollars => si numéro 2287xxxxxxxxxx 

Vous avez eu l'idée

0
Herbi Shtini