Comment supprimer les zéros non significatifs après la virgule décimale ?

Introduction

Lorsque vous formatez des nombres, certaines valeurs ont naturellement des zéros à la fin après la virgule décimale. Le nombre 1,5 peut s'afficher comme 1,50, ou 3 comme 3,00. Ces zéros finaux peuvent avoir du sens pour les prix où vous souhaitez afficher les centimes de façon cohérente, mais ils semblent inutiles lors de l'affichage de statistiques ou de mesures.

L'API Intl.NumberFormat de JavaScript vous donne le contrôle sur l'apparition des zéros finaux. Vous pouvez configurer le formateur pour les supprimer, les conserver ou appliquer différentes règles selon vos besoins.

Que sont les zéros finaux

Les zéros finaux sont des zéros qui apparaissent à la fin d'un nombre après la virgule décimale. Ils ne modifient pas la valeur mathématique du nombre, mais ils affectent l'apparence du nombre lorsqu'il est affiché.

// Ces nombres ont la même valeur mais différents zéros finaux
1,5   // Pas de zéros finaux
1,50  // Un zéro final
1,500 // Deux zéros finaux

Les zéros finaux peuvent apparaître lorsque vous spécifiez le nombre de décimales à afficher. Si un nombre a moins de chiffres significatifs que le nombre de décimales spécifié, le formateur ajoute des zéros pour remplir les positions restantes.

Comment Intl.NumberFormat affiche les chiffres décimaux par défaut

Par défaut, Intl.NumberFormat affiche jusqu'à 3 chiffres décimaux et supprime les zéros finaux. Cela signifie que la plupart des nombres apparaissent sans zéros inutiles.

const formatter = new Intl.NumberFormat("en-US");

console.log(formatter.format(1.5));
// Résultat : "1.5"

console.log(formatter.format(1.50));
// Résultat : "1.5"

console.log(formatter.format(1.123456));
// Résultat : "1.123"

Le formateur traite 1,5 et 1,50 comme la même valeur et les affiche de manière identique. Les nombres avec plus de 3 décimales sont arrondis à 3 chiffres.

Définir le nombre minimum et maximum de chiffres après la virgule

Les options minimumFractionDigits et maximumFractionDigits contrôlent le nombre de chiffres qui apparaissent après la virgule. Ces deux options fonctionnent ensemble pour déterminer si les zéros finaux apparaissent.

const formatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(formatter.format(1.5));
// Output: "1.50"

console.log(formatter.format(1));
// Output: "1.00"

console.log(formatter.format(1.234));
// Output: "1.23"

Lorsque minimumFractionDigits et maximumFractionDigits sont définis à la même valeur, chaque nombre s'affiche avec exactement ce nombre de décimales. Les nombres avec moins de chiffres reçoivent des zéros finaux, et les nombres avec plus de chiffres sont arrondis.

Supprimer les zéros finaux

Pour supprimer les zéros finaux, définissez minimumFractionDigits à 0 et maximumFractionDigits au nombre maximum de décimales que vous souhaitez autoriser. Cette configuration indique au formateur d'afficher entre 0 et N décimales, en utilisant uniquement le nombre nécessaire.

const formatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

console.log(formatter.format(1));
// Output: "1"

console.log(formatter.format(1.5));
// Output: "1.5"

console.log(formatter.format(1.50));
// Output: "1.5"

console.log(formatter.format(1.23));
// Output: "1.23"

Le formateur affiche les nombres entiers sans point décimal, les nombres avec une décimale tels quels, et supprime tous les zéros finaux qui auraient pu apparaître. Les nombres sont toujours arrondis au nombre maximum de décimales s'ils le dépassent.

Définir un minimum supérieur à zéro

Vous pouvez définir minimumFractionDigits à une valeur supérieure à zéro tout en permettant la suppression des zéros finaux. Cela garantit qu'au moins quelques décimales apparaissent toujours, tout en supprimant les zéros au-delà de ce minimum.

const formatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 1,
  maximumFractionDigits: 3
});

console.log(formatter.format(1));
// Output: "1.0"

console.log(formatter.format(1.5));
// Output: "1.5"

console.log(formatter.format(1.50));
// Output: "1.5"

console.log(formatter.format(1.234));
// Output: "1.234"

console.log(formatter.format(1.2345));
// Output: "1.235"

Le nombre 1 s'affiche comme 1.0 car le minimum est de 1 décimale. Le nombre 1.5 s'affiche tel quel. Le nombre 1.50 voit son zéro final supprimé. Les nombres avec plus de 3 décimales sont arrondis à 3.

Quand conserver les zéros finaux

Conservez les zéros finaux lorsque vous devez afficher une précision constante pour tous les nombres. C'est courant pour les prix, les montants financiers et les mesures où le nombre de décimales transmet une signification.

// Les prix doivent afficher un nombre constant de décimales
const priceFormatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(priceFormatter.format(5));
// Résultat : "$5.00"

console.log(priceFormatter.format(5.5));
// Résultat : "$5.50"

Les formateurs de devises utilisent cette approche par défaut. Les deux montants s'affichent avec exactement 2 décimales, ce qui les rend faciles à comparer et renforce le fait qu'il s'agit de valeurs monétaires.

Quand supprimer les zéros finaux

Supprimez les zéros finaux lors de l'affichage de statistiques, pourcentages, mesures ou toute valeur où les zéros finaux n'ajoutent aucune information. Cela crée une sortie plus propre et plus lisible.

// Les statistiques sont plus claires sans zéros finaux
const statsFormatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

console.log(`Moyenne : ${statsFormatter.format(3.5)} éléments`);
// Résultat : "Moyenne : 3.5 éléments"

console.log(`Total : ${statsFormatter.format(100)} éléments`);
// Résultat : "Total : 100 éléments"

// Les pourcentages fonctionnent souvent mieux sans zéros finaux
const percentFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 0,
  maximumFractionDigits: 1
});

console.log(percentFormatter.format(0.75));
// Résultat : "75%"

console.log(percentFormatter.format(0.755));
// Résultat : "75.5%"

Les statistiques et pourcentages n'affichent que les décimales nécessaires. Les nombres entiers apparaissent sans points décimaux, et les nombres avec des chiffres décimaux significatifs les affichent sans zéros finaux inutiles.

Comment la locale affecte l'affichage décimal

La position du point décimal et des caractères de regroupement des chiffres varie selon la locale, mais les règles pour les zéros finaux fonctionnent de la même manière dans toutes les locales. Les options minimumFractionDigits et maximumFractionDigits ont le même effet quelle que soit la locale utilisée.

const formatterEN = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

const formatterDE = new Intl.NumberFormat("de-DE", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

console.log(formatterEN.format(1234.5));
// Résultat : "1,234.5"

console.log(formatterDE.format(1234.5));
// Résultat : "1.234,5"

Les deux formateurs suppriment les zéros finaux et affichent le nombre avec une décimale. La différence est que le format anglais américain utilise un point pour la décimale et des virgules pour les séparateurs de milliers, tandis que le format allemand utilise la convention inverse.