Comment formater des nombres avec des chiffres significatifs

Introduction

Lors du formatage des nombres pour l'affichage, vous avez parfois besoin de contrôler la précision en fonction du nombre de chiffres significatifs qu'un nombre contient, plutôt que du nombre de chiffres après la virgule décimale. Cette approche est appelée formatage avec des chiffres significatifs.

Les chiffres significatifs représentent les chiffres d'un nombre qui portent des informations pertinentes sur sa précision. Le nombre 123,45 a cinq chiffres significatifs. Le nombre 0,00123 a trois chiffres significatifs, car les zéros de tête indiquent seulement la magnitude, pas la précision.

Cette leçon vous montre comment formater des nombres en utilisant des chiffres significatifs en JavaScript. Vous apprendrez quand cette approche est préférable au contrôle des décimales, et comment utiliser les options minimumSignificantDigits et maximumSignificantDigits avec l'API Intl.NumberFormat.

Que sont les chiffres significatifs

Les chiffres significatifs sont les chiffres d'un nombre qui indiquent sa précision. Comprendre quels chiffres sont significatifs nécessite de suivre des règles spécifiques.

Tous les chiffres non nuls sont toujours significatifs. Dans le nombre 123, les trois chiffres sont significatifs. Dans 45,67, les quatre chiffres sont significatifs.

Les zéros de tête ne sont jamais significatifs. Ils indiquent seulement la position de la virgule décimale. Dans 0,0045, seuls le 4 et le 5 sont des chiffres significatifs. Le nombre a deux chiffres significatifs, pas six.

Les zéros finaux après la virgule décimale sont significatifs. Ils indiquent que la mesure ou le calcul était précis à ce niveau. Le nombre 1,200 a quatre chiffres significatifs, tandis que 1,2 n'en a que deux.

Les zéros finaux avant la virgule décimale dépendent du contexte. Dans le nombre 1200, il n'est pas clair si les zéros sont significatifs sans information supplémentaire. La notation scientifique ou des indicateurs de précision explicites résolvent cette ambiguïté.

Formater des nombres avec un maximum de chiffres significatifs

L'option maximumSignificantDigits limite le nombre de chiffres significatifs qui apparaissent dans le résultat formaté. Cette option est utile lorsque vous souhaitez afficher des nombres avec une précision constante, quelle que soit leur magnitude.

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

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

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

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

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

Lorsque le nombre contient plus de chiffres significatifs que le maximum, le formateur arrondit le nombre. L'arrondi suit les règles d'arrondi standard, arrondissant à la valeur la plus proche. Lorsqu'un nombre tombe exactement à mi-chemin entre deux valeurs, il est arrondi au nombre pair le plus proche.

L'option maximumSignificantDigits accepte des valeurs de 1 à 21. La valeur par défaut lorsque cette option n'est pas spécifiée est 21, ce qui signifie effectivement aucune limite.

const oneDigit = new Intl.NumberFormat("en-US", {
  maximumSignificantDigits: 1,
});

console.log(oneDigit.format(54.33));
// Résultat: "50"

console.log(oneDigit.format(56.33));
// Résultat: "60"

Cette option fonctionne avec tous les types de nombres, y compris les entiers, les décimaux et les nombres dans différentes notations.

Formater des nombres avec un minimum de chiffres significatifs

L'option minimumSignificantDigits garantit qu'au moins le nombre spécifié de chiffres significatifs apparaît dans le résultat formaté. Lorsque le nombre contient moins de chiffres significatifs que le minimum, le formateur ajoute des zéros à la fin.

const formatter = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 5,
});

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

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

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

Cette option est utile lorsque vous devez afficher des nombres avec un niveau de précision constant, montrant que les mesures ou les calculs ont été effectués avec une précision spécifique.

L'option minimumSignificantDigits accepte des valeurs de 1 à 21. La valeur par défaut est 1, ce qui signifie que les nombres affichent leur précision naturelle sans zéros ajoutés.

const manyDigits = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 10,
});

console.log(manyDigits.format(5));
// Résultat: "5.000000000"

Le formateur ajoute des zéros après la virgule décimale pour atteindre le minimum, ou ajoute des zéros avant la virgule décimale si nécessaire.

Combiner les chiffres significatifs minimum et maximum

Vous pouvez spécifier à la fois minimumSignificantDigits et maximumSignificantDigits ensemble pour créer une plage de précision acceptable. Le formateur affichera les nombres dans cette plage.

const formatter = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 3,
  maximumSignificantDigits: 5,
});

console.log(formatter.format(1.2));
// Résultat : "1.20"
// Étendu pour atteindre le minimum de 3

console.log(formatter.format(1.234));
// Résultat : "1.234"
// Dans la plage, affiché tel quel

console.log(formatter.format(1.23456789));
// Résultat : "1.2346"
// Arrondi pour respecter le maximum de 5

