Format du nombre pour toujours afficher 2 décimales


783

Je souhaite formater mes chiffres pour toujours afficher 2 décimales, en arrondissant le cas échéant.

Exemples:

number     display
------     -------
1          1.00
1.341      1.34
1.345      1.35

J'utilise ceci:

parseFloat(num).toFixed(2);

Mais il s'affiche 1comme 1plutôt que 1.00.


2
Je veux dire que si j'entre 1, il ne montrera pas le nombre comme 1,00, mais si j'entre 1,345 alors il montrera 1,35
Varada

1
J'ai reformulé votre question en fonction de ce que je pensais que vous cherchiez. Veuillez vérifier que je vous ai bien compris.
frein



Réponses:


1117
(Math.round(num * 100) / 100).toFixed(2);

Démo en direct

Notez qu'il arrondira à 2 décimales, donc l'entrée 1.346reviendra 1.35.


6
@Kooilnc: OP veut 1afficher en tant que 1.00, et 1.341afficher en tant que 1.34.
Drudge

49
Pas besoin d'utiliser round () car toFixed () l'arrondit.
Milan Babuškov

27
toFixed () l'arrondit mais n'oubliez pas qu'il retourne une chaîne ... Donc cette méthode n'est vraiment utile que pour l'affichage. Si vous souhaitez effectuer d'autres calculs mathématiques sur la valeur arrondie, n'utilisez pas toFixed ().
TWright

8
selon MDN, Math.round ne donnera pas toujours des résultats précis en raison d'erreurs d'arrondi. J'ai testé cela avec 1,005, qui devrait arrondir à 1,01, mais cela donne 1,00. Utilisez ma réponse pour une précision constante: stackoverflow.com/a/34796988/3549440 .
Nate

13
Cette réponse entière pourrait être réduite à (+num).toFixed(2). Il conserve même le bug d'arrondi dans l'original, voir la réponse de Nate .
RobG

322
Number(1).toFixed(2);         // 1.00
Number(1.341).toFixed(2);     // 1.34
Number(1.345).toFixed(2);     // 1.34 NOTE: See andy's comment below.
Number(1.3450001).toFixed(2); // 1.35


1
La dernière ligne est fausse. J'ai essayé cela dans la console Chrome et `` Number (1.365) .toFixed (2) renvoie "1.37"
Andre

1
@Andre, Chrome 29.0.1547.57 me donne l' 1.34expression Number(1.345).toFixed(2).
Drew Noakes

1
toFixed fait des arrondis, que vous pouvez voir sur presque tous les numéros de test.
andy

40
Accidentellement soumis que le dernier commentaire avant de terminer .. 1.345est un exemple d'un nombre qui ne peut pas être stocké exactement en virgule flottante, donc je pense que la raison pour laquelle il ne s'arrondit pas comme vous vous attendez, c'est qu'il est en fait stocké sous forme de nombre légèrement moins de 1,345 et il arrondit vers le bas. Si vous testez à la place avec (1.34500001).toFixed(2)alors vous voyez qu'il arrondit correctement jusqu'à1.35
andy

94

Cette réponse échouera si value = 1.005.

Comme meilleure solution, le problème d'arrondi peut être évité en utilisant des nombres représentés en notation exponentielle:

Number(Math.round(1.005+'e2')+'e-2'); // 1.01

Code plus propre comme suggéré par @Kon, et l'auteur original:

Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)

Vous pouvez ajouter toFixed()à la fin pour conserver le point décimal, par exemple: 1.00mais notez qu'il reviendra sous forme de chaîne.

Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces).toFixed(decimalPlaces)

Crédit: Arrondir les décimales en JavaScript


13
Étonnamment, tout le monde ici n'a pas vu ce toFixedproblème d'arrondi. Votre réponse doit être acceptée.
Armfoot

1
Je viens de tester pour voir si c'était toujours le cas. vous avez toujours raison pour la version Chrome 59.0.3071.115 Votre solution arrondira à 1.005 (1.01) et arrondira à 1.00499999 (1.00)
Artistan

jsfiddle.net/Artistan/qq895bnp/28 il y a des "moments" où toFixed fonctionnera, mais c'est assez incohérent. :)
Artistan

surround Number dans parseFloat est sa chaîne de retour
user889030

1
Ceci est une réponse solide. Quelques améliorations auxquelles je peux penser: (1) VS Code (fichier TypeScript) n'aime pas que Math.round () passe une chaîne. (2) Dynamiser le nombre de décimales (non codé en dur à 2). (3) toFixed () semble inutile. Donc, ce que j'ai trouvé c'estNumber(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)
Kon

