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 selon différents contextes

Introduction

Différents contextes nécessitent différentes représentations des nombres négatifs. Un tableau de bord affichant les variations de température nécessite des signes plus et moins explicites pour indiquer la direction. Un graphique affichant des magnitudes ne se préoccupe que des valeurs absolues et doit masquer entièrement le signe. Les rapports financiers suivent des conventions comptables qui encadrent 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'usage 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" : afficher les signes uniquement pour les nombres négatifs, y compris le zéro négatif (par défaut)
  • "never" : ne jamais afficher les signes
  • "always" : toujours afficher les signes pour les nombres positifs et négatifs
  • "exceptZero" : afficher les signes pour les nombres positifs et négatifs, mais pas pour zéro
  • "negative" : afficher les signes uniquement pour les nombres négatifs, à l'exclusion du 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, ce qui fait que -100 et 100 se formatent de manière identique. Le zéro négatif se formate comme "0" sans signe.

Utilisez cette option lors de l'affichage de grandeurs 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 zéro positif et zéro négatif, ce qui peut se produire 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 particulier et le formate sans signe. Cela évite les affichages déroutants dans les contextes où la distinction entre zéro positif et zéro 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 à la fois pour les nombres positifs et négatifs, mais omettre 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 les changements ou les 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 du signe avec le formatage de devise

L'option signDisplay fonctionne avec tous les styles de formatage, y compris le formatage monétaire. 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 vos nombres représentent et de la manière dont les utilisateurs les interpréteront.

Utilisez signDisplay: 'auto' pour le formatage de nombres standard où les nombres négatifs nécessitent une identification claire. C'est le paramètre par défaut et il fonctionne 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 grandeurs 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 grandeur sans direction.

Utilisez signDisplay: 'negative' lorsque vous souhaitez un formatage standard des nombres négatifs mais devez éviter d'afficher un zéro négatif. Cela évite les affichages déroutants de "-0" dans les contextes mathématiques ou scientifiques où la distinction entre zéro positif et négatif n'a pas de sens 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 déroutants de "+0" ou "-0". Les changements de température, les mouvements de prix des actions et les indicateurs 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.

// Standard pricing: use auto (default)
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(-50);
// "-$50.00"

// Absolute price difference: use never
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'never'
}).format(-50);
// "$50.00"

// Price change: use exceptZero
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'exceptZero'
}).format(50);
// "+$50.00"

// Temperature change: use 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.