So steuern Sie Plus- und Minuszeichen bei der Währungsformatierung

Einführung

Wenn Sie einen Transaktionsbetrag wie $500 in einer Banking-App anzeigen, können Benutzer nicht erkennen, ob es sich um eine Einzahlung oder eine Auszahlung handelt. Das fehlende Plus- oder Minuszeichen schafft Mehrdeutigkeit. Durch die Anzeige von +$500 oder -$500 kommunizieren Sie die Transaktionsrichtung klar.

Finanzanwendungen benötigen präzise Kontrolle darüber, wie Vorzeichen bei Währungsbeträgen erscheinen. Transaktionsverläufe zeigen Einzahlungen und Auszahlungen mit expliziten Vorzeichen. Gewinn- und Verlustrechnungen zeigen Gewinne und Verluste mit klaren positiven und negativen Indikatoren. Kontosaldoänderungen benötigen sichtbare Vorzeichen, um zu zeigen, ob Geld auf ein Konto eingegangen oder abgeflossen ist. JavaScripts Intl.NumberFormat bietet die Option signDisplay, um genau zu steuern, wann Plus- und Minuszeichen bei formatierten Währungen erscheinen.

Wie Währungen standardmäßig formatiert werden

Standardmäßig zeigt Intl.NumberFormat ein Minuszeichen für negative Währungsbeträge und kein Vorzeichen für positive Beträge.

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

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 Standardverhalten funktioniert gut für die Anzeige von Preisen und Kontosalden. Wenn jedoch Transaktionsbeträge oder finanzielle Änderungen angezeigt werden, macht das Fehlen eines Pluszeichens bei positiven Werten die Richtung unklar.

Verwendung von signDisplay zur Steuerung von Währungsvorzeichen

Die Option signDisplay steuert, wann Plus- und Minuszeichen in formatierten Währungen erscheinen. Übergeben Sie diese Option beim Erstellen eines Zahlenformatierers für Währungen.

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"

Jetzt werden positive Beträge mit einem Pluszeichen angezeigt, wodurch Einzahlungen und Gewinne explizit statt implizit dargestellt werden.

Verstehen der signDisplay-Werte für Währungen

Die Option signDisplay akzeptiert fünf Werte. Jeder Wert dient spezifischen Zwecken bei der Darstellung von Finanzbeträgen.

auto-Wert für standardmäßige Währungsformatierung

Der Wert "auto" ist das Standardverhalten. Er zeigt das Minuszeichen für negative Beträge, aber kein Vorzeichen für positive Beträge.

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

console.log(formatter.format(1000));
// Output: "$1,000.00"

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

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

Verwenden Sie "auto" für die Anzeige von Preisen, Kontoständen und anderen absoluten Währungswerten, bei denen negative Beträge identifiziert werden müssen, positive Beträge jedoch als selbstverständlich gelten.

always-Wert zur Anzeige aller Transaktionsrichtungen

Der Wert "always" zeigt Vorzeichen für alle Beträge an, einschließlich positiver, negativer und null.

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

console.log(formatter.format(1000));
// Output: "+$1,000.00"

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

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

Verwenden Sie "always" für Transaktionsverläufe, Gewinn- und Verlustrechnungen sowie Kontoaktivitätsfeeds, bei denen die Richtung der Geldbewegung für jeden Eintrag relevant ist. Das explizite Pluszeichen verdeutlicht, dass positive Beträge Einzahlungen, Gewinne oder eingehende Mittel darstellen.

exceptZero-Wert zur Hervorhebung tatsächlicher Änderungen

Der Wert "exceptZero" zeigt Vorzeichen für positive und negative Beträge an, lässt das Vorzeichen bei null jedoch weg.

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

console.log(formatter.format(1000));
// Output: "+$1,000.00"

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

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

