So zeigen Sie das Pluszeichen für positive Zahlen an

Einführung

Wenn Sie eine Zahl wie 5 in einer Wetter-App anzeigen, die die Temperaturänderung zeigt, können Benutzer nicht erkennen, ob dies eine absolute Temperatur von 5 Grad oder eine Änderung von plus 5 Grad darstellt. Das fehlende Pluszeichen schafft Mehrdeutigkeit. Durch die explizite Anzeige des Pluszeichens als +5 kommunizieren Sie, dass der Wert eine Zunahme und keine neutrale Messung darstellt.

Diese Unterscheidung ist wichtig bei der Anzeige von Änderungen, Differenzen oder Deltas. Aktienkursänderungen, Kontostandanpassungen, Punktedifferenzen und Temperaturschwankungen profitieren alle von expliziten Pluszeichen, die die Richtung der Änderung verdeutlichen. JavaScripts Intl.NumberFormat bietet die Option signDisplay, um zu steuern, wann Plus- und Minuszeichen erscheinen.

Wie Zahlen standardmäßig angezeigt werden

Standardmäßig zeigt JavaScript nur ein Minuszeichen für negative Zahlen an. Positive Zahlen und Null werden ohne Vorzeichen angezeigt.

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

console.log(formatter.format(42));
// Output: "42"

console.log(formatter.format(-42));
// Output: "-42"

console.log(formatter.format(0));
// Output: "0"

Dieses Standardverhalten funktioniert gut für absolute Werte wie Preise, Mengen oder Messungen. Wenn Sie jedoch eine Änderung oder Differenz anzeigen müssen, macht das Fehlen eines Pluszeichens positive Werte mehrdeutig.

Betrachten Sie die Anzeige täglicher Temperaturänderungen. Ohne explizite Vorzeichen sehen Benutzer Zahlen wie 3 und 5, die absolute Temperaturen statt Änderungen bedeuten könnten. Mit expliziten Vorzeichen wie +3 und +5 wird die Bedeutung klar.

Verwendung von signDisplay zur Anzeige von Pluszeichen

Die Option signDisplay in Intl.NumberFormat steuert, wann Vorzeichen für Zahlen angezeigt werden. Setzen Sie signDisplay auf "always", um sowohl Plus- als auch Minuszeichen anzuzeigen.

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

console.log(formatter.format(42));
// Output: "+42"

console.log(formatter.format(-42));
// Output: "-42"

console.log(formatter.format(0));
// Output: "+0"

Jetzt werden positive Zahlen mit einem Pluszeichen angezeigt, negative Zahlen mit einem Minuszeichen und Null mit einem Pluszeichen. Dieses Format eignet sich gut für die Anzeige von Änderungen, bei denen das Vorzeichen eine Bedeutung trägt.

Alle signDisplay-Werte verstehen

Die Option signDisplay akzeptiert fünf Werte. Jeder Wert dient einem spezifischen Zweck, abhängig davon, wie Sie Vorzeichen für positive, negative und Nullwerte handhaben möchten.

Auto-Wert für Standard-Vorzeichenverhalten

Der Wert "auto" ist das Standardverhalten. Er zeigt das Minuszeichen für negative Zahlen einschließlich negativer Null an, aber kein Vorzeichen für positive Zahlen oder positive Null.

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

console.log(formatter.format(100));
// Output: "100"

console.log(formatter.format(-100));
// Output: "-100"

console.log(formatter.format(0));
// Output: "0"

Verwenden Sie "auto" bei der Anzeige von Absolutwerten, bei denen das Fehlen eines Vorzeichens einen positiven Wert impliziert. Dies ist das Standardformat für Preise, Anzahlen und Messungen.

Always-Wert, um alle Vorzeichen anzuzeigen

Der Wert "always" zeigt Vorzeichen für alle Zahlen an, einschließlich positiver, negativer und Null.

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

console.log(formatter.format(100));
// Output: "+100"

console.log(formatter.format(-100));
// Output: "-100"

console.log(formatter.format(0));
// Output: "+0"

Verwenden Sie "always" bei der Anzeige von Änderungen oder Deltas, bei denen Null keine Änderung darstellt. Das Pluszeichen bei Null verdeutlicht, dass Null ein neutraler Wert ist und kein fehlender Wert.

ExceptZero-Wert, um das Vorzeichen von Null auszublenden

Der Wert "exceptZero" zeigt Vorzeichen für positive und negative Zahlen an, lässt aber das Vorzeichen für Null weg.

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

console.log(formatter.format(100));
// Output: "+100"

console.log(formatter.format(-100));
// Output: "-100"

console.log(formatter.format(0));
// Output: "0"

Verwenden Sie "exceptZero", wenn Null einen besonderen Zustand darstellt, der sich visuell von positiven und negativen Werten unterscheiden sollte. Zum Beispiel bei der Anzeige von Punkteänderungen, bei denen Null bedeutet, dass keine Änderung stattgefunden hat.

Negative-Wert, um nur Minuszeichen anzuzeigen

Der Wert "negative" zeigt das Minuszeichen nur für negative Zahlen an, ausgenommen negative Null. Positive Zahlen und Null werden ohne Vorzeichen angezeigt.

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

console.log(formatter.format(100));
// Output: "100"

console.log(formatter.format(-100));
// Output: "-100"

console.log(formatter.format(-0));
// Output: "0"

Verwenden Sie "negative", wenn Sie negative Werte hervorheben möchten, während positive Werte und Null neutral behandelt werden. Dies eignet sich gut für Kontostände, bei denen negative Werte Schulden darstellen.

never-Wert zum Ausblenden aller Vorzeichen

Der Wert "never" zeigt Zahlen ohne jegliche Vorzeichen an, auch für negative Zahlen.

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