23
var num = new Number(14.12);
console.log(num.toPrecision(2));//outputs 14
console.log(num.toPrecision(3));//outputs 14.1
console.log(num.toPrecision(4));//outputs 14.12
console.log(num.toPrecision(5));//outputs 14.120

Cela donne des résultats inattendus, si votre nombre peut être 1,4, 23,654 et 0, quelle précision prendriez-vous?
shinzou

2
Notez que le PO demande un "arrondi le cas échéant" . toPrecisionformate uniquement le nombre en un nombre spécifique de décimales, en omettant simplement les espaces redondants, mais sans les arrondir . Bien sûr, cela pourrait être très utile, mais il est important de comprendre la différence.
Boaz - Rétablir Monica

1
En fait, toPrecision arrondit , selon Mozilla. Test:(20.55).toPrecision(3) "20.6"
James L.

2
Si vous souhaitez supprimer les zéros de fin , convertissez-les en nombre ou en flottant après utilisation toFixed: const formattedVal = Number(val.toFixed(2));ne l'utilisez pas toPrecision, car il compte les nombres non décimaux lors de l'utilisation du paramètre de précision.
James L.

17

Pour l'arrondi le plus précis, créez cette fonction:

function round(value, decimals) {
    return Number(Math.round(value +'e'+ decimals) +'e-'+ decimals).toFixed(decimals);
}

et l'utiliser pour arrondir à 2 décimales:

console.log("seeked to " + round(1.005, 2));
> 1.01

Merci à Razu , cet article et la référence Math.round de MDN .


1
qu'en est-il de 1.004999999999999898934?
4esn0k

1
Il ne va pas au-delà de 2 dp
Stephen Adelakun

1
jsfiddle.net/Artistan/qq895bnp testé, c'est la seule méthode cohérente que j'ai vue. Merci.
Artistan

17

Pour les navigateurs modernes, utilisez toLocaleString:

var num = 1.345;
num.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 });

Spécifiez une balise locale comme premier paramètre pour contrôler le séparateur décimal . Pour un point, utilisez par exemple les paramètres régionaux anglais des États-Unis:

num.toLocaleString("en-US", { maximumFractionDigits: 2, minimumFractionDigits: 2 });

qui donne:

1,35

La plupart des pays européens utilisent une virgule comme séparateur décimal, donc si vous utilisez par exemple les paramètres régionaux suédois / suédois:

num.toLocaleString("sv-SE", { maximumFractionDigits: 2, minimumFractionDigits: 2 });

cela donnera:

1,35


Je ne sais pas pourquoi cela est rejeté, cela a semblé bien fonctionner pour moi. Veuillez ajouter un commentaire si vous avez l'intention de voter contre si quelque chose ne va pas avec cela!
John Culviner

13

Réponse la plus simple:

var num = 1.2353453;
num.toFixed(2); // 1.24

Exemple: http://jsfiddle.net/E2XU7/


11
Eh bien, toFixeda déjà été suggéré dans stackoverflow.com/a/13292833/218196 . Quelles informations supplémentaires votre question fournit-elle?
Felix Kling

cette réponse n'inclut pas la fonctionnalité ronde, ma réponse inclut tho.
macio.juin

8
Euh? C'est exactement la même réponse. Appel toFixedà un numéro.
Felix Kling

1
Correct, même fonction, mais le résultat de cette réponse est trompeur, je viens de le rectifier en exprimant la fonctionnalité ronde.
macio.juin

La question dit: "... arrondir le cas échéant". Votre réponse n'implique pas d'arrondi.
Chris

12

Une solution beaucoup plus générique pour arrondir à N endroits

function roundN(num,n){
  return parseFloat(Math.round(num * Math.pow(10, n)) /Math.pow(10,n)).toFixed(n);
}


console.log(roundN(1,2))
console.log(roundN(1.34,2))
console.log(roundN(1.35,2))
console.log(roundN(1.344,2))
console.log(roundN(1.345,2))
console.log(roundN(1.344,3))
console.log(roundN(1.345,3))
console.log(roundN(1.3444,3))
console.log(roundN(1.3455,3))

Output

1.00
1.34
1.35
1.34
1.35
1.344
1.345
1.344
1.346

1
Cette réponse échoue avec certains nombres proches de 0, roundN(-3.4028230607370965e+38,2)retourne "-3.4028230607370965e+38"au lieu de 0,00 attendu
Ferrybig

intéressant @Ferrybig je vais tester les chiffres que vous avez mentionnés et penser à une solution de contournement, merci pour les tests
PirateApp