Verwenden Sie "exceptZero" für die Anzeige von Saldoänderungen, bei denen null keine Änderung darstellt. Dies macht null visuell von tatsächlichen Gewinnen oder Verlusten unterscheidbar. Handelsplattformen und Investment-Apps verwenden dieses Format zur Anzeige von Preisänderungen und Portfoliowertänderungen.

negative-Wert zur Betonung von Schulden

Der Wert "negative" zeigt das Minuszeichen nur für negative Beträge an, mit Ausnahme von negativer null. Positive Beträge und null werden ohne Vorzeichen angezeigt.

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

console.log(formatter.format(1000));
// Output: "$1,000.00"

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

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

Verwenden Sie "negative" für Kontostände, bei denen negative Beträge Schulden oder Überziehungen darstellen, die hervorgehoben werden müssen. Das Fehlen eines Pluszeichens behandelt positive Salden als normal, während negative Salden Aufmerksamkeit erhalten.

never-Wert zur Anzeige absoluter Beträge

Der "never"-Wert zeigt Währungsbeträge ohne jegliche Vorzeichen an, auch bei negativen Werten.

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

console.log(formatter.format(1000));
// Output: "$1,000.00"

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

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

Verwenden Sie "never" zur Anzeige absoluter Beträge, bei denen die Richtung durch andere Mittel kommuniziert wird. Wenn Transaktionslisten separate Spalten für Soll und Haben verwenden oder wenn Farbcodierung positive und negative Werte anzeigt, verhindert das Entfernen des Vorzeichens redundante Informationen.

Kombination von signDisplay mit accounting-Stil

Die Währungsformatierung unterstützt eine Buchhaltungsnotation, die negative Beträge in Klammern anzeigt. Setzen Sie currencySign auf "accounting", um dieses Format zu aktivieren.

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

console.log(formatter.format(1000));
// Output: "$1,000.00"

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

Das Buchhaltungsformat umschließt negative Beträge mit Klammern anstatt ein Minuszeichen zu verwenden. Diese Konvention erscheint in Finanzberichten, Buchhaltungssoftware und Geschäftsabrechnungen.

Sie können die Buchhaltungsnotation mit verschiedenen signDisplay-Werten kombinieren, um zu steuern, wie positive Beträge erscheinen, während negative Beträge Klammern verwenden.

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

console.log(formatter.format(1000));
// Output: "+$1,000.00"

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

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

Mit signDisplay: "always" zeigen positive Beträge ein Pluszeichen, während negative Beträge weiterhin Klammern verwenden. Dieses Format eignet sich gut für Gewinn- und Verlustrechnungen, bei denen sowohl Gewinne als auch Verluste klar identifiziert werden müssen.

Mit signDisplay: "exceptZero" erscheint Null ohne Vorzeichen, während positive und negative Beträge ihre jeweiligen Indikatoren verwenden.

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

console.log(formatter.format(1000));
// Output: "+$1,000.00"

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

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

Diese Kombination hebt tatsächliche Änderungen hervor und macht Null visuell neutral.

Wie signDisplay mit Währungsanzeigemodi funktioniert

Die Währungsformatierung unterstützt drei Anzeigemodi für die Währung selbst. Die currencyDisplay-Option steuert, ob die Währung als Symbol, Code oder Name angezeigt wird.

Die signDisplay-Option funktioniert konsistent über alle Währungsanzeigemodi hinweg.

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

console.log(symbol.format(100));
// Output: "+$100.00"

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

console.log(code.format(100));
// Output: "+USD 100.00"

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

console.log(name.format(100));
// Output: "+100.00 US dollars"

Das Vorzeichen erscheint an der entsprechenden Position, unabhängig davon, wie die Währung angezeigt wird. Dies gewährleistet eine konsistente Sichtbarkeit des Vorzeichens über verschiedene Währungsformate hinweg.

Vorzeichenpositionierung variiert je nach Gebietsschema

Verschiedene Gebietsschemata positionieren das Vorzeichen an unterschiedlichen Stellen relativ zum Währungssymbol. JavaScript behandelt diese gebietsschemaspezifischen Konventionen automatisch.

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

