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

Einführung

Währungssymbole schaffen Mehrdeutigkeit in internationalen Anwendungen. Das Dollarzeichen $ steht für US-Dollar, Kanadische Dollar, Australische Dollar und Währungen von über einem Dutzend weiterer Länder. Benutzer können allein anhand des Symbols nicht bestimmen, welche Währung Sie meinen.

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 über Intl.NumberFormat formatieren oder eigenständige Währungsnamen über Intl.DisplayNames abrufen.

Währungsbeträge mit vollständigen Namen formatieren

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));
// Output: 1,234.56 US dollars

Der Formatter fügt den vollständigen Währungsnamen nach dem Betrag ein. Der Name folgt den grammatikalischen Regeln der von Ihnen angegebenen Locale.

Die Werte der Option currencyDisplay

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));
// Output: $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));
// Output: 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));
// Output: 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 Kontext die Währung eindeutig macht.

Wie das Gebietsschema Währungsnamen beeinflusst

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

const usdollar = 1234.56;

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

// French
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

// Japanese
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.

// Get currency names in French
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 verwendet werden sollten

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

Finanzberichte und Abrechnungen

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 geben vollständige Währungsnamen klarer wieder 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.