1
Notez que le nombre mentionné ci-dessus ne devrait pas afficher zéro, mais un nombre énorme à la place, ce n'était qu'une erreur dans mon cerveau. Mais cela ne fonctionne toujours pas, car il n'affiche toujours pas 2 décimales
Ferrybig


9

Si vous utilisez déjà jQuery, vous pouvez envisager d'utiliser le plugin jQuery Number Format .

Le plugin peut renvoyer des nombres formatés sous forme de chaîne, vous pouvez définir des séparateurs décimaux et des milliers, et vous pouvez choisir le nombre de décimales à afficher.

$.number( 123, 2 ); // Returns '123.00'

Vous pouvez également obtenir le format de nombre jQuery à partir de GitHub .


11
Il est exagéré d'utiliser un plugin "juste pour avoir une partie décimale de longueur fixe".
Lashae

9
@Lashae, bien sûr, si c'est tout ce que vous voulez faire. J'ai posté cela au cas où l'OP ou quelqu'un d'autre voulait également les fonctionnalités supplémentaires fournies par le plugin.
Sam Sehnert

si l'affiche de la question avait bien sûr ajouté la balise jQuery;)
fullstacklife

7

C'est ce que tu veux dire?

function showAsFloat(num, n){
      return !isNaN(+num) ? (+num).toFixed(n || 2) : num;
}

document.querySelector('#result').textContent = 
    [
     'command                      | result',
     '-----------------------------------------------',
     'showAsFloat(1);              | ' + showAsFloat(1),
     'showAsFloat(1.314);          | ' + showAsFloat(1.314),
     'showAsFloat(\'notanumber\')    | ' + showAsFloat('notanumber'),
     'showAsFloat(\'23.44567\', 3)   | ' + showAsFloat('23.44567', 3),
     'showAsFloat(2456198, 5)      | ' + showAsFloat('2456198', 5),
     'showAsFloat(0);              | ' + showAsFloat(0)
    ].join('\n');
<pre id="result"></pre>


6

Convertissez un nombre en chaîne, en ne conservant que deux décimales:

var num = 5.56789;
var n = num.toFixed(2);

Le résultat de n sera:

5.57

4

Cherchez-vous un sol?

var num = 1.42482;
var num2 = 1;
var fnum = Math.floor(num).toFixed(2);
var fnum2 = Math.floor(num2).toFixed(2);
alert(fnum + " and " + fnum2); //both values will be 1.00

4
Je ne pense pas qu'il veuille arrondir à l'entier le plus proche.
Drudge

oui, je n'étais pas sûr de la description, mais je le
jetais

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

console.info(currencyFormat(2665));   // $2,665.00
console.info(currencyFormat(102665)); // $102,665.00

3

Voici également une fonction générique qui peut mettre en forme n'importe quel nombre de décimales:

function numberFormat(val, decimalPlaces) {

    var multiplier = Math.pow(10, decimalPlaces);
    return (Math.round(val * multiplier) / multiplier).toFixed(decimalPlaces);
}

3

Lorsqu'un formatage spécifique est requis, vous devez écrire votre propre routine ou utiliser une fonction de bibliothèque qui fait ce dont vous avez besoin. La fonctionnalité de base ECMAScript est généralement insuffisante pour afficher des nombres formatés.

Une explication approfondie de l'arrondi et du formatage est disponible ici: http://www.merlyn.demon.co.uk/js-round.htm#RiJ

En règle générale, l'arrondi et la mise en forme ne doivent être effectués qu'en dernière étape avant la sortie. Cela peut entraîner des erreurs inattendues et détruire la mise en forme.


Il y a des moments où je secoue la tête à mon choix pour m'impliquer si profondément ces derniers temps dans toute cette plateforme JS / Ecma. :( "Lorsqu'un formatage spécifique est requis, vous devez écrire votre propre routine ou utiliser une fonction de bibliothèque qui fait ce dont vous avez besoin. La fonctionnalité ECMAScript de base est généralement insuffisante pour afficher des nombres formatés." mais parce que ce fait existe. Juste triste. Allez-y, Javascript! :)
ChrisH

2

function number_format(string,decimals=2,decimal=',',thousands='.',pre='R$ ',pos=' Reais'){
  var numbers = string.toString().match(/\d+/g).join([]);
  numbers = numbers.padStart(decimals+1, "0");
  var splitNumbers = numbers.split("").reverse();
  var mask = '';
  splitNumbers.forEach(function(d,i){
    if (i == decimals) { mask = decimal + mask; }
    if (i>(decimals+1) && ((i-2)%(decimals+1))==0) { mask = thousands + mask; }
    mask = d + mask;
  });
  return pre + mask + pos;
}
var element = document.getElementById("format");
var money= number_format("10987654321",2,',','.');
element.innerHTML = money;
#format{
display:inline-block;
padding:10px;
border:1px solid #ddd;
background:#f5f5f5;
}
<div id='format'>Test 123456789</div>


