Comment afficher le signe plus pour les nombres positifs

Introduction

Lorsque vous affichez un nombre comme 5 sur une application météo montrant un changement de température, les utilisateurs ne peuvent pas déterminer s'il s'agit d'une température absolue de 5 degrés ou d'un changement de plus 5 degrés. L'absence du signe plus crée une ambiguïté. En affichant explicitement le signe plus comme +5, vous communiquez que la valeur représente une augmentation plutôt qu'une mesure neutre.

Cette distinction est importante lors de l'affichage de changements, de différences ou de deltas. Les variations de cours boursiers, les ajustements de solde de compte, les différences de score et les variations de température bénéficient tous de signes plus explicites qui clarifient la direction du changement. L'option signDisplay de Intl.NumberFormat de JavaScript permet de contrôler quand les signes plus et moins apparaissent.

Comment les nombres s'affichent par défaut

Par défaut, JavaScript n'affiche qu'un signe moins pour les nombres négatifs. Les nombres positifs et zéro s'affichent sans aucun signe.

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

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

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

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

Ce comportement par défaut fonctionne bien pour les valeurs absolues comme les prix, les quantités ou les mesures. Cependant, lorsque vous devez montrer un changement ou une différence, l'absence d'un signe plus rend les valeurs positives ambiguës.

Considérez l'affichage des changements quotidiens de température. Sans signes explicites, les utilisateurs voient des nombres comme 3 et 5, qui pourraient signifier des températures absolues plutôt que des changements. Avec des signes explicites comme +3 et +5, la signification devient claire.

Utilisation de signDisplay pour afficher les signes plus

L'option signDisplay dans Intl.NumberFormat contrôle quand afficher les signes pour les nombres. Définissez signDisplay sur "always" pour afficher à la fois les signes plus et moins.

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

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

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

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

Maintenant, les nombres positifs s'affichent avec un signe plus, les nombres négatifs s'affichent avec un signe moins, et zéro s'affiche avec un signe plus. Ce format fonctionne bien pour afficher des changements où le signe porte une signification.

Comprendre toutes les valeurs de signDisplay

L'option signDisplay accepte cinq valeurs. Chaque valeur sert un objectif spécifique selon la façon dont vous souhaitez gérer les signes pour les valeurs positives, négatives et nulles.

Valeur auto pour le comportement de signe par défaut

La valeur "auto" est le comportement par défaut. Elle affiche le signe moins pour les nombres négatifs, y compris le zéro négatif, mais aucun signe pour les nombres positifs ou le zéro positif.

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

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

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

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

Utilisez "auto" lors de l'affichage de valeurs absolues où l'absence de signe implique une valeur positive. C'est le format standard pour les prix, les comptages et les mesures.

Valeur always pour afficher tous les signes

La valeur "always" affiche les signes pour tous les nombres, y compris les positifs, négatifs et zéro.

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

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

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

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

Utilisez "always" lors de l'affichage de changements ou de deltas où zéro représente aucun changement. Le signe plus sur zéro précise que zéro est une valeur neutre plutôt qu'une valeur manquante.

Valeur exceptZero pour masquer le signe du zéro

La valeur "exceptZero" affiche les signes pour les nombres positifs et négatifs mais omet le signe pour zéro.

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

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

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

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

Utilisez "exceptZero" lorsque zéro représente un état spécial qui doit être visuellement distinct des valeurs positives et négatives. Par exemple, lors de l'affichage des changements de score où zéro signifie qu'aucun changement ne s'est produit.

valeur negative pour afficher uniquement les signes moins

La valeur "negative" affiche le signe moins uniquement pour les nombres négatifs, à l'exclusion du zéro négatif. Les nombres positifs et zéro s'affichent sans signes.

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

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

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

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

Utilisez "negative" lorsque vous souhaitez mettre en évidence les valeurs négatives tout en traitant les valeurs positives et zéro de manière neutre. Cela fonctionne bien pour les soldes de compte où les valeurs négatives représentent une dette.

valeur never pour masquer tous les signes

La valeur "never" affiche les nombres sans aucun signe, même pour les nombres négatifs.

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

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

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

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

Utilisez "never" lorsque vous devez afficher la valeur absolue d'un nombre indépendamment de son signe. C'est utile pour afficher des magnitudes où la direction a déjà été communiquée par d'autres moyens comme la couleur ou des icônes.

Quand utiliser chaque option signDisplay

Choisissez la valeur signDisplay en fonction de ce que représente le nombre et de la façon dont les utilisateurs doivent l'interpréter.

