Comment supprimer les zéros de fin après la virgule ?

Introduction

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

Le Intl.NumberFormat de JavaScript vous permet de contrôler l'apparition des zéros de fin. Vous pouvez configurer le formateur pour les supprimer, les conserver ou appliquer différentes règles selon vos besoins.

Ce que sont les zéros de fin

Les zéros de fin sont des zéros qui apparaissent à la fin d'un nombre après la virgule. Ils ne modifient pas la valeur mathématique du nombre, mais ils affectent l'apparence du nombre lors de l'affichage.

// These numbers have the same value but different trailing zeros
1.5   // No trailing zeros
1.50  // One trailing zero
1.500 // Two trailing zeros

Les zéros de fin 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 que vous avez spécifié, le formateur ajoute des zéros pour remplir les positions restantes.

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

Par défaut, Intl.NumberFormat affiche jusqu'à 3 chiffres fractionnaires et supprime les zéros de fin. 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));
// Output: "1.5"

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

console.log(formatter.format(1.123456));
// Output: "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 fractionnaires

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 de fin 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 sur 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 de fin ajoutés, et les nombres avec plus de chiffres sont arrondis.

Supprimer les zéros de fin

Pour supprimer les zéros de fin, définissez minimumFractionDigits sur 0 et maximumFractionDigits sur le 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 virgule, les nombres avec une décimale tels quels, et supprime tous les zéros de fin 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 sur une valeur supérieure à zéro tout en permettant la suppression des zéros de fin. 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 de fin supprimé. Les nombres avec plus de 3 décimales sont arrondis à 3.

Quand conserver les zéros de fin

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

// Prices should show consistent decimal places
const priceFormatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(priceFormatter.format(5));
// Output: "$5.00"

console.log(priceFormatter.format(5.5));
// Output: "$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 de fin

Supprimez les zéros de fin lors de l'affichage de statistiques, de pourcentages, de mesures ou de toute valeur où les zéros de fin n'apportent aucune information. Cela crée un résultat plus propre et plus lisible.

// Statistics look cleaner without trailing zeros
const statsFormatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

console.log(`Average: ${statsFormatter.format(3.5)} items`);
// Output: "Average: 3.5 items"

console.log(`Total: ${statsFormatter.format(100)} items`);
// Output: "Total: 100 items"

// Percentages often work better without trailing zeros
const percentFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 0,
  maximumFractionDigits: 1
});

console.log(percentFormatter.format(0.75));
// Output: "75%"

console.log(percentFormatter.format(0.755));
// Output: "75.5%"

Les statistiques et les pourcentages n'affichent que les décimales dont ils ont besoin. Les nombres entiers apparaissent sans virgule décimale, et les nombres avec des chiffres décimaux significatifs les affichent sans zéros de fin inutiles.

Comment la locale affecte l'affichage des décimales

La position de la virgule et des caractères de regroupement des chiffres varie selon les paramètres régionaux, mais les règles concernant les zéros de fin fonctionnent de la même manière dans tous les paramètres régionaux. Les options minimumFractionDigits et maximumFractionDigits ont le même effet quelle que soit la locale que vous utilisez.

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));
// Output: "1,234.5"

console.log(formatterDE.format(1234.5));
// Output: "1.234,5"

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