Wie zeigt man vollständige Währungsnamen anstelle von Symbolen an?

Einführung

Währungssymbole erzeugen Mehrdeutigkeit in internationalen Anwendungen. Das Dollarzeichen $ repräsentiert US-Dollar, kanadische Dollar, australische Dollar und Währungen aus mehr als einem Dutzend anderer Länder. Benutzer können allein anhand des Symbols nicht bestimmen, welche Währung gemeint ist.

Vollständige Währungsnamen beseitigen diese Verwirrung. Anstatt $1,234.56 anzuzeigen, zeigen Sie 1,234.56 US dollars an. Die Währung wird explizit und Benutzer verstehen genau, was sie sehen.

JavaScript bietet zwei Ansätze zur Anzeige vollständiger Währungsnamen. Sie können Währungsbeträge mit Namen mittels Intl.NumberFormat formatieren oder eigenständige Währungsnamen mit Intl.DisplayNames erhalten.

Formatieren von Währungsbeträgen mit vollständigen Namen

Die Option currencyDisplay in Intl.NumberFormat steuert, wie Währungen in formatierten Beträgen erscheinen. Setzen Sie sie auf "name", um den vollständigen Währungsnamen anzuzeigen.

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

console.log(formatter.format(1234.56));
// Ausgabe: 1,234.56 US dollars

Der Formatierer fügt den vollständigen Währungsnamen nach dem Betrag ein. Der Name folgt den grammatikalischen Regeln des von Ihnen angegebenen Gebietsschemas.

Die Werte der currencyDisplay-Option

Die Option currencyDisplay akzeptiert vier Werte, die bestimmen, wie die Währung erscheint.

symbol (Standard)

Zeigt ein lokalisiertes Währungssymbol an.

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

console.log(formatter.format(100));
// Ausgabe: $100.00

code

Zeigt den dreistelligen ISO 4217-Währungscode an.

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

console.log(formatter.format(100));
// Ausgabe: USD 100.00

name

Zeigt den vollständigen lokalisierten Währungsnamen an.

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

console.log(formatter.format(100));
// Ausgabe: 100.00 US dollars

narrowSymbol

Zeigt ein kompaktes Symbolformat ohne Länderunterscheidung an.

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

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

Die Option narrowSymbol erzeugt $ anstelle von US$ für US-Dollar. Verwenden Sie dies, wenn der Währungskontext aus dem Zusammenhang eindeutig hervorgeht.

Wie das Gebietsschema die Währungsnamen beeinflusst

Das Gebietsschema, das Sie an Intl.NumberFormat übergeben, bestimmt die Sprache und Grammatik des Währungsnamens.

const usdollar = 1234.56;

// Englisch
const enFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
});
console.log(enFormatter.format(usdollar));
// Output: 1,234.56 US dollars

// Französisch
const frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
});
console.log(frFormatter.format(usdollar));
// Output: 1 234,56 dollars des États-Unis

// Japanisch
const jaFormatter = new Intl.NumberFormat('ja-JP', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
});
console.log(jaFormatter.format(usdollar));
// Output: 1,234.56 米ドル

Jedes Gebietsschema bietet seine eigene Übersetzung des Währungsnamens. Das Zahlenformat ändert sich ebenfalls entsprechend den Konventionen des Gebietsschemas.

Währungsnamen ohne Beträge abrufen

Verwenden Sie Intl.DisplayNames, wenn Sie nur den Währungsnamen benötigen, ohne einen Betrag zu formatieren.

const currencyNames = new Intl.DisplayNames('en-US', {
  type: 'currency'
});

console.log(currencyNames.of('USD'));
// Output: US Dollar

console.log(currencyNames.of('EUR'));
// Output: Euro

console.log(currencyNames.of('JPY'));
// Output: Japanese Yen

Übergeben Sie ISO 4217-Währungscodes an die Methode of(). Die Methode gibt den lokalisierten Währungsnamen zurück.

Sie können Währungsnamen in jedem Gebietsschema abrufen.

// Währungsnamen auf Französisch abrufen
const frCurrencyNames = new Intl.DisplayNames('fr-FR', {
  type: 'currency'
});

console.log(frCurrencyNames.of('USD'));
// Output: dollar des États-Unis

console.log(frCurrencyNames.of('EUR'));
// Output: euro

Wann vollständige Währungsnamen zu verwenden sind

Verwenden Sie vollständige Währungsnamen in diesen Situationen.

Finanzberichte und -auszüge

Zeigen Sie vollständige Namen in Finanzdokumenten an, bei denen Präzision wichtig ist.

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

console.log(`Total revenue: ${formatter.format(1500000)}`);
// Output: Total revenue: 1,500,000.00 US dollars

Multi-Währungs-Anwendungen

Zeigen Sie vollständige Namen an, wenn Benutzer gleichzeitig mit mehreren Währungen arbeiten.

const currencies = [
  { code: 'USD', amount: 1000 },
  { code: 'EUR', amount: 850 },
  { code: 'GBP', amount: 750 }
];

currencies.forEach(item => {
  const formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: item.code,
    currencyDisplay: 'name'
  });
  console.log(formatter.format(item.amount));
});
// Output:
// 1,000.00 US dollars
// 850.00 euros
// 750.00 British pounds

Währungsauswahl-Schnittstellen

Zeigen Sie Währungsnamen in Dropdown-Menüs oder Auswahllisten an.

const currencies = ['USD', 'EUR', 'GBP', 'JPY', 'CAD'];
const displayNames = new Intl.DisplayNames('en-US', {
  type: 'currency'
});

const options = currencies.map(code => ({
  value: code,
  label: displayNames.of(code)
}));

console.log(options);
// Output:
// [
//   { value: 'USD', label: 'US Dollar' },
//   { value: 'EUR', label: 'Euro' },
//   { value: 'GBP', label: 'British Pound' },
//   { value: 'JPY', label: 'Japanese Yen' },
//   { value: 'CAD', label: 'Canadian Dollar' }
// ]

Barrierefreiheit

Screenreader sprechen vollständige Währungsnamen deutlicher aus als Symbole. Benutzer mit Sehbehinderungen verstehen 100.00 US dollars besser als $100.00.

Verwenden Sie Währungssymbole für kompakte Anzeigen, bei denen Platzbeschränkungen bestehen und der Kontext die Währung eindeutig macht. Verwenden Sie vollständige Namen, wenn Klarheit und Barrierefreiheit Priorität haben.