Comment formater les nombres avec des chiffres significatifs

Introduction

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

Les chiffres significatifs représentent les chiffres d'un nombre qui portent des informations significatives 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 uniquement l'ordre de grandeur, 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 meilleure que le 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 uniquement la position de la virgule. Dans 0,0045, seuls le 4 et le 5 sont des chiffres significatifs. Le nombre a deux chiffres significatifs, pas six.

Les zéros de queue après la virgule 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 de fin avant la virgule 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 les nombres avec un maximum de chiffres significatifs

L'option maximumSignificantDigits limite le nombre de chiffres significatifs qui apparaissent dans la sortie formatée. Cette option est utile lorsque vous souhaitez afficher des nombres avec une précision cohérente quelle que soit leur magnitude.

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

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

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

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

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

Lorsque le nombre contient plus de chiffres significatifs que le maximum, le formateur arrondit le nombre. L'arrondissement suit les règles d'arrondissement standard, en arrondissant à la valeur la plus proche. Lorsqu'un nombre se situe exactement à mi-chemin entre deux valeurs, il arrondit 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));
// Output: "50"

console.log(oneDigit.format(56.33));
// Output: "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 les nombres avec un minimum de chiffres significatifs

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

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

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

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

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

Cette option est utile lorsque vous devez afficher des nombres avec un niveau de précision cohérent, montrant que les mesures ou 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));
// Output: "5.000000000"

Le formateur ajoute des zéros après la virgule pour atteindre le minimum, ou ajoute des zéros avant la virgule 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));
// Output: "1.20"
// Expanded to meet minimum of 3

console.log(formatter.format(1.234));
// Output: "1.234"
// Within range, displayed as-is

console.log(formatter.format(1.23456789));
// Output: "1.2346"
// Rounded to meet maximum of 5

Lors de la combinaison de 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 RangeError.

try {
  const invalid = new Intl.NumberFormat("en-US", {
    minimumSignificantDigits: 5,
    maximumSignificantDigits: 3,
  });
} catch (error) {
  console.log(error.name);
  // Output: "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 empêcher un nombre excessif de chiffres d'encombrer l'affichage.

Différence entre les chiffres significatifs et les 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'ordre de grandeur 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));
// Output: "1.20"

console.log(decimalPlaces.format(12.3));
// Output: "12.30"

console.log(decimalPlaces.format(123.4));
// Output: "123.40"

Les chiffres significatifs contrôlent combien de chiffres significatifs apparaissent dans le nombre entier, en s'adaptant à l'ordre de grandeur du nombre. Les nombres avec différents ordres de grandeur affichent différents nombres de décimales pour maintenir une précision cohérente.

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

console.log(significantDigits.format(1.2));
// Output: "1.20"

console.log(significantDigits.format(12.3));
// Output: "12.3"

console.log(significantDigits.format(123.4));
// Output: "123"

Remarquez comment l'approche par chiffres significatifs affiche moins de décimales à mesure que l'ordre de grandeur du nombre augmente, tandis que l'approche par décimales affiche le même nombre de décimales quel que soit l'ordre de grandeur.

Interaction avec les options de chiffres fractionnaires

Lorsque vous spécifiez des options de chiffres significatifs, elles ont la priorité sur les options de chiffres fractionnaires par défaut. Le formateur ignore minimumFractionDigits et maximumFractionDigits lorsque l'une ou l'autre option 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));
// Output: "1,230"
// Significant digits option takes precedence
// Fraction digit options are ignored

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", 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'usage 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 cohérente sur 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 lectures de capteurs et les mesures physiques doivent souvent refléter la précision de l'instrument de mesure. Afficher trois chiffres significatifs de manière cohérente 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));
// Output: "0.01235"

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

console.log(measurement.format(1234.5));
// Output: "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 telles que les pages vues, les revenus ou les nombres 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));
// Output: "1.23"

console.log(metric.format(123.4));
// Output: "123"

console.log(metric.format(12345));
// Output: "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 la magnitude.

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

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

console.log(currency.format(123.5));
// Output: "$123.50"

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