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 negativer Zahlen. Ein Dashboard, das Temperaturänderungen anzeigt, benötigt explizite Plus- und Minuszeichen, um die Richtung anzugeben. Ein Diagramm, das Größenordnungen darstellt, interessiert sich nur für Absolutwerte und sollte das Vorzeichen vollständig ausblenden. Finanzberichte folgen Buchhaltungskonventionen, die negative Beträge in Klammern setzen, 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.

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

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

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

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

Dieses Standardverhalten funktioniert in den meisten Fällen gut, aber Sie können es überschreiben, wenn Ihr Anwendungsfall eine andere Vorzeichenbehandlung erfordert.

Vorzeichenanzeige mit der Option signDisplay steuern

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

  • "auto": Vorzeichen nur für negative Zahlen anzeigen, einschließlich negativer Null (Standard)
  • "never": Niemals Vorzeichen anzeigen
  • "always": Immer Vorzeichen für sowohl positive als auch negative Zahlen anzeigen
  • "exceptZero": Vorzeichen für positive und negative Zahlen anzeigen, aber nicht für Null
  • "negative": Vorzeichen nur für negative Zahlen anzeigen, ausgenommen negative Null

Übergeben Sie die Option signDisplay im Options-Objekt beim Erstellen eines Formatters.

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

Minuszeichen vollständig ausblenden

Verwenden Sie signDisplay: 'never', um alle Vorzeichen auszublenden und nur Absolutwerte 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, sodass -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 z. B. 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, 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, die 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 die Unterscheidung zwischen positiver und negativer Null für Benutzer keine Rolle spielt.

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 ein Pluszeichen zu positiven Zahlen und positiver Null hinzu. Negative Null behält ihr Minuszeichen, wodurch die Unterscheidung sichtbar wird.

Verwenden Sie diese Option, wenn Sie die Richtung für alle Werte hervorheben müssen, wie z. B. Temperaturänderungen, Höhenänderungen oder finanzielle Gewinne und Verluste.

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 Währungsformatierung. In Kombination mit currencySign: 'accounting' können Sie Formate erstellen, die buchhalterischen Konventionen folgen.

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 visuell deutlicher.

Sie können die buchhalterische Notation 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 Vorzeichenanzeige-Option verwendet werden sollte

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

Verwenden Sie signDisplay: 'auto' für die standardmäßige Zahlenformatierung, bei der negative Zahlen eine klare Kennzeichnung benötigen. Dies ist die Standardeinstellung und funktioniert gut für Preise, Zählungen, Messungen und die meisten allgemeinen Zahlenanzeigen.

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

Verwenden Sie signDisplay: 'negative', wenn Sie eine Standardformatierung für negative Zahlen wünschen, aber die Anzeige von negativer Null vermeiden müssen. Dies verhindert verwirrende "-0"-Anzeigen in mathematischen oder wissenschaftlichen Kontexten, in denen die Unterscheidung zwischen positiver und negativer Null für Benutzer nicht relevant 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 Zunahmen als auch Abnahmen hervorheben möchten. Temperaturänderungen, Höhenunterschiede und Finanzberichte verwenden häufig dieses Format, um positive und negative Werte gleichermaßen explizit darzustellen.

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

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