Formater un nombre avec exactement deux décimales en JavaScript
J'ai cette ligne de code qui arrondit mes nombres à deux décimales. Mais je reçois des nombres comme celui-ci: 10,8, 2,4, etc. Ce n’est pas mon idée de deux décimales, alors comment puis-je améliorer ce qui suit?
Math.round(price*Math.pow(10,2))/Math.pow(10,2);
Je veux des chiffres comme 10,80, 2,40, etc. L'utilisation de jQuery me convient parfaitement.
Pour formater un nombre en utilisant la notation en point fixe, vous pouvez simplement utiliser la méthode toFixed :
(10.8).toFixed(2); // "10.80"
var num = 2.4;
alert(num.toFixed(2)); // "2.40"
Notez que toFixed() renvoie une chaîne.
IMPORTANT: Notez que toFixed ne arrondit pas réellement, 90% du temps, il retournera la valeur arrondie mais dans de nombreux cas, il ne le sera pas. travaille réellement. Essayez ceci dans votre console:
2.005.toFixed(2)
Vous aurez la mauvaise réponse
Il n’existe aucun moyen naturel d’obtenir un arrondi décimal en javascript, vous aurez besoin de votre propre fichier polyfill ou d’utilisation d’une bibliothèque. Vous pouvez consulter le polyfill de mozilla pour cela https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round
Il s'agit d'un sujet ancien, mais qui reste classé parmi les résultats Google et les solutions proposées partagent le même problème de décimales à virgule flottante. Voici la fonction (très générique) que j'utilise, grâce à 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 constater, nous n’avons pas les problèmes suivants:
round(1.275, 2); // Returns 1.28
round(1.27499, 2); // Returns 1.27
Cette généricité fournit également des trucs sympas:
round(1234.5678, -2); // Returns 1200
round(1.2345678e+2, 2); // Returns 123.46
round("123.45"); // Returns 123
Maintenant, pour répondre à la question du PO, il faut taper:
round(10.8034, 2).toFixed(2); // Returns "10.80"
round(10.8, 2).toFixed(2); // Returns "10.80"
Ou, pour une fonction plus concise et moins 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 (grâce à @ t-j-crowder !):
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);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;
}<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>J'ajoute généralement ceci à ma bibliothèque personnelle, et après quelques suggestions et en utilisant également la solution @TIMINeutron, et en le rendant adaptable à la longueur décimale, celle-ci convient mieux:
function precise_round(num, decimals) {
var t = Math.pow(10, decimals);
return (Math.round((num * t) + (decimals>0?1:0)*(Math.sign(num) * (10 / Math.pow(100, decimals)))) / t).toFixed(decimals);
}
fonctionnera pour les exceptions signalées.
Je ne sais pas pourquoi je ne peux pas ajouter de commentaire à une réponse précédente (peut-être que je suis aveuglément aveugle), mais j'ai trouvé une solution en utilisant la réponse de @ Miguel:
function precise_round(num,decimals) {
return Math.round(num*Math.pow(10, decimals)) / Math.pow(10, decimals);
}
Et ses deux commentaires (de @ bighostkim et @Imre):
- Problème avec
precise_round(1.275,2)ne pas retourner 1.28 - Problème avec
precise_round(6,2)ne retournant pas 6.00 (comme il le voulait).
Ma solution finale est la suivante:
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 constater, j'ai dû ajouter un peu de "correction" (ce n'est pas ce que c'est, mais comme Math.round est une perte - vous pouvez le vérifier sur jsfiddle.net - c'est la seule façon pour moi de "réparer" " il). Il ajoute 0,001 au nombre déjà rempli, il ajoute donc un 1 trois 0s à droite de la valeur décimale. Donc, il devrait être sécuritaire d'utiliser.
Après cela, j’ai ajouté .toFixed(decimal) pour toujours sortir le nombre au bon format (avec la bonne quantité de décimales).
Donc c'est à peu près tout. Utilisez-le bien;)
EDIT: ajout de la fonctionnalité à la "correction" des nombres négatifs.
Une façon d’être sûr à 100% d’obtenir un nombre avec 2 décimales:
(Math.round(num*100)/100).toFixed(2)
Si cela provoque des erreurs d'arrondi, vous pouvez utiliser ce qui suit, comme James l'a expliqué dans son commentaire:
(Math.round((num * 1000)/10)/100).toFixed(2)
toFixed (n) fournit n longueur après le point décimal; toPrecision (x) fournit x longueur totale.
Utilisez 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 soit fixe, utilisez
result = num.toFixed(2);
Je n'ai pas trouvé de solution précise à ce problème, j'ai donc créé le mien:
function inprecise_round(value, decPlaces) {
return Math.round(value*Math.pow(10,decPlaces))/Math.pow(10,decPlaces);
}
function precise_round(value, decPlaces){
var val = value * Math.pow(10, decPlaces);
var fraction = (Math.round((val-parseInt(val))*10)/10);
//this line is for consistency with .NET Decimal.Round behavior
// -342.055 => -342.06
if(fraction == -0.5) fraction = -0.6;
val = Math.round(parseInt(val) + fraction) / Math.pow(10, decPlaces);
return val;
}
Exemples:
function inprecise_round(value, decPlaces) {
return Math.round(value * Math.pow(10, decPlaces)) / Math.pow(10, decPlaces);
}
function precise_round(value, decPlaces) {
var val = value * Math.pow(10, decPlaces);
var fraction = (Math.round((val - parseInt(val)) * 10) / 10);
//this line is for consistency with .NET Decimal.Round behavior
// -342.055 => -342.06
if (fraction == -0.5) fraction = -0.6;
val = Math.round(parseInt(val) + fraction) / Math.pow(10, decPlaces);
return val;
}
// This may produce different results depending on the browser environment
console.log("342.055.toFixed(2) :", 342.055.toFixed(2)); // 342.06 on Chrome & IE10
console.log("inprecise_round(342.055, 2):", inprecise_round(342.055, 2)); // 342.05
console.log("precise_round(342.055, 2) :", precise_round(342.055, 2)); // 342.06
console.log("precise_round(-342.055, 2) :", precise_round(-342.055, 2)); // -342.06
console.log("inprecise_round(0.565, 2) :", inprecise_round(0.565, 2)); // 0.56
console.log("precise_round(0.565, 2) :", precise_round(0.565, 2)); // 0.57@heridev et moi avons créé une petite fonction dans jQuery.
Vous pouvez essayer ensuite:
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
});
});
DEMO ONLINE:
Le problème avec les valeurs à virgule flottante est qu’elles essaient de représenter une quantité infinie de valeurs (continues) avec une quantité fixe de bits. Alors, naturellement, il doit y avoir une perte en jeu, et vous allez être mordu avec certaines valeurs.
Lorsqu'un ordinateur stocke 1.275 en tant que valeur à virgule flottante, il ne se souvient pas réellement s'il s'agissait de 1.275 ou 1.27499999999999993, ou même de 1.27500000000000002. Ces valeurs devraient donner des résultats différents après avoir arrondi à deux décimales, mais elles ne le seront pas car, pour l'ordinateur, elles ont l'air exactement les mêmes après le stockage en tant que valeurs à virgule flottante et il n'y a aucun moyen de restaurer les données perdues. Tout autre calcul ne fera qu'accumuler une telle imprécision.
Donc, si la précision compte, vous devez éviter les valeurs en virgule flottante dès le début. Les options les plus simples sont de
- utiliser une bibliothèque dédiée
- utiliser des chaînes pour stocker et transmettre les valeurs (accompagné d'opérations sur les chaînes)
- utilisez des nombres entiers (par exemple, vous pourriez faire passer le montant en centièmes de votre valeur réelle, par exemple un montant en cents au lieu d'un montant en dollars)
Par exemple, lorsque vous utilisez des entiers pour stocker le nombre de centièmes, la fonction permettant de 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 cordes, vous aurez besoin d'arrondi, mais cela reste 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));
Notez que cette fonction arrondit au plus proche, se rapproche de zéro, tandis que IEEE 754 recommande d'arrondir au plus proche, lie au pair comme comportement par défaut pour les opérations en virgule flottante. De telles modifications sont laissées à titre d'exercice pour le lecteur :)
Arrondis ta valeur décimale, puis utilise toFixed(x) pour le ou les chiffres prévus.
function parseDecimalRoundAndFixed(num,dec){
var d = Math.pow(10,dec);
return (Math.round(num * d) / d).toFixed(dec);
}
Appel
parseDecimalRoundAndFixed (10.800243929,4) => 10.80 parseDecimalRoundAndFixed (10.807243929,2) => 10.81
Voici un simple
function roundFloat(num,dec){
var d = 1;
for (var i=0; i<dec; i++){
d += "0";
}
return Math.round(num * d) / d;
}
Utilisez comme alert(roundFloat(1.79209243929,4));
Arrondir vers le bas
function round_down(value, decPlaces) {
return Math.floor(value * Math.pow(10, decPlaces)) / Math.pow(10, decPlaces);
}
Arrondir
function round_up(value, decPlaces) {
return Math.ceil(value * Math.pow(10, decPlaces)) / Math.pow(10, decPlaces);
}
Rond le plus proche
function round_nearest(value, decPlaces) {
return Math.round(value * Math.pow(10, decPlaces)) / Math.pow(10, decPlaces);
}
Merged https://stackoverflow.com/a/7641824/1889449 et https://www.kirupa.com/html5/rounding_numbers_in_javascript.htm Merci. leur.
Mettez le texte suivant dans une portée globale:
Number.prototype.getDecimals = function ( decDigCount ) {
return this.toFixed(decDigCount);
}
et puis essayez :
var a = 56.23232323;
a.getDecimals(2); // will return 56.23
Mettre à jour
Notez que toFixed() ne peut fonctionner que pour le nombre de décimales entre 0-20 c'est-à-dire a.getDecimals(25) peut générer une erreur javascript, donc pour vous permettre d'ajouter une vérification supplémentaire i.e.
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: Arrondir les décimales en JavaScript
En utilisant cette réponse par référence: https://stackoverflow.com/a/21029698/454827
Je construis une fonction pour obtenir des nombres dynamiques de nombres décimaux:
function toDec(num, dec)
{
if(typeof dec=='undefined' || dec<0)
dec = 2;
var tmp = dec + 1;
for(var i=1; i<=tmp; i++)
num = num * 10;
num = num / 10;
num = Math.round(num);
for(var i=1; i<=dec; i++)
num = num / 10;
num = num.toFixed(dec);
return num;
}
exemple de travail: https://jsfiddle.net/wpxLduLc/
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<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>J'ai eu quelques idées de ce post il y a quelques mois, mais aucune des réponses ici, ni des réponses d'autres posts/blogs ne pouvait gérer tous les scénarios (par exemple, des nombres négatifs et des "numéros chanceux" trouvés par notre testeur). Finalement, notre testeur n'a trouvé aucun problème avec cette méthode ci-dessous. Coller un extrait de mon code:
fixPrecision: function (value) {
var me = this,
nan = isNaN(value),
precision = me.decimalPrecision;
if (nan || !value) {
return nan ? '' : value;
} else if (!me.allowDecimals || precision <= 0) {
precision = 0;
}
//[1]
//return parseFloat(Ext.Number.toFixed(parseFloat(value), precision));
precision = precision || 0;
var negMultiplier = value < 0 ? -1 : 1;
//[2]
var numWithExp = parseFloat(value + "e" + precision);
var roundedNum = parseFloat(Math.round(Math.abs(numWithExp)) + 'e-' + precision) * negMultiplier;
return parseFloat(roundedNum.toFixed(precision));
},
J'ai aussi des commentaires de code (désolé j'ai déjà oublié tous les détails) ... Je poste ici ma réponse pour référence future:
9.995 * 100 = 999.4999999999999
Whereas 9.995e2 = 999.5
This discrepancy causes Math.round(9.995 * 100) = 999 instead of 1000.
Use e notation instead of multiplying /dividing by Math.Pow(10,precision).
Avec ces exemples, vous aurez toujours une erreur en essayant 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);
}
Voici ma solution en 1 ligne:Number((yourNumericValueHere).toFixed(2));
Voici ce qui se passe:
1) Tout d'abord, vous appliquez .toFixed(2) sur le nombre que vous souhaitez arrondir à la décimale. Notez que cela convertira la valeur en chaîne de nombre. Donc, si vous utilisez TypeScript, cela produira une erreur comme celle-ci:
"Le type 'chaîne' n'est pas assignable au type 'numéro'"
2) Pour récupérer la valeur numérique ou convertir la chaîne en valeur numérique, appliquez simplement la fonction Number() sur cette valeur dite "chaîne".
Pour plus de précision, regardez l'exemple ci-dessous:
EXEMPLE: .__ J'ai un montant comportant jusqu'à 5 chiffres dans la décimale et j'aimerais le raccourcir à 2 décimales. Je le fais comme ça:
var price = 0.26453;
var priceRounded = Number((price).toFixed(2));
console.log('Original Price: ' + price);
console.log('Price Rounded: ' + priceRounded);Number(((Math.random() * 100) + 1).toFixed(2))
cela retournera un nombre aléatoire de 1 à 100 arrondi à 2 décimales.
/**
* 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 correctAussi simple que cela.
var rounded_value=Math.round(value * 100) / 100;
(Math.round((10.2)*100)/100).toFixed(2)
Cela devrait donner: 10.20
(Math.round((.05)*100)/100).toFixed(2)
Cela devrait donner: 0.05
(Math.round((4.04)*100)/100).toFixed(2)
Cela devrait donner: 4.04
etc.
J'ai trouvé un moyen très simple de résoudre ce problème pour moi et qui peut être utilisé ou adapté:
td[row].innerHTML = price.toPrecision(price.toFixed(decimals).length
Je résous le problème du modificateur .Support 2 décimal uniquement.
$(function(){
//input number only.
convertNumberFloatZero(22); // output : 22.00
convertNumberFloatZero(22.5); // output : 22.50
convertNumberFloatZero(22.55); // output : 22.55
convertNumberFloatZero(22.556); // output : 22.56
convertNumberFloatZero(22.555); // output : 22.55
convertNumberFloatZero(22.5541); // output : 22.54
convertNumberFloatZero(22222.5541); // output : 22,222.54
function convertNumberFloatZero(number){
if(!$.isNumeric(number)){
return 'NaN';
}
var numberFloat = number.toFixed(3);
var splitNumber = numberFloat.split(".");
var cNumberFloat = number.toFixed(2);
var cNsplitNumber = cNumberFloat.split(".");
var lastChar = splitNumber[1].substr(splitNumber[1].length - 1);
if(lastChar > 0 && lastChar < 5){
cNsplitNumber[1]--;
}
return Number(splitNumber[0]).toLocaleString('en').concat('.').concat(cNsplitNumber[1]);
};
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>Vous pouvez également utiliser la méthode .toPrecision() et un code personnalisé et toujours arrondir au nième chiffre décimal, quelle que soit la longueur de la partie int.
function glbfrmt (number, decimals, seperator) {
return typeof number !== 'number' ? number : number.toPrecision( number.toString().split(seperator)[0].length + decimals);
}
Vous pouvez également en faire un plugin pour une meilleure utilisation.
/*Due to all told stuff. You may do 2 things for different purposes:
When showing/printing stuff use this in your alert/innerHtml= contents:
YourRebelNumber.toFixed(2)*/
var aNumber=9242.16;
var YourRebelNumber=aNumber-9000;
alert(YourRebelNumber);
alert(YourRebelNumber.toFixed(2));
/*and when comparing use:
Number(YourRebelNumber.toFixed(2))*/
if(YourRebelNumber==242.16)alert("Not Rounded");
if(Number(YourRebelNumber.toFixed(2))==242.16)alert("Rounded");
/*Number will behave as you want in that moment. After that, it'll return to its defiance.
*/C’est très simple et fonctionne aussi bien que les autres:
function parseNumber(val, decimalPlaces) {
if (decimalPlaces == null) decimalPlaces = 0
var ret = Number(val).toFixed(decimalPlaces)
return Number(ret)
}
Comme toFixed () ne peut être appelé que sur des nombres et retourne malheureusement une chaîne, cela effectue toute l'analyse syntaxique dans les deux sens. Vous pouvez passer une chaîne ou un nombre, et vous obtenez un numéro à chaque fois! L'appel de parseNumber (1.49) vous donnera 1, et parseNumber (1.49,2) vous donnera 1,50. Tout comme les meilleurs d'entre eux!