web-dev-qa-db-fra.com

Numéro de format pour toujours afficher 2 décimales

Je souhaite formater mes nombres pour qu'ils affichent toujours 2 décimales, arrondis le cas échéant.

Exemples:

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

J'ai utilisé ceci: 

parseFloat(num).toFixed(2);

Mais il affiche 1 comme 1, plutôt que 1.00.

javascriptfloating-pointnumber-formatting
602
Varada

Cela fonctionne bien dans FF4:

parseFloat(Math.round(num3 * 100) / 100).toFixed(2);

Démo en direct

var num1 = "1";
document.getElementById('num1').innerHTML = parseFloat(Math.round(num1 * 100) / 100).toFixed(2);

var num2 = "1.341";
document.getElementById('num2').innerHTML = parseFloat(Math.round(num2 * 100) / 100).toFixed(2);

var num3 = "1.345";
document.getElementById('num3').innerHTML = parseFloat(Math.round(num3 * 100) / 100).toFixed(2);
span {
    border: 1px solid #000;
    margin: 5px;
    padding: 5px;
}
<span id="num1"></span>
<span id="num2"></span>
<span id="num3"></span>

Notez que arrondira à 2 décimales, l’entrée 1.346 renverra 1.35.

873
drudge
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


document.getElementById('line1').innerHTML = Number(1).toFixed(2);
document.getElementById('line2').innerHTML = Number(1.341).toFixed(2);
document.getElementById('line3').innerHTML = Number(1.345).toFixed(2);
document.getElementById('line4').innerHTML = Number(1.3450001).toFixed(2);
<span id="line1"></span>
<br/>
<span id="line2"></span>
<br/>
<span id="line3"></span>
<br/>
<span id="line4"></span>

240
Abel ANEIROS
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
18
Tiberiu Petcu

Réponse la plus simple:

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

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

13
macio.Jun

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

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
11
PirateApp

Pour arrondir le plus précisément possible, 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 , this article, et Référence Math.round de MDN .

10
Nate
var number = 123456.789;


console.log(new Intl.NumberFormat('en-IN', { maximumFractionDigits: 2 }).format(number));

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

8
zloctb

Si vous utilisez déjà jQuery, vous pouvez utiliser le plug-in 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 jQuery Number Format de GitHub .

8
Sam Sehnert

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>

7
KooiInc

Vous recherchez 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
samwise

Convertit 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
Behnam Mohammadi

Si un formatage spécifique est requis, vous devez écrire votre propre routine ou utiliser une fonction de bibliothèque répondant à vos besoins. La fonctionnalité ECMAScript de base est généralement insuffisante pour afficher des nombres formatés.

Une explication détaillée des arrondis et du formatage est disponible ici: http://www.merlyn.demon.co.uk/js-round.htm#RiJ

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

3
RobG

Voici également une fonction générique pouvant formater en un nombre quelconque de décimales:

function numberFormat(val, decimalPlaces) {

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

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
Leonardo Filipe
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
2
Ar No
var quantity = 12;

var import1 = 12.55;

var total = quantity * import1;

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

document.write(answer);
1
Darshak Shekhda

Je devais choisir entre les conversions parseFloat () et Number () avant de pouvoir appeler toFixed (). Voici un exemple de formatage numérique après saisie de l'utilisateur.

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 "numéro", l’entrée utilisateur est en réalité 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 privilégie le casting avec Number () par rapport à parseFloat () est 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 () traiterait automatiquement une chaîne vide et la convertirait à zéro.

1
vitek

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 faites quelque chose par la suite, cela reviendra. 

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


shows 1 and not 1.00
1
mplungjan

Courez dans le 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

1
Sam Johnson

J'aime:

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

Arrondissez le nombre avec 2 décimales, Assurez-vous ensuite de l’analyser avec parseFloat() Pour renvoyer Number, et non String, à moins que vous ne vouliez pas savoir si String ou Number.

0
Yuichi

Étendre Math objet avec précision méthode

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
bortunac

numéro de fonctionWithCommas (numéro) {

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

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

}

0
Tsuna Sawada

voici une autre solution pour arrondir uniquement en utilisant floor, c'est-à-dire en s'assurant que le montant calculé ne sera pas supérieur au montant initial (parfois nécessaire pour les transactions):

0
Naty

Pour les navigateurs modernes, utilisez toLocaleString :

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

Spécifiez une balise de paramètres régionaux en tant que premier paramètre pour contrôler le séparateur décimal . Pour un point, utilisez, par exemple, les paramètres régionaux anglais U.S.:

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. Par exemple, si vous utilisez les paramètres régionaux suédois/suédois:

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

cela donnera:

1,35

0
holmis83

parseInt(number * 100) / 100; a travaillé pour moi.

0
Be Wake Pandey