Lorsque vous combinez ces options, le minimum doit être inférieur ou égal au maximum. Si vous spécifiez un minimum supérieur au maximum, le formateur génère une erreur RangeError.

try {
  const invalid = new Intl.NumberFormat("en-US", {
    minimumSignificantDigits: 5,
    maximumSignificantDigits: 3,
  });
} catch (error) {
  console.log(error.name);
  // Résultat : "RangeError"
}

Cette combinaison est particulièrement utile pour les applications scientifiques ou financières où vous souhaitez imposer à la fois un niveau minimum de précision et éviter que des chiffres excessifs n'encombrent l'affichage.

En quoi les chiffres significatifs diffèrent des décimales

Les chiffres significatifs et les décimales représentent deux approches différentes pour contrôler la précision des nombres. Comprendre quand utiliser chaque approche vous aide à formater les nombres de manière appropriée.

Les décimales contrôlent combien de chiffres apparaissent après la virgule, quelle que soit l'amplitude du nombre. Les options minimumFractionDigits et maximumFractionDigits implémentent cette approche.

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

console.log(decimalPlaces.format(1.2));
// Résultat : "1.20"

console.log(decimalPlaces.format(12.3));
// Résultat : "12.30"

console.log(decimalPlaces.format(123.4));
// Résultat : "123.40"

Les chiffres significatifs contrôlent combien de chiffres significatifs apparaissent dans l'ensemble du nombre, s'adaptant à l'amplitude du nombre. Les nombres d'amplitudes différentes affichent un nombre différent de décimales pour maintenir une précision constante.

const significantDigits = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 3,
  maximumSignificantDigits: 3,
});

console.log(significantDigits.format(1.2));
// Résultat : "1.20"

console.log(significantDigits.format(12.3));
// Résultat : "12.3"

console.log(significantDigits.format(123.4));
// Résultat : "123"

Remarquez comment l'approche des chiffres significatifs montre moins de décimales à mesure que l'amplitude du nombre augmente, tandis que l'approche des décimales montre le même nombre de décimales quelle que soit l'amplitude.

Interaction avec les options de chiffres décimaux

Lorsque vous spécifiez des options de chiffres significatifs, elles prennent par défaut la priorité sur les options de chiffres décimaux. Le formateur ignore minimumFractionDigits et maximumFractionDigits lorsque l'une ou l'autre des options de chiffres significatifs est présente.

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

console.log(formatter.format(1234.56));
// Résultat : "1,230"
// L'option des chiffres significatifs prend la priorité
// Les options de chiffres décimaux sont ignorées

Ce comportement est contrôlé par l'option roundingPriority, qui détermine comment le formateur résout les conflits entre différents paramètres de précision. La valeur par défaut est "auto", ce qui donne la priorité aux chiffres significatifs.

Vous pouvez modifier ce comportement en définissant roundingPriority sur "morePrecision" ou "lessPrecision", mais ce sont des options avancées pour des cas d'utilisation spécialisés. Pour la plupart des applications, le comportement de priorité par défaut est approprié.

Quand utiliser les chiffres significatifs plutôt que les décimales

Choisissez les chiffres significatifs lorsque vous avez besoin d'une précision constante pour des nombres de différentes magnitudes. Cette approche est courante dans les contextes scientifiques, d'ingénierie et de visualisation de données.

Utilisez les chiffres significatifs pour les mesures et calculs scientifiques. Les résultats de laboratoire, les relevés de capteurs et les mesures physiques doivent souvent refléter la précision de l'instrument de mesure. Afficher systématiquement trois chiffres significatifs communique la précision, que la mesure soit 0,0123, 1,23 ou 123.

const measurement = new Intl.NumberFormat("en-US", {
  maximumSignificantDigits: 4,
});

console.log(measurement.format(0.012345));
// Résultat : "0.01235"

console.log(measurement.format(1.2345));
// Résultat : "1.235"

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

Utilisez les chiffres significatifs pour les métriques de tableau de bord qui affichent des nombres de magnitudes variables. Lors de l'affichage de statistiques comme les pages vues, les revenus ou le nombre d'utilisateurs, les chiffres significatifs empêchent les petits nombres d'afficher une précision excessive tout en gardant les grands nombres lisibles.

const metric = new Intl.NumberFormat("en-US", {
  maximumSignificantDigits: 3,
});

console.log(metric.format(1.234));
// Résultat : "1.23"

console.log(metric.format(123.4));
// Résultat : "123"

console.log(metric.format(12345));
// Résultat : "12,300"

Utilisez les décimales pour les montants monétaires et financiers où la partie fractionnaire représente des centimes ou d'autres subdivisions monétaires fixes. Ces montants nécessitent des décimales cohérentes quelle que soit leur magnitude.

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

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

console.log(currency.format(123.5));
// Résultat : "$123.50"

Le choix entre ces approches dépend de si la précision concerne le nombre total de chiffres ou une composante fractionnaire fixe.