2

Il suffit de courir dans celui-ci du fil le plus long, voici ma solution:

parseFloat(Math.round((parseFloat(num * 100)).toFixed(2)) / 100 ).toFixed(2)

Faites-moi savoir si quelqu'un peut percer un trou


2


2
Ce morceau de code est suffisant pour répondre à vos besoins parseFloat(num.toFixed(2))
kva

1

Vous ne nous donnez pas l'image complète.

javascript:alert(parseFloat(1).toFixed(2))affiche 1,00 dans mes navigateurs lorsque je le colle dans la barre d’emplacement. Cependant, si vous lui faites quelque chose par la suite, il reviendra.

var num = 2
document.getElementById('spanId').innerHTML=(parseFloat(num).toFixed(2)-1)


shows 1 and not 1.00

Fonctionne en FF 50, Chrome 49 et IE 8
Florian Straub

1
var quantity = 12;

var import1 = 12.55;

var total = quantity * import1;

var answer = parseFloat(total).toFixed(2);

document.write(answer);

1

J'ai dû choisir entre les conversions parseFloat () et Number () avant de pouvoir appeler toFixed (). Voici un exemple d'une entrée utilisateur de mise en forme numérique post-capture.

HTML:

<input type="number" class="dec-number" min="0" step="0.01" />

Gestionnaire d'événements:

$('.dec-number').on('change', function () {
     const value = $(this).val();
     $(this).val(value.toFixed(2));
});

Le code ci-dessus entraînera une exception TypeError. Notez que bien que le type d'entrée html soit "nombre", l'entrée utilisateur est en fait un type de données "chaîne". Cependant, la fonction toFixed () ne peut être invoquée que sur un objet qui est un nombre.

Mon code final ressemblerait à ceci:

$('.dec-number').on('change', function () {
     const value = Number($(this).val());
     $(this).val(value.toFixed(2));
});

La raison pour laquelle je préfère lancer avec Number () vs parseFloat () est parce que je n'ai pas à effectuer de validation supplémentaire ni pour une chaîne d'entrée vide, ni pour la valeur NaN. La fonction Number () gérerait automatiquement une chaîne vide et la convertirait à zéro.


0

J'aime:

var num = 12.749;
parseFloat((Math.round(num * 100) / 100).toFixed(2)); // 123.75

Arrondissez le nombre avec 2 décimales, puis assurez-vous de l'analyser avec parseFloat() pour renvoyer Number, pas String, sauf si vous ne vous souciez pas s'il s'agit de String ou Number.


Je suppose que si le but était d'afficher avec une précision de 2 décimales, l'analyse du flotteur gâcherait cela. Par exempleparseFloat("1.00") // 1
Stijn de Witt

0

Étendre un objet Math avec une méthode de précision

Object.defineProperty(Math, 'precision',{
   value: function (value,precision,type){
             var v = parseFloat(value),
                 p = Math.max(precision,0)||0,
                 t = type||'round';
              return (Math[t](v*Math.pow(10,p))/Math.pow(10,p)).toFixed(p);
          }
    });

console.log(
    Math.precision(3.1,3), // round 3 digits 
    Math.precision(0.12345,2,'ceil'), // ceil 2 digits
    Math.precision(1.1) // integer part
)



0

voici une autre solution pour arrondir uniquement en utilisant le plancher, ce qui signifie que le montant calculé ne sera pas supérieur au montant d'origine (parfois nécessaire pour les transactions):

Math.floor(num* 100 )/100;

0

Vous pouvez essayer ce code:

    function FormatNumber(number, numberOfDigits = 2) {
        try {
            return new Intl.NumberFormat('en-US').format(parseFloat(number).toFixed(2));
        } catch (error) {
            return 0;
        }
    }

    var test1 = FormatNumber('1000000.4444');
    alert(test1); // 1,000,000.44

    var test2 = FormatNumber(100000000000.55555555, 4);
    alert(test2); // 100,000,000,000.56

0

Essayez le code ci-dessous:

function numberWithCommas(number) { 

   var newval = parseFloat(Math.round(number * 100) / 100).toFixed(2);

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


-3

Voici comment je résous mon problème:

parseFloat(parseFloat(floatString).toFixed(2));
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.