Wie zeigt oder verbirgt man das Minuszeichen für negative Zahlen?

Steuern Sie, wann negative und positive Vorzeichen in formatierten Zahlen für verschiedene Kontexte erscheinen

Einführung

Verschiedene Kontexte erfordern unterschiedliche Darstellungen von negativen Zahlen. Ein Dashboard, das Temperaturänderungen anzeigt, benötigt explizite Plus- und Minuszeichen, um die Richtung anzuzeigen. Ein Diagramm, das Größenordnungen darstellt, berücksichtigt nur absolute Werte und sollte das Vorzeichen vollständig ausblenden. Finanzberichte folgen Buchhaltungskonventionen, bei denen negative Beträge in Klammern gesetzt werden, anstatt Minuszeichen zu verwenden.

Die Intl.NumberFormat-API von JavaScript bietet die Option signDisplay, um zu steuern, wann Vorzeichen in formatierten Zahlen erscheinen. Diese Option gibt Ihnen präzise Kontrolle über die Sichtbarkeit von Vorzeichen für negative Zahlen, positive Zahlen und Null.

Wie JavaScript negative Zahlen standardmäßig formatiert

Standardmäßig zeigt Intl.NumberFormat ein Minuszeichen für negative Zahlen und kein Vorzeichen für positive Zahlen an.

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

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

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

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

Dieses Standardverhalten funktioniert gut für die meisten Fälle, aber Sie können es überschreiben, wenn Ihr Anwendungsfall eine andere Behandlung von Vorzeichen erfordert.

Steuerung der Vorzeichenanzeige mit der Option signDisplay

Die Option signDisplay akzeptiert fünf Werte, die steuern, wann Vorzeichen angezeigt werden:

  • "auto": Zeigt Vorzeichen nur für negative Zahlen an, einschließlich negativer Null (Standard)
  • "never": Zeigt niemals Vorzeichen an
  • "always": Zeigt immer Vorzeichen für positive und negative Zahlen an
  • "exceptZero": Zeigt Vorzeichen für positive und negative Zahlen an, aber nicht für Null
  • "negative": Zeigt Vorzeichen nur für negative Zahlen an, ausgenommen negative Null

Übergeben Sie die Option signDisplay im Options-Objekt bei der Erstellung eines Formatters.

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

Das Minuszeichen vollständig ausblenden

Verwenden Sie signDisplay: 'never', um alle Vorzeichen auszublenden und nur absolute Werte anzuzeigen.

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

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

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

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

Diese Einstellung entfernt das Vorzeichen von allen Zahlen, wodurch -100 und 100 identisch formatiert werden. Negative Null wird als "0" ohne Vorzeichen formatiert.

Verwenden Sie diese Option, wenn Sie Größenordnungen anzeigen, bei denen die Richtung keine Rolle spielt, wie absolute Änderungswerte in Datenvisualisierungen, Entfernungsberechnungen oder Fehlermargen.

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"]

Minuszeichen nur für negative Zahlen anzeigen

Die Option signDisplay: 'auto' ist das Standardverhalten. Sie zeigt Vorzeichen für negative Zahlen an, aber nicht für positive Zahlen.

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

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

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

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

Beachten Sie, dass negative Null mit dieser Option als "-0" angezeigt wird. JavaScript unterscheidet zwischen positiver Null und negativer Null, was bei bestimmten mathematischen Operationen auftreten kann.

Verwenden Sie signDisplay: 'negative', um das Vorzeichen für negative Null auszublenden, während es für andere negative Zahlen beibehalten wird.

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

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

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

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

Die Option negative behandelt negative Null als Sonderfall und formatiert sie ohne Vorzeichen. Dies verhindert verwirrende Anzeigen in Kontexten, in denen der Unterschied zwischen positiver und negativer Null für Benutzer nicht relevant ist.

Vorzeichen für alle Zahlen außer Null anzeigen

Verwenden Sie signDisplay: 'exceptZero', um Vorzeichen sowohl für positive als auch für negative Zahlen anzuzeigen, aber das Vorzeichen wegzulassen, wenn der Wert genau Null ist.

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"

Positive Zahlen werden mit einem Pluszeichen angezeigt. Nullwerte, ob positiv oder negativ, werden ohne Vorzeichen angezeigt.

