Wie man Pluszeichen für positive Zahlen anzeigt

Einführung

Wenn Sie eine Zahl wie 5 in einer Wetter-App anzeigen, die Temperaturänderungen darstellt, 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. Indem Sie das Pluszeichen explizit als +5 anzeigen, kommunizieren Sie, dass der Wert eine Zunahme und nicht eine neutrale Messung darstellt.

Diese Unterscheidung ist wichtig bei der Anzeige von Änderungen, Unterschieden oder Deltas. Aktienkursänderungen, Kontostandanpassungen, Punktedifferenzen und Temperaturschwankungen profitieren alle von expliziten Pluszeichen, die die Richtung der Änderung verdeutlichen. JavaScript's 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));
// Ausgabe: "42"

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

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

Dieses Standardverhalten funktioniert gut für absolute Werte wie Preise, Mengen oder Messungen. Wenn Sie jedoch eine Änderung oder einen Unterschied 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));
// Ausgabe: "+42"

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

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

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

Verständnis aller signDisplay-Werte

Die Option signDisplay akzeptiert fünf Werte. Jeder Wert dient einem spezifischen Zweck, abhängig davon, wie Sie Vorzeichen für positive, negative und Null-Werte 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", wenn Sie absolute Werte anzeigen, bei denen das Fehlen eines Vorzeichens einen positiven Wert impliziert. Dies ist das Standardformat für Preise, Zählungen und Messungen.

always-Wert zur Anzeige aller Vorzeichen

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

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", wenn Sie Änderungen oder Deltas anzeigen, bei denen Null keine Änderung darstellt. Das Pluszeichen bei Null verdeutlicht, dass Null ein neutraler Wert ist und kein fehlender Wert.

exceptZero-Wert zum Ausblenden des Vorzeichens bei Null

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 speziellen 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 value zur Anzeige von nur Minuszeichen

Der Wert "negative" zeigt das Minuszeichen nur für negative Zahlen an, ausgenommen negativer 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 Kontostandsanzeigen, bei denen negative Werte Schulden darstellen.

never value zum Ausblenden aller Vorzeichen

Der Wert "never" zeigt Zahlen ohne jegliche Vorzeichen an, selbst 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 signDisplay-Wert basierend darauf, was die Zahl repräsentiert und wie Benutzer sie interpretieren müssen.

Verwenden Sie "always" für Änderungen, Unterschiede 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 gefallen 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 absolute Werte, bei denen die Zahl eine Menge oder Messung darstellt und nicht eine Änderung. Preise, Entfernungen, Gewichte und Zählungen funktionieren mit der Standard-Vorzeichenanzeige.

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 mit 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 zum Konto hinzugefügt oder abgehoben hat. Das Pluszeichen macht Einzahlungen explizit, anstatt sie nur zu implizieren.

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 die Null ohne Vorzeichen, wodurch sie sich visuell von tatsächlichen Gewinnen oder Verlusten unterscheidet.

Pluszeichen mit Prozentsätzen anzeigen

Bei Prozentänderungen sind häufig explizite Vorzeichen erforderlich, um anzuzeigen, 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 selbst ableiten zu lassen.

Bei der Anzeige von Prozentänderungen in Kontexten, in denen Null eine Bedeutung hat, verwenden Sie exceptZero, um Null visuell neutral darzustellen.

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.

Kombination von signDisplay mit Dezimalstellen

Die Option signDisplay funktioniert mit allen anderen Zahlenformatierungsoptionen. Sie können Dezimalstellen, Rundung und Tausendertrennzeichen steuern und gleichzeitig die Anzeige von Vorzeichen 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 positive und 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 Richtung der Änderung anzeigt.

Was zu beachten ist

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 das 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.