Le formatage d'un nombre à deux décimales en JavaScript

C'est un vieux sujet, mais toujours en tête du classement des résultats de Google et les solutions proposées, de partager le même point flottant décimales question. Voici la (très générique) fonction que j'utilise, grâce à la MDN:

function round(value, exp) {
  if (typeof exp === 'undefined' || +exp === 0)
    return Math.round(value);

  value = +value;
  exp = +exp;

  if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0))
    return NaN;

  //Shift
  value = value.toString().split('e');
  value = Math.round(+(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)));

  //Shift back
  value = value.toString().split('e');
  return +(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp));
}

Comme nous pouvons le voir, nous n'avons pas ces problèmes:

round(1.275, 2);   //Returns 1.28
round(1.27499, 2); //Returns 1.27

Ce genericity fournit également des trucs cool:

round(1234.5678, -2);   //Returns 1200
round(1.2345678e+2, 2); //Returns 123.46
round("123.45");        //Returns 123

---

Maintenant, pour répondre à l'OP de la question, on a pour type:

round(10.8034, 2).toFixed(2); //Returns "10.80"
round(10.8, 2).toFixed(2);    //Returns "10.80"

---

Ou, pour un plus concis, moins de la fonction générique:

function round2Fixed(value) {
  value = +value;

  if (isNaN(value))
    return NaN;

  //Shift
  value = value.toString().split('e');
  value = Math.round(+(value[0] + 'e' + (value[1] ? (+value[1] + 2) : 2)));

  //Shift back
  value = value.toString().split('e');
  return (+(value[0] + 'e' + (value[1] ? (+value[1] - 2) : -2))).toFixed(2);
}

Vous pouvez l'appeler avec:

round2Fixed(10.8034); //Returns "10.80"
round2Fixed(10.8);    //Returns "10.80"

---

Divers exemples et tests (merci à @t-j-crowder!):

JS:

function round(value, exp) {
if (typeof exp === 'undefined' || +exp === 0)
return Math.round(value);
value = +value;
exp = +exp;
if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0))
return NaN;
//Shift
value = value.toString().split('e');
value = Math.round(+(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)));
//Shift back
value = value.toString().split('e');
return +(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp));
}
function naive(value, exp) {
if (!exp) {
return Math.round(value);
}
var pow = Math.pow(10, exp);
return Math.round(value * pow) / pow;
}
function test(val, places) {
subtest(val, places);
val = typeof val === "string" ? "-" + val : -val;
subtest(val, places);
}
function subtest(val, places) {
var placesOrZero = places || 0;
var naiveResult = naive(val, places);
var roundResult = round(val, places);
if (placesOrZero >= 0) {
naiveResult = naiveResult.toFixed(placesOrZero);
roundResult = roundResult.toFixed(placesOrZero);
} else {
naiveResult = naiveResult.toString();
roundResult = roundResult.toString();
}
$("<tr>")
.append($("<td>").text(JSON.stringify(val)))
.append($("<td>").text(placesOrZero))
.append($("<td>").text(naiveResult))
.append($("<td>").text(roundResult))
.appendTo("#results");
}
test(0.565, 2);
test(0.575, 2);
test(0.585, 2);
test(1.275, 2);
test(1.27499, 2);
test(1234.5678, -2);
test(1.2345678e+2, 2);
test("123.45");
test(10.8034, 2);
test(10.8, 2);
test(1.005, 2);
test(1.0005, 2);

CSS:

table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid #ddd;
}
td, th {
padding: 4px;
}
th {
font-weight: normal;
font-family: sans-serif;
}
td {
font-family: monospace;
}

HTML:

<table>
<thead>
<tr>
<th>Input</th>
<th>Places</th>
<th>Naive</th>
<th>Thorough</th>
</tr>
</thead>
<tbody id="results">
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Je ne sais pas pourquoi je ne peux pas ajouter un commentaire à une précédente réponse (peut-être que je suis désespérément à l'aveugle, je ne sais pas), mais j'ai trouvé une solution en utilisant @Miguel de réponse:

function precise_round(num,decimals) {
return Math.round(num*Math.pow(10, decimals)) / Math.pow(10, decimals);
}

Et ses deux commentaires (à partir de @bighostkim et @Imre):

• Problème avec precise_round(1.275,2) pas de retour 1.28
• Problème avec precise_round(6,2) de ne pas retourner au moins 6,00 (comme il le voulait).

Ma solution finale est comme suit:

function precise_round(num,decimals) {
var sign = num >= 0 ? 1 : -1;
return (Math.round((num*Math.pow(10,decimals)) + (sign*0.001)) / Math.pow(10,decimals)).toFixed(decimals);
}

Comme vous pouvez le voir j'ai dû ajouter un peu de "correction" (ce n'est pas ce qu'il est, mais depuis les Mathématiques.tour entraîne une perte - vous pouvez le vérifier sur jsfiddle.net - c'est la seule façon que je savais comment "réparer"). Il ajoute 0,001 à la déjà collier de nombre, il est l'ajout d'un 1 trois 0s à la droite de la valeur décimale. Donc il devrait être sûr d'utiliser.