Diese Option eignet sich gut für die Anzeige von Änderungen oder Deltas, bei denen Null keine Änderung bedeutet. Die Anzeige von "+0" oder "-0" wäre verwirrend, aber die Anzeige von "0" macht die Bedeutung klar.

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"]

Vorzeichen für alle Zahlen anzeigen

Verwenden Sie signDisplay: 'always', um Vorzeichen für alle Zahlen anzuzeigen, einschließlich positiver Zahlen und Null.

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"

Diese Einstellung fügt positiven Zahlen und positiver Null ein Pluszeichen hinzu. Die negative Null behält ihr Minuszeichen, wodurch der Unterschied sichtbar wird.

Verwenden Sie diese Option, wenn Sie die Richtung für alle Werte hervorheben müssen, wie bei Temperaturänderungen, Höhenänderungen oder finanziellen Gewinnen und Verlusten.

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"]

Vorzeichenanzeige mit Währungsformatierung kombinieren

Die Option signDisplay funktioniert mit allen Formatierungsstilen, einschließlich der Währungsformatierung. In Kombination mit currencySign: 'accounting' können Sie Formate erstellen, die den Buchhaltungskonventionen entsprechen.

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

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

Die Buchhaltungsnotation umschließt negative Beträge mit Klammern anstelle eines Minuszeichens. Diese Konvention macht negative Zahlen in Finanzberichten optisch deutlicher erkennbar.

Sie können die Buchhaltungsnotation mit verschiedenen signDisplay-Werten kombinieren.

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"

Mit signDisplay: 'always' zeigen positive Beträge ein Pluszeichen, während negative Beträge weiterhin Klammern verwenden. Mit signDisplay: 'never' werden sowohl positive als auch negative Beträge ohne Vorzeichen oder Klammern angezeigt.

Wann welche Anzeigeoptionen für Vorzeichen zu verwenden sind

Wählen Sie Ihren signDisplay-Wert basierend darauf, was Ihre Zahlen repräsentieren und wie Benutzer diese interpretieren werden.

Verwenden Sie signDisplay: 'auto' für die Standardformatierung von Zahlen, bei denen negative Zahlen klar identifiziert werden müssen. Dies ist die Standardeinstellung und eignet sich gut für Preise, Zählungen, Messungen und die meisten allgemeinen Zahlenanzeigen.

Verwenden Sie signDisplay: 'never', wenn Sie absolute Werte oder Größenordnungen anzeigen, bei denen die Richtung keine Rolle spielt. Dies eignet sich gut für Entfernungsberechnungen, Fehlermargen, absolute Änderungswerte und Datenvisualisierungen, die die Größenordnung ohne Richtung anzeigen.

Verwenden Sie signDisplay: 'negative', wenn Sie die Standardformatierung negativer Zahlen wünschen, aber die Anzeige von negativer Null vermeiden möchten. Dies verhindert verwirrende "-0"-Anzeigen in mathematischen oder wissenschaftlichen Kontexten, in denen der Unterschied zwischen positiver und negativer Null für Benutzer nicht bedeutsam ist.

Verwenden Sie signDisplay: 'exceptZero', wenn Sie Änderungen oder Deltas anzeigen, bei denen Null keine Änderung bedeutet. Dies macht Gewinne und Verluste deutlich und vermeidet verwirrende "+0" oder "-0"-Anzeigen. Temperaturänderungen, Aktienkursbewegungen und Leistungskennzahlen profitieren von dieser Option.

Verwenden Sie signDisplay: 'always', wenn die Richtung für alle Werte wichtig ist und Sie sowohl Erhöhungen als auch Verringerungen hervorheben möchten. Temperaturänderungen, Höhenunterschiede und Finanzleistungsberichte verwenden häufig dieses Format, um positive und negative Werte gleichermaßen explizit zu machen.

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

// Absoluter Preisunterschied: never verwenden
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'never'
}).format(-50);
// "$50.00"

// Preisänderung: exceptZero verwenden
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  signDisplay: 'exceptZero'
}).format(50);
// "+$50.00"

// Temperaturänderung: always verwenden
new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius',
  signDisplay: 'always'
}).format(3);
// "+3°C"

Die Option signDisplay gibt Ihnen präzise Kontrolle darüber, wie positive und negative Zahlen in Ihrer Anwendung erscheinen. Wählen Sie den Wert, der die Bedeutung für Ihre Benutzer basierend auf dem Kontext und Zweck jeder angezeigten Zahl am besten kommuniziert.