HOWTO · JavaScript

Arrondir un nombre à 2 décimales en JavaScript

Ce tutoriel enseigne comment arrondir un nombre à au plus `2` décimales dans JavaScript?

Sur cette page

Utilisez toFixed(2) lorsque vous avez besoin d’un texte affichant toujours deux chiffres après le point décimal. Cette méthode renvoie une chaîne de caractères, ce qui permet de conserver les zéros finaux. Pour obtenir un résultat numérique, utilisez Math.round(value * 100) / 100 ou convertissez la chaîne formatée avec Number(). Ces méthodes conviennent aux valeurs courantes, mais JavaScript stocke les nombres en virgule flottante binaire : des valeurs décimales comme 1.005 peuvent donc ne pas être arrondies comme vous le souhaitez.

Formater un nombre avec toFixed()

Appelez toFixed(2) sur un nombre pour obtenir une chaîne comportant deux chiffres après le point décimal. C’est utile pour une étiquette, une cellule de tableau ou tout autre affichage où 5.60 doit conserver son zéro final. La valeur renvoyée est toutefois du texte ; pour effectuer des opérations arithmétiques, vous devez d’abord la reconvertir en nombre.

Exécutez cet exemple :

Le code et les libellés ou sorties affichés dans cette section restent en anglais.

const value = 5.6789;
const fixedText = value.toFixed(2);
const roundedValue = Math.round(value * 100) / 100;
const numericValue = Number(value.toFixed(2));

function roundToTwo(number) {
  const shifted = Number(`${number}e2`);
  return Number(`${Math.round(shifted)}e-2`);
}

const shiftedValue = roundToTwo(value);
console.log(fixedText, roundedValue, numericValue, shiftedValue);
5.68 5.68 5.68 5.68

Dans l’ordre, les valeurs correspondent à la chaîne renvoyée par toFixed(), au nombre renvoyé par Math.round(), à la conversion avec Number(), puis au résultat de l’assistant de décalage décimal. Seule la première valeur est du texte ; la convertir avec Number() donne un nombre qui ne conserve pas les zéros finaux.

Arrondir un nombre avec Math.round()

La multiplication par 100 déplace le chiffre des centièmes à la position des unités. Math.round() arrondit alors cette valeur mise à l’échelle à l’entier le plus proche, puis la division par 100 rétablit l’échelle décimale. Le résultat reste un nombre, pratique pour les calculs ultérieurs, mais il n’indique pas combien de chiffres décimaux afficher.

Math.round() arrondit les valeurs à mi-chemin vers l’infini positif. Par exemple, la valeur à mi-chemin -1.5 est arrondie à -1 : les nombres négatifs ne suivent donc pas une règle qui arrondirait toujours en s’éloignant de zéro. La multiplication utilise elle aussi l’arithmétique en virgule flottante ; cette méthode est concise, mais ne garantit pas un arrondi décimal exact pour toutes les entrées.

Comprendre les cas limites de la virgule flottante

Le type Number de JavaScript représente les valeurs en virgule flottante binaire. De nombreuses fractions décimales ne peuvent pas être représentées exactement en binaire, et les opérations intermédiaires peuvent aboutir juste en dessous ou au-dessus de la valeur décimale visée. Un exemple courant est 1.005 : sa valeur stockée est légèrement inférieure à la fraction décimale, si bien que 1.005.toFixed(2) peut produire "1.00". La mise à l’échelle avant l’appel à Math.round() peut également donner un résultat inattendu.

Number.EPSILON correspond à l’écart entre 1 et le nombre représentable suivant. L’ajouter avant l’arrondi peut aider pour certaines valeurs proches de 1, mais l’écart entre les nombres représentables varie selon leur ordre de grandeur. Un ajustement fixe avec epsilon ne corrige donc pas toutes les valeurs ni toutes les suites d’opérations.

toPrecision() contrôle le nombre de chiffres significatifs, et non le nombre de chiffres après le point décimal. Par exemple, Number((1.23456).toPrecision(4)).toFixed(2) produit "1.24", tandis que (1.23456).toFixed(2) produit "1.23" : la première opération arrondit à 1.235, puis la seconde arrondit à nouveau cette valeur intermédiaire. Il s’agit d’un cas particulier de double arrondi, pas d’une correction générale ; la première mise en forme peut supprimer des informations nécessaires à l’étape suivante.

Utiliser un assistant de décalage décimal

L’assistant présenté plus haut décale l’échelle décimale à l’aide de la notation exponentielle, arrondit la valeur décalée, puis rétablit l’échelle initiale. Il peut éviter certaines surprises dues à la multiplication directe d’une fraction décimale par 100, tout en renvoyant un nombre. Pour arrondir à un autre nombre de décimales, adaptez l’exposant : utilisez ce nombre pour le décalage initial et son opposé pour le décalage de retour.

Considérez cet assistant comme une solution pratique pour les valeurs finies courantes, et non comme une bibliothèque d’arithmétique décimale. La représentation en virgule flottante reste en vigueur, et les ordres de grandeur extrêmes ou les valeurs spéciales peuvent nécessiter un traitement distinct. Si vous avez besoin d’un comportement décimal exact pour des montants ou de la comptabilité, utilisez des unités mineures entières lorsque le domaine le permet, ou une bibliothèque d’arithmétique décimale dont les règles sont adaptées à l’application. La mise en forme d’un résultat pour l’affichage et les calculs décimaux exacts sont deux besoins distincts.

Choisir la bonne méthode

Choisissez toFixed(2) pour afficher un texte avec un nombre fixe de décimales : la méthode conserve les zéros finaux et renvoie une chaîne. Choisissez Math.round(value * 100) / 100 lorsqu’un résultat numérique concis vous est utile et que la plage de valeurs convient à l’arithmétique courante en virgule flottante. Choisissez Number(value.toFixed(2)) si vous voulez appliquer le comportement d’arrondi de toFixed(), puis obtenir un nombre, en sachant que les valeurs numériques ne conservent pas leur format d’affichage. L’assistant de décalage décimal constitue une autre possibilité pour obtenir un nombre, à condition d’en comprendre les limites.

Aucune de ces méthodes ne rend les nombres JavaScript exacts en base décimale. Dans une interface, formatez la valeur au moment de l’afficher. Pour les calculs soumis à des règles décimales strictes, définissez explicitement la règle d’arrondi et la représentation numérique, puis testez des valeurs représentatives du domaine de votre application.