Utilisez "always" pour les changements, différences ou deltas où le signe indique la direction. Les changements de température, les mouvements des cours des actions et les différences de score nécessitent des signes explicites pour montrer si les valeurs ont augmenté ou diminué.

Utilisez "exceptZero" pour les changements où zéro représente l'absence de changement et devrait être visuellement neutre. Cela aide zéro à se démarquer comme un cas spécial qui ne signifie ni augmentation ni diminution.

Utilisez "auto" pour les valeurs absolues où le nombre représente une quantité ou une mesure plutôt qu'un changement. Les prix, distances, poids et décomptes fonctionnent avec l'affichage de signe par défaut.

Utilisez "negative" pour les valeurs où les nombres négatifs nécessitent une attention particulière mais les nombres positifs sont normaux. Les soldes de compte et les calculs de profit mettent souvent en évidence les dettes tout en traitant les soldes positifs comme standard.

Utilisez "never" pour les magnitudes absolues où la direction est communiquée séparément. Lorsque la couleur ou les icônes indiquent déjà positif ou négatif, supprimer le signe évite les informations redondantes.

Affichage des signes plus avec les devises

Le formatage des devises fonctionne avec signDisplay pour afficher les changements de compte et les montants des transactions avec des signes explicites.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  signDisplay: "always"
});

console.log(formatter.format(250.50));
// Résultat : "+$250.50"

console.log(formatter.format(-75.25));
// Résultat : "-$75.25"

console.log(formatter.format(0));
// Résultat : "+$0.00"

Ce format montre clairement si une transaction a ajouté ou retiré de l'argent d'un compte. Le signe plus rend les dépôts explicites plutôt qu'implicites.

Vous pouvez combiner le formatage des devises avec exceptZero pour distinguer l'absence de changement des transactions positives ou négatives.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  signDisplay: "exceptZero"
});

console.log(formatter.format(250.50));
// Résultat : "+$250.50"

console.log(formatter.format(-75.25));
// Résultat : "-$75.25"

console.log(formatter.format(0));
// Résultat : "$0.00"

Maintenant, zéro apparaît sans signe, ce qui le rend visuellement distinct des gains ou des pertes réels.

Affichage des signes plus avec les pourcentages

Les changements de pourcentage nécessitent souvent des signes explicites pour montrer si les valeurs ont augmenté ou diminué.

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

console.log(formatter.format(0.0523));
// Résultat : "+5.2%"

console.log(formatter.format(-0.0341));
// Résultat : "-3.4%"

console.log(formatter.format(0));
// Résultat : "+0.0%"

Ce format fonctionne bien pour afficher les taux de croissance, les taux d'intérêt ou les changements de performance. Le signe plus indique explicitement une croissance positive plutôt que de laisser les utilisateurs le déduire.

Lors de l'affichage des changements de pourcentage dans des contextes où zéro est significatif, utilisez exceptZero pour rendre le zéro visuellement neutre.

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

console.log(formatter.format(0.0523));
// Résultat : "+5.2%"

console.log(formatter.format(0));
// Résultat : "0.0%"

Le zéro sans signe indique clairement qu'aucun changement ne s'est produit.

Combiner signDisplay avec les décimales

L'option signDisplay fonctionne avec toutes les autres options de formatage de nombres. Vous pouvez contrôler les décimales, l'arrondi et les séparateurs de milliers tout en contrôlant l'affichage du signe.

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

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

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

Cette combinaison assure des décimales cohérentes tout en affichant des signes explicites pour les valeurs positives et négatives.

Vous pouvez également combiner signDisplay avec la notation compacte pour afficher de grands changements.

const formatter = new Intl.NumberFormat("en-US", {
  notation: "compact",
  signDisplay: "always"
});

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

console.log(formatter.format(-850000));
// Output: "-850K"

Le format compact rend les grands nombres lisibles tandis que le signe indique la direction du changement.

Ce qu'il faut retenir

L'option signDisplay dans Intl.NumberFormat contrôle quand les signes plus et moins apparaissent dans les nombres formatés. Utilisez "always" pour afficher des signes explicites pour tous les nombres, "exceptZero" pour masquer le signe sur zéro, "auto" pour le comportement par défaut, "negative" pour afficher uniquement les signes moins, et "never" pour masquer tous les signes.

Choisissez la bonne valeur signDisplay selon que vos nombres représentent des changements ou des valeurs absolues, et si zéro nécessite un traitement visuel spécial. Combinez signDisplay avec d'autres options de formatage comme la devise, les pourcentages et les décimales pour créer le format exact dont votre application a besoin.