Comment afficher ou masquer le signe moins pour les nombres négatifs ?

Contrôlez quand les signes négatifs et positifs apparaissent dans les nombres formatés pour différents contextes

Introduction

Différents contextes nécessitent différentes représentations des nombres négatifs. Un tableau de bord affichant les changements de température a besoin de signes plus et moins explicites pour indiquer la direction. Un graphique affichant des magnitudes ne s'intéresse qu'aux valeurs absolues et devrait masquer complètement le signe. Les rapports financiers suivent les conventions comptables qui placent les montants négatifs entre parenthèses au lieu d'utiliser des signes moins.

L'API Intl.NumberFormat de JavaScript fournit l'option signDisplay pour contrôler quand les signes apparaissent dans les nombres formatés. Cette option vous donne un contrôle précis sur la visibilité des signes pour les nombres négatifs, positifs et zéro.

Comment JavaScript formate les nombres négatifs par défaut

Par défaut, Intl.NumberFormat affiche un signe moins pour les nombres négatifs et aucun signe pour les nombres positifs.

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

formatter.format(-42);
// "-42"

formatter.format(42);
// "42"

formatter.format(0);
// "0"

Ce comportement par défaut fonctionne bien dans la plupart des cas, mais vous pouvez le remplacer lorsque votre cas d'utilisation nécessite une gestion différente des signes.

Contrôler l'affichage des signes avec l'option signDisplay

L'option signDisplay accepte cinq valeurs qui contrôlent quand les signes apparaissent :

  • "auto" : Affiche les signes uniquement pour les nombres négatifs, y compris le zéro négatif (par défaut)
  • "never" : N'affiche jamais les signes
  • "always" : Affiche toujours les signes pour les nombres positifs et négatifs
  • "exceptZero" : Affiche les signes pour les nombres positifs et négatifs, mais pas pour zéro
  • "negative" : Affiche les signes uniquement pour les nombres négatifs, excluant le zéro négatif

Passez l'option signDisplay dans l'objet d'options lors de la création d'un formateur.

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

Masquer complètement le signe moins

Utilisez signDisplay: 'never' pour masquer tous les signes et afficher uniquement les valeurs absolues.

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

formatter.format(-100);
// "100"

formatter.format(100);
// "100"

formatter.format(-0);
// "0"

Ce paramètre supprime le signe de tous les nombres, rendant -100 et 100 formatés de manière identique. Le zéro négatif est formaté comme "0" sans signe.

Utilisez cette option lors de l'affichage de magnitudes où la direction n'a pas d'importance, comme les valeurs de changement absolu dans les visualisations de données, les calculs de distance ou les marges d'erreur.

const changes = [-15, 23, -8, 42];

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

changes.map(change => formatter.format(change));
// ["15", "23", "8", "42"]

Afficher le signe moins uniquement pour les nombres négatifs

L'option signDisplay: 'auto' est le comportement par défaut. Elle affiche les signes pour les nombres négatifs mais pas pour les nombres positifs.

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

formatter.format(-100);
// "-100"

formatter.format(100);
// "100"

formatter.format(-0);
// "-0"

Notez que le zéro négatif s'affiche comme "-0" avec cette option. JavaScript fait la distinction entre le zéro positif et le zéro négatif, qui peuvent survenir dans certaines opérations mathématiques.

Utilisez signDisplay: 'negative' pour masquer le signe du zéro négatif tout en le conservant pour les autres nombres négatifs.

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

formatter.format(-100);
// "-100"

formatter.format(100);
// "100"

formatter.format(-0);
// "0"

L'option negative traite le zéro négatif comme un cas spécial et le formate sans signe. Cela évite les affichages déroutants dans les contextes où la distinction entre zéro positif et négatif n'a pas d'importance pour les utilisateurs.

Afficher les signes pour tous les nombres sauf zéro

Utilisez signDisplay: 'exceptZero' pour afficher les signes pour les nombres positifs et négatifs, mais omettez le signe lorsque la valeur est exactement zéro.

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

formatter.format(-100);
// "-100"

formatter.format(100);
// "+100"

formatter.format(0);
// "0"

formatter.format(-0);
// "0"

Les nombres positifs s'affichent avec un signe plus. Les valeurs zéro, qu'elles soient positives ou négatives, s'affichent sans aucun signe.

Cette option fonctionne bien pour afficher des changements ou des deltas où zéro signifie aucun changement. Afficher "+0" ou "-0" serait déroutant, mais afficher "0" rend le sens clair.