Après que j'ai ajouté .toFixed(decimal) toujours de sortie, le nombre dans le format correct (avec la bonne quantité de décimales).

Donc c'est assez bien. Il faut bien l'utiliser 😉

EDIT: ajout de la fonctionnalité de la "correction" des nombres négatifs.

toFixed(n) offre n longueur après le point décimal; toPrecision(x)
fournit des x de longueur totale.

Utiliser cette méthode ci-dessous

//Example: toPrecision(4) when the number has 7 digits (3 before, 4 after)
//It will round to the tenths place
num = 500.2349;
result = num.toPrecision(4); //result will equal 500.2

ET si vous voulez que le nombre fixé utilisation

result = num.toFixed(2);

@heridev et j'ai créé une petite fonction en jQuery.

Vous pouvez essayer la prochaine:

HTML

<input type="text" name="one" class="two-digits"><br>
<input type="text" name="two" class="two-digits">​

jQuery

//apply the two-digits behaviour to elements with 'two-digits' as their class
$( function() {
$('.two-digits').keyup(function(){
if($(this).val().indexOf('.')!=-1){         
if($(this).val().split(".")[1].length > 2){                
if( isNaN( parseFloat( this.value ) ) ) return;
this.value = parseFloat(this.value).toFixed(2);
}  
}            
return this; //for chaining
});
});

DÉMO EN LIGNE:

http://jsfiddle.net/c4Wqn/

Le problème avec les valeurs à virgule flottante, c'est qu'ils sont en essayant de représenter une quantité infinie de (continue) des valeurs avec un montant fixe de bits. Alors, naturellement, il doit y avoir une certaine perte dans le jeu, et vous allez être mordu avec certaines valeurs.

Lorsqu'un ordinateur stocke 1.275 comme une valeur en virgule flottante, il ne sera pas réellement se souvenir si c'était 1.275 ou 1.27499999999999993, ou même 1.27500000000000002. Ces valeurs doivent donner des résultats différents en arrondissant à deux décimales, mais ils ne le seront pas, car pour l'ordinateur, ils regardent exactement la même après leur stockage sous forme de valeurs à virgule flottante, et il n'y a aucun moyen de restaurer les données perdues. Toutes les autres calculs ne s'accumuler une telle imprécision.

Donc, si la précision des questions, vous devez éviter les valeurs à virgule flottante à partir du début. Options les plus simples sont à

• utiliser un consacré bibliothèque
• utiliser des chaînes pour le stockage et la passant autour des valeurs (accompagné par des opérations de la chaîne)
• utiliser des entiers (par exemple, vous pourriez être en train de passer à travers le montant de quelques centièmes de votre valeur réelle, par exemple le montant en centimes au lieu de montant en dollars)

Par exemple, lors de l'utilisation de nombres entiers pour stocker le nombre de centièmes de seconde, la fonction pour trouver la valeur réelle est assez simple:

function descale(num, decimals) {
var hasMinus = num < 0;
var numString = Math.abs(num).toString();
var precedingZeroes = '';
for (var i = numString.length; i <= decimals; i++) {
precedingZeroes += '0';
}
numString = precedingZeroes + numString;
return (hasMinus ? '-' : '') 
+ numString.substr(0, numString.length-decimals) 
+ '.' 
+ numString.substr(numString.length-decimals);
}
alert(descale(127, 2));

Avec des chaînes, vous aurez besoin d'arrondi, mais c'est encore gérable:

function precise_round(num, decimals) {
var parts = num.split('.');
var hasMinus = parts.length > 0 && parts[0].length > 0 && parts[0].charAt(0) == '-';
var integralPart = parts.length == 0 ? '0' : (hasMinus ? parts[0].substr(1) : parts[0]);
var decimalPart = parts.length > 1 ? parts[1] : '';
if (decimalPart.length > decimals) {
var roundOffNumber = decimalPart.charAt(decimals);
decimalPart = decimalPart.substr(0, decimals);
if ('56789'.indexOf(roundOffNumber) > -1) {
var numbers = integralPart + decimalPart;
var i = numbers.length;
var trailingZeroes = '';
var justOneAndTrailingZeroes = true;
do {
i--;
var roundedNumber = '1234567890'.charAt(parseInt(numbers.charAt(i)));
if (roundedNumber === '0') {
trailingZeroes += '0';
} else {
numbers = numbers.substr(0, i) + roundedNumber + trailingZeroes;
justOneAndTrailingZeroes = false;
break;
}
} while (i > 0);
if (justOneAndTrailingZeroes) {
numbers = '1' + trailingZeroes;
}
integralPart = numbers.substr(0, numbers.length - decimals);
decimalPart = numbers.substr(numbers.length - decimals);
}
} else {
for (var i = decimalPart.length; i < decimals; i++) {
decimalPart += '0';
}
}
return (hasMinus ? '-' : '') + integralPart + (decimals > 0 ? '.' + decimalPart : '');
}
alert(precise_round('1.275', 2));
alert(precise_round('1.27499999999999993', 2));

