Wie man Plus- und Minuszeichen bei der Währungsformatierung steuert

Einführung

Wenn Sie einen Transaktionsbetrag wie $500 in einer Banking-App anzeigen, können Benutzer nicht erkennen, ob dies eine Einzahlung oder eine Abhebung darstellt. Das fehlende Plus- oder Minuszeichen schafft Unklarheit. Durch die Anzeige von +$500 oder -$500 kommunizieren Sie die Transaktionsrichtung eindeutig.

Finanzanwendungen benötigen präzise Kontrolle darüber, wie Vorzeichen bei Währungsbeträgen erscheinen. Transaktionshistorien zeigen Einzahlungen und Abhebungen mit expliziten Vorzeichen. Gewinn- und Verlustrechnungen stellen Gewinne und Verluste mit klaren positiven und negativen Indikatoren dar. Kontostandsänderungen benötigen sichtbare Vorzeichen, um zu zeigen, ob Geld auf ein Konto eingegangen oder es verlassen hat. JavaScript's 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 an.

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 eignet sich gut für die Anzeige von Preisen und Kontoständen. 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 bei der Erstellung eines Zahlenformatters 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.

Verständnis der signDisplay-Werte für Währungen

Die Option signDisplay akzeptiert fünf Werte. Jeder Wert dient spezifischen Zwecken bei finanziellen Darstellungen.

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 angenommen werden.

always-Wert zur Anzeige aller Transaktionsrichtungen

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

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 Transaktionshistorien, Gewinn- und Verlustrechnungen und Kontoaktivitätsfeeds, bei denen die Richtung der Geldbewegung für jeden Eintrag wichtig ist. Das explizite Pluszeichen verdeutlicht, dass positive Beträge Einzahlungen, Gewinne oder eingehende Gelder darstellen.

exceptZero-Wert zur Hervorhebung tatsächlicher Änderungen

Der Wert "exceptZero" zeigt Vorzeichen für positive und negative Beträge an, lässt aber das Vorzeichen für Null 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 Kontostandsänderungen, bei denen Null keine Änderung darstellt. Dies macht Null visuell unterscheidbar von tatsächlichen Gewinnen oder Verlusten. Handelsplattformen und Investment-Apps verwenden dieses Format, um Preisänderungen und Änderungen des Portfoliowerts anzuzeigen.

Negativer Wert zur Hervorhebung von Schulden

Der Wert "negative" zeigt das Minuszeichen nur für negative Beträge an, ausgenommen 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 Kontostandsanzeigen, 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 besonders hervorgehoben werden.

never-Wert zur Anzeige absoluter Beträge

Der Wert "never" zeigt Währungsbeträge ohne jegliche Vorzeichen an, selbst für negative Werte.

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 Farbcodierungen positive und negative Werte anzeigen, verhindert das Entfernen des Vorzeichens redundante Informationen.

Kombination von signDisplay mit dem Accounting-Stil

Die Währungsformatierung unterstützt eine buchhalterische Notation, die negative Beträge in Klammern darstellt. 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 Accounting-Format umschließt negative Beträge mit Klammern anstatt ein Minuszeichen zu verwenden. Diese Konvention erscheint in Finanzberichten, Buchhaltungssoftware und Geschäftsberichten.

Sie können die buchhalterische Notation 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 eindeutig 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, während Null visuell neutral bleibt.

Wie signDisplay mit Währungsanzeigemodi funktioniert

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

Die Option signDisplay 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.

Die Positionierung des Vorzeichens variiert je nach Gebietsschema

Verschiedene Gebietsschemas 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 dahinter. Der Formatierer respektiert diese lokalen Konventionen und berücksichtigt gleichzeitig Ihre signDisplay-Auswahl.

Einige Gebietsschemas positionieren negative Vorzeichen anders als positive Vorzeichen, selbst wenn signDisplay: "always" verwendet wird.

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 Sichtbarkeit des Vorzeichens beibehält.

Anwendungsfälle aus der Praxis für die Steuerung von Währungszeichen

Verschiedene finanzielle Kontexte erfordern unterschiedliche Strategien zur Anzeige von Vorzeichen.

Transaktionshistorien

Banking-Apps und Zahlungsplattformen zeigen Transaktionslisten an, bei denen jeder Eintrag Geldein- oder -ausgänge darstellt. Verwenden Sie signDisplay: "always", um die Richtung jeder Transaktion 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 buchhalterischer Notation 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 den Konventionen der Buchhaltung und macht sowohl Gewinne als auch Verluste deutlich.

Saldoänderungsindikatoren

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

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.

Kontostand

Banking-Apps zeigen aktuelle Kontostände an, wobei negative Werte auf Überziehungen hinweisen. Verwenden Sie signDisplay: "negative", um Schulden hervorzuheben, während positive Salden 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 Saldo, während positive Salden ohne Vorzeichen erscheinen.

Absolute Differenzen beim Preisvergleich

Shopping-Apps und Preisvergleichstools zeigen, wie stark sich die Preise zwischen verschiedenen Optionen unterscheiden. Verwenden Sie signDisplay: "never", wenn absolute Preisunterschiede angezeigt werden sollen, 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, die die Größenordnung des Unterschieds darstellen, 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 und zeigt gleichzeitig explizite Vorzeichen für alle Beträge an.

Sie können signDisplay auch mit minimalen und maximalen signifikanten Stellen 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 Stellen an und behält gleichzeitig das von Ihnen angegebene Anzeigeverhalten für Vorzeichen bei.

Was zu beachten ist

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 das Standardverhalten, "negative", um nur Minuszeichen anzuzeigen, und "never", um alle Vorzeichen auszublenden.

Wählen Sie den richtigen signDisplay-Wert basierend auf Ihrem finanziellen Kontext. Transaktionshistorien benötigen explizite Vorzeichen für alle Beträge. Kontostandsänderungen profitieren davon, Null visuell neutral darzustellen. Kontostände funktionieren gut, wenn nur negative Werte hervorgehoben werden. Preisvergleiche benötigen oft absolute Werte ohne Vorzeichen.

Kombinieren Sie signDisplay mit buchhalterischer Notation, Währungsanzeigemodi und Dezimalpräzisionsoptionen, um das exakte Währungsformat zu erstellen, das Ihre Finanzanwendung benötigt. JavaScript handhabt die lokale Positionierung von Vorzeichen automatisch unter Berücksichtigung Ihrer Vorzeichenanzeigeeinstellungen.