console.log(enUS.format(100));
// Output: "+$100.00"

console.log(enUS.format(-100));
// Output: "-$100.00"

const frFR = new Intl.NumberFormat("fr-FR", {
  style: "currency",
  currency: "EUR",
  signDisplay: "always"
});

console.log(frFR.format(100));
// Output: "+100,00 €"

console.log(frFR.format(-100));
// Output: "-100,00 €"

Im US-Englischen erscheint das Vorzeichen vor dem Währungssymbol. Im Französischen erscheint das Vorzeichen vor der Zahl mit dem Währungssymbol danach. Der Formatierer respektiert diese Gebietsschemakonventionen und berücksichtigt gleichzeitig Ihre signDisplay-Auswahl.

Einige Gebietsschemata positionieren negative Vorzeichen anders als positive Vorzeichen, selbst bei Verwendung von signDisplay: "always".

const nlNL = new Intl.NumberFormat("nl-NL", {
  style: "currency",
  currency: "EUR",
  signDisplay: "always"
});

console.log(nlNL.format(100));
// Output: "+€ 100,00"

console.log(nlNL.format(-100));
// Output: "-€ 100,00"

JavaScript stellt sicher, dass die Ausgabe den korrekten Formatierungsregeln für jedes Gebietsschema folgt und gleichzeitig die von Ihnen angegebene Vorzeichensichtbarkeit beibehält.

Praxisnahe Anwendungsfälle für die Steuerung von Währungsvorzeichen

Verschiedene Finanzkontexte erfordern unterschiedliche Strategien zur Vorzeichenanzeige.

Transaktionsverläufe

Banking-Apps und Zahlungsplattformen zeigen Transaktionslisten an, bei denen jeder Eintrag Geldbewegungen ein- oder ausgehend darstellt. Verwenden Sie signDisplay: "always", um jede Transaktionsrichtung explizit zu machen.

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

const transactions = [
  { description: "Salary deposit", amount: 3500 },
  { description: "Rent payment", amount: -1200 },
  { description: "Grocery store", amount: -85.50 },
  { description: "Refund", amount: 25 }
];

transactions.forEach(transaction => {
  console.log(`${transaction.description}: ${formatter.format(transaction.amount)}`);
});
// Output:
// Salary deposit: +$3,500.00
// Rent payment: -$1,200.00
// Grocery store: -$85.50
// Refund: +$25.00

Die expliziten Vorzeichen verdeutlichen, ob jede Transaktion den Kontostand erhöht oder verringert hat.

Gewinn- und Verlustrechnungen

Finanzberichte zeigen Gewinne und Verluste mit klaren positiven und negativen Indikatoren. Verwenden Sie signDisplay: "always" mit Buchhaltungsnotation für professionelle Finanzberichte.

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

const financials = {
  revenue: 150000,
  expenses: -95000,
  netIncome: 55000
};

console.log(`Revenue: ${formatter.format(financials.revenue)}`);
// Output: Revenue: +$150,000.00

console.log(`Expenses: ${formatter.format(financials.expenses)}`);
// Output: Expenses: ($95,000.00)

console.log(`Net Income: ${formatter.format(financials.netIncome)}`);
// Output: Net Income: +$55,000.00

Dieses Format folgt Buchhaltungskonventionen und macht gleichzeitig sowohl Gewinne als auch Verluste deutlich.

Saldoänderungsindikatoren

Investmentplattformen und Trading-Apps zeigen, wie sich Kontowerte im Laufe der Zeit verändert haben. Verwenden Sie signDisplay: "exceptZero", um tatsächliche Änderungen hervorzuheben und gleichzeitig keine Änderung visuell neutral darzustellen.

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

const changes = [
  { period: "Today", change: 125.50 },
  { period: "This week", change: -45.75 },
  { period: "This month", change: 0 },
  { period: "This year", change: 1850 }
];