const deltas = [5, -3, 0, -0, 12];

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

deltas.map(delta => formatter.format(delta));
// ["+5", "-3", "0", "0", "+12"]

Afficher les signes pour tous les nombres

Utilisez signDisplay: 'always' pour afficher les signes pour tous les nombres, y compris les nombres positifs et zéro.

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

formatter.format(-100);
// "-100"

formatter.format(100);
// "+100"

formatter.format(0);
// "+0"

formatter.format(-0);
// "-0"

Ce paramètre ajoute un signe plus aux nombres positifs et au zéro positif. Le zéro négatif conserve son signe moins, rendant la distinction visible.

Utilisez cette option lorsque vous devez mettre l'accent sur la direction pour toutes les valeurs, comme les changements de température, les changements d'altitude ou les gains et pertes financiers.

const temperatures = [-5, 0, 3, -2];

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius',
  signDisplay: 'always'
});

temperatures.map(temp => formatter.format(temp));
// ["-5°C", "+0°C", "+3°C", "-2°C"]

Combiner l'affichage des signes avec le formatage des devises

L'option signDisplay fonctionne avec tous les styles de formatage, y compris le formatage des devises. Lorsqu'elle est combinée avec currencySign: 'accounting', vous pouvez créer des formats qui suivent les conventions comptables.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencySign: 'accounting'
});

formatter.format(-1234.56);
// "($1,234.56)"

La notation comptable entoure les montants négatifs de parenthèses au lieu d'utiliser un signe moins. Cette convention rend les nombres négatifs plus visuellement distincts dans les rapports financiers.

Vous pouvez combiner la notation comptable avec différentes valeurs de signDisplay.

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

always.format(1234.56);
// "+$1,234.56"

always.format(-1234.56);
// "($1,234.56)"

const never = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencySign: 'accounting',
  signDisplay: 'never'
});

never.format(-1234.56);
// "$1,234.56"

Avec signDisplay: 'always', les montants positifs affichent un signe plus tandis que les montants négatifs utilisent toujours des parenthèses. Avec signDisplay: 'never', les montants positifs et négatifs s'affichent sans signes ni parenthèses.

Quand utiliser chaque option d'affichage de signe

Choisissez votre valeur signDisplay en fonction de ce que représentent vos nombres et de la façon dont les utilisateurs les interpréteront.

Utilisez signDisplay: 'auto' pour le formatage standard des nombres où les nombres négatifs doivent être clairement identifiés. C'est l'option par défaut qui convient bien pour les prix, les comptages, les mesures et la plupart des affichages de nombres à usage général.

Utilisez signDisplay: 'never' lors de l'affichage de valeurs absolues ou de magnitudes où la direction n'a pas d'importance. Cela fonctionne bien pour les calculs de distance, les marges d'erreur, les valeurs de changement absolu et les visualisations de données qui montrent la magnitude sans direction.

Utilisez signDisplay: 'negative' lorsque vous souhaitez un formatage standard des nombres négatifs mais que vous devez éviter d'afficher un zéro négatif. Cela évite les affichages confus de "-0" dans des contextes mathématiques ou scientifiques où la distinction entre zéro positif et négatif n'est pas significative pour les utilisateurs.

Utilisez signDisplay: 'exceptZero' lors de l'affichage de changements ou de deltas où zéro signifie aucun changement. Cela rend les gains et les pertes clairs tout en évitant les affichages confus de "+0" ou "-0". Les changements de température, les mouvements des cours des actions et les métriques de performance bénéficient de cette option.

Utilisez signDisplay: 'always' lorsque la direction est importante pour toutes les valeurs et que vous souhaitez mettre l'accent sur les augmentations et les diminutions. Les changements de température, les différences d'altitude et les rapports de performance financière utilisent souvent ce format pour rendre les valeurs positives et négatives également explicites.

// Prix standard : utilisez auto (par défaut)
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(-50);
// "-$50.00"

// Différence de prix absolue : utilisez never
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'never'
}).format(-50);
// "$50.00"

// Changement de prix : utilisez exceptZero
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'exceptZero'
}).format(50);
// "+$50.00"

// Changement de température : utilisez always
new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius',
  signDisplay: 'always'
}).format(3);
// "+3°C"

L'option signDisplay vous donne un contrôle précis sur la façon dont les nombres positifs et négatifs apparaissent dans votre application. Choisissez la valeur qui communique le mieux le sens à vos utilisateurs en fonction du contexte et de l'objectif de chaque nombre que vous affichez.