console.log(formatter.format(100));
// Output: "100"

console.log(formatter.format(-100));
// Output: "100"

console.log(formatter.format(0));
// Output: "0"

Verwenden Sie "never", wenn Sie den Absolutwert einer Zahl unabhängig von ihrem Vorzeichen anzeigen müssen. Dies ist nützlich für die Anzeige von Größenordnungen, bei denen die Richtung bereits durch andere Mittel wie Farbe oder Symbole kommuniziert wurde.

Wann welche signDisplay-Option verwendet werden sollte

Wählen Sie den Wert signDisplay basierend darauf, was die Zahl darstellt und wie Benutzer sie interpretieren müssen.

Verwenden Sie "always" für Änderungen, Differenzen oder Deltas, bei denen das Vorzeichen die Richtung angibt. Temperaturänderungen, Aktienkursbewegungen und Punktedifferenzen benötigen explizite Vorzeichen, um zu zeigen, ob Werte gestiegen oder gesunken sind.

Verwenden Sie "exceptZero" für Änderungen, bei denen Null keine Änderung darstellt und visuell neutral sein sollte. Dies hilft, Null als Sonderfall hervorzuheben, der weder Zunahme noch Abnahme bedeutet.

Verwenden Sie "auto" für Absolutwerte, bei denen die Zahl eine Menge oder Messung und keine Änderung darstellt. Preise, Entfernungen, Gewichte und Zählungen funktionieren mit der Standardvorzeichenanzeige.

Verwenden Sie "negative" für Werte, bei denen negative Zahlen besondere Aufmerksamkeit erfordern, positive Zahlen jedoch normal sind. Kontostände und Gewinnberechnungen heben oft Schulden hervor, während positive Salden als Standard behandelt werden.

Verwenden Sie "never" für absolute Größenordnungen, bei denen die Richtung separat kommuniziert wird. Wenn Farbe oder Symbole bereits positiv oder negativ anzeigen, verhindert das Entfernen des Vorzeichens redundante Informationen.

Pluszeichen bei Währungen anzeigen

Die Währungsformatierung funktioniert mit signDisplay, um Kontoänderungen und Transaktionsbeträge mit expliziten Vorzeichen anzuzeigen.

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

console.log(formatter.format(250.50));
// Output: "+$250.50"

console.log(formatter.format(-75.25));
// Output: "-$75.25"

console.log(formatter.format(0));
// Output: "+$0.00"

Dieses Format zeigt deutlich, ob eine Transaktion Geld auf ein Konto eingezahlt oder abgehoben hat. Das Pluszeichen macht Einzahlungen explizit statt implizit.

Sie können die Währungsformatierung mit exceptZero kombinieren, um keine Änderung von positiven oder negativen Transaktionen zu unterscheiden.

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

console.log(formatter.format(250.50));
// Output: "+$250.50"

console.log(formatter.format(-75.25));
// Output: "-$75.25"

console.log(formatter.format(0));
// Output: "$0.00"

Jetzt erscheint Null ohne Vorzeichen, wodurch sie sich visuell von tatsächlichen Gewinnen oder Verlusten unterscheidet.

Pluszeichen bei Prozentangaben anzeigen

Prozentuale Änderungen benötigen häufig explizite Vorzeichen, um zu zeigen, ob Werte gestiegen oder gesunken sind.

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

console.log(formatter.format(0.0523));
// Output: "+5.2%"

console.log(formatter.format(-0.0341));
// Output: "-3.4%"

console.log(formatter.format(0));
// Output: "+0.0%"

Dieses Format eignet sich gut für die Anzeige von Wachstumsraten, Zinssätzen oder Leistungsänderungen. Das Pluszeichen zeigt explizit positives Wachstum an, anstatt Benutzer dies ableiten zu lassen.

Wenn Sie prozentuale Änderungen in Kontexten anzeigen, in denen Null bedeutsam ist, verwenden Sie exceptZero, um Null visuell neutral zu machen.

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

console.log(formatter.format(0.0523));
// Output: "+5.2%"

console.log(formatter.format(0));
// Output: "0.0%"

Die Null ohne Vorzeichen zeigt deutlich an, dass keine Änderung stattgefunden hat.

signDisplay mit Dezimalstellen kombinieren

Die Option signDisplay funktioniert mit allen anderen Zahlenformatierungsoptionen. Sie können Dezimalstellen, Rundung und Tausendertrennzeichen steuern und gleichzeitig die Vorzeichenanzeige kontrollieren.

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"

Diese Kombination gewährleistet konsistente Dezimalstellen und zeigt gleichzeitig explizite Vorzeichen für sowohl positive als auch negative Werte an.

Sie können signDisplay auch mit kompakter Notation kombinieren, um große Änderungen anzuzeigen.

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"

Das kompakte Format macht große Zahlen lesbar, während das Vorzeichen die Änderungsrichtung anzeigt.

Was Sie sich merken sollten

Die Option signDisplay in Intl.NumberFormat steuert, wann Plus- und Minuszeichen in formatierten Zahlen erscheinen. Verwenden Sie "always", um explizite Vorzeichen für alle Zahlen anzuzeigen, "exceptZero", um das Vorzeichen bei Null auszublenden, "auto" für Standardverhalten, "negative", um nur Minuszeichen anzuzeigen, und "never", um alle Vorzeichen auszublenden.

Wählen Sie den richtigen signDisplay-Wert basierend darauf, ob Ihre Zahlen Änderungen oder absolute Werte darstellen und ob Null eine spezielle visuelle Behandlung benötigt. Kombinieren Sie signDisplay mit anderen Formatierungsoptionen wie Währung, Prozentsätzen und Dezimalstellen, um das exakte Format zu erstellen, das Ihre Anwendung benötigt.