changes.forEach(item => {
  console.log(`${item.period}: ${formatter.format(item.change)}`);
});
// Output:
// Today: +$125.50
// This week: -$45.75
// This month: $0.00
// This year: +$1,850.00

Null wird ohne Vorzeichen angezeigt, wodurch es als Zeitraum ohne Änderung hervorsticht.

Kontostände

Banking-Apps zeigen aktuelle Kontostände an, wobei negative Werte Überziehungen anzeigen. Verwenden Sie signDisplay: "negative", um Schulden hervorzuheben, während positive Kontostände als normal behandelt werden.

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

const accounts = [
  { name: "Checking", balance: 2500 },
  { name: "Savings", balance: 15000 },
  { name: "Credit Card", balance: -850 }
];

accounts.forEach(account => {
  console.log(`${account.name}: ${formatter.format(account.balance)}`);
});
// Output:
// Checking: $2,500.00
// Savings: $15,000.00
// Credit Card: -$850.00

Das Minuszeichen lenkt die Aufmerksamkeit auf den negativen Kontostand, während positive Kontostände ohne Vorzeichen erscheinen.

Absolute Preisunterschiede im Preisvergleich

Shopping-Apps und Preisvergleichstools zeigen, wie stark sich Preise zwischen Optionen unterscheiden. Verwenden Sie signDisplay: "never" bei der Anzeige absoluter Preisunterschiede, bei denen die Richtung keine Rolle spielt.

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

const comparisons = [
  { item: "Laptop A vs B", difference: -150 },
  { item: "Phone X vs Y", difference: 75 },
  { item: "Tablet M vs N", difference: -25 }
];

comparisons.forEach(comp => {
  console.log(`${comp.item}: ${formatter.format(comp.difference)} difference`);
});
// Output:
// Laptop A vs B: $150.00 difference
// Phone X vs Y: $75.00 difference
// Tablet M vs N: $25.00 difference

Alle Beträge werden als positive Werte angezeigt und zeigen die Größenordnung des Unterschieds, unabhängig davon, welche Option mehr kostet.

Kombination von signDisplay mit Dezimalpräzision

Die Option signDisplay funktioniert mit allen anderen Währungsformatierungsoptionen. Sie können Dezimalstellen, Rundung und Vorzeichenanzeige gemeinsam steuern.

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

console.log(formatter.format(1234.5));
// Output: "+$1,234.50"

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

Dies gewährleistet eine konsistente Dezimalpräzision bei gleichzeitiger Anzeige expliziter Vorzeichen für alle Beträge.

Sie können signDisplay auch mit minimalen und maximalen signifikanten Ziffern für wissenschaftliche oder finanzielle Berechnungen kombinieren.

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

console.log(formatter.format(1234.567));
// Output: "+$1,230"

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

Der Formatierer wendet Regeln für signifikante Ziffern an und behält dabei das von Ihnen angegebene Vorzeichenanzeigeverhalten bei.

Was Sie sich merken sollten

Die Option signDisplay in Intl.NumberFormat steuert, wann Plus- und Minuszeichen in formatierten Währungsbeträgen erscheinen. Verwenden Sie "always", um explizite Vorzeichen für alle Beträge 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 auf Ihrem finanziellen Kontext. Transaktionsverläufe benötigen explizite Vorzeichen für alle Beträge. Saldoänderungsindikatoren profitieren davon, Null visuell neutral darzustellen. Kontostände funktionieren gut, wenn nur negative Werte hervorgehoben werden. Preisvergleiche benötigen oft Absolutwerte ohne Vorzeichen.

Kombinieren Sie signDisplay mit Buchhaltungsnotation, Währungsanzeigemodi und Dezimalpräzisionsoptionen, um das exakte Währungsformat zu erstellen, das Ihre Finanzanwendung benötigt. JavaScript handhabt die gebietsschemaspezifische Vorzeichenpositionierung automatisch und respektiert dabei Ihre Vorzeichenanzeigeeinstellungen.