Noter que cette fonction arrondit la plus proche, liens éloigne de zéro, tandis que La norme IEEE 754 recommande d'arrondi au plus près, liens à même que le comportement par défaut pour les opérations à virgule flottante. De telles modifications sont laissé comme exercice pour le lecteur 🙂

JS:

/**
* MidpointRounding away from zero ('arithmetic' rounding)
* Uses a half-epsilon for correction. (This offsets IEEE-754
* half-to-even rounding that was applied at the edge cases).
*/
function RoundCorrect(num, precision = 2) {
//half epsilon to correct edge cases.
var c = 0.5 * Number.EPSILON * num;
//	var p = Math.pow(10, precision); //slow
var p = 1; while (precision--> 0) p *= 10;
if (num < 0)
p *= -1;
return Math.round((num + c) * p) / p;
}
//testing some +ve edge cases
console.log(RoundCorrect(1.005, 2));  //1.01 correct
console.log(RoundCorrect(2.175, 2));  //2.18 correct
console.log(RoundCorrect(5.015, 2));  //5.02 correct
//testing some -ve edge cases
console.log(RoundCorrect(-1.005, 2));  //-1.01 correct
console.log(RoundCorrect(-2.175, 2));  //-2.18 correct
console.log(RoundCorrect(-5.015, 2));  //-5.02 correct

Mettre suivantes dans certains étendue globale:

Number.prototype.getDecimals = function ( decDigCount ) {
return this.toFixed(decDigCount);
}

et puis essayez:

var a = 56.23232323;
a.getDecimals(2); //will return 56.23

Mise à jour

Noter que toFixed() ne peuvent travailler que pour le nombre de décimales entre 0-20 c'est à dire a.getDecimals(25) peut générer une erreur de javascript, de sorte à prendre en compte que vous pouvez ajouter un peu de vérification supplémentaire c'est à dire

Number.prototype.getDecimals = function ( decDigCount ) {
return ( decDigCount > 20 ) ? this : this.toFixed(decDigCount);
}

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

Cela a fonctionné pour moi: L'arrondissement des Décimales en JavaScript

JS:

parse = function (data) {
data = Math.round(data*Math.pow(10,2))/Math.pow(10,2);
if (data != null) {
var lastone = data.toString().split('').pop();
if (lastone != '.') {
data = parseFloat(data);
}
}
return data;
};
$('#result').html(parse(200)); //output 200
$('#result1').html(parse(200.1)); //output 200.1
$('#result2').html(parse(200.10)); //output 200.1
$('#result3').html(parse(200.109)); //output 200.11

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="result"></div>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>

Avec ces exemples, vous obtiendrez toujours une erreur lorsque vous essayez d'arrondir le nombre 1.005 la solution consiste à utiliser une bibliothèque comme Math.js ou cette fonction:

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

Simple que cela.

var rounded_value=Math.round(value * 100) / 100;

(Math.round((10.2)*100)/100).toFixed(2)

Qui devrait donner: 10.20

(Math.round((.05)*100)/100).toFixed(2)

Qui devrait donner: 0.05

(Math.round((4.04)*100)/100).toFixed(2)

Qui devrait donner: 4.04

etc.

C'est très simple et fonctionne tout aussi bien que les autres:

function parseNumber(val, decimalPlaces) {
if (decimalPlaces == null) decimalPlaces = 0
var ret = Number(val).toFixed(decimalPlaces)
return Number(ret)
}

Depuis toFixed() peut être appelée uniquement sur les nombres, et, malheureusement, renvoie une chaîne, cela ne l'analyse pour vous dans les deux directions. Vous pouvez passer une chaîne de caractères ou un nombre, et vous obtenez un numéro de retour à chaque fois! L'appel de parseNumber(1.49) vous donnera 1, et parseNumber(1.49,2) vous donnera 1.50. Tout comme les meilleurs de l'em!

J'ai trouvé un moyen très simple qui a résolu ce problème pour moi et peut être utilisé ou adapté:

td[row].innerHTML = price.toPrecision(price.toFixed(decimals).length