Comment afficher les noms complets des devises au lieu des symboles ?

Introduction

Les symboles monétaires créent de l'ambiguïté dans les applications internationales. Le symbole dollar $ représente les dollars américains, les dollars canadiens, les dollars australiens, et les devises de plus d'une douzaine d'autres pays. Les utilisateurs ne peuvent pas déterminer quelle devise vous désignez à partir du symbole seul.

Les noms complets des devises éliminent cette confusion. Au lieu d'afficher $1,234.56, vous affichez 1,234.56 dollars américains. La devise devient explicite et les utilisateurs comprennent exactement ce qu'ils voient.

JavaScript propose deux approches pour afficher les noms complets des devises. Vous pouvez formater les montants avec les noms en utilisant Intl.NumberFormat, ou obtenir les noms de devises autonomes en utilisant Intl.DisplayNames.

Formater les montants avec les noms complets des devises

L'option currencyDisplay dans Intl.NumberFormat contrôle comment les devises apparaissent dans les montants formatés. Définissez-la sur "name" pour afficher le nom complet de la devise.

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

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

Le formateur inclut le nom complet de la devise après le montant. Le nom suit les règles grammaticales de la locale que vous spécifiez.

Les valeurs de l'option currencyDisplay

L'option currencyDisplay accepte quatre valeurs qui déterminent comment la devise apparaît.

symbol (par défaut)

Affiche un symbole monétaire localisé.

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

console.log(formatter.format(100));
// Résultat : $100.00

code

Affiche le code de devise ISO 4217 à trois lettres.

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

console.log(formatter.format(100));
// Résultat : USD 100.00

name

Affiche le nom complet localisé de la devise.

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

console.log(formatter.format(100));
// Résultat : 100.00 US dollars

narrowSymbol

Affiche un format de symbole compact sans distinction de pays.

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

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

L'option narrowSymbol produit $ au lieu de US$ pour les dollars américains. Utilisez cette option lorsque le contexte rend la devise évidente.

Comment la locale affecte les noms de devises

La locale que vous transmettez à Intl.NumberFormat détermine la langue et la grammaire du nom de la devise.

const usdollar = 1234.56;

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

// Français
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

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

Chaque locale fournit sa propre traduction du nom de la devise. Le format des nombres change également selon les conventions de la locale.

Obtenir les noms de devises sans montants

Utilisez Intl.DisplayNames lorsque vous avez besoin du nom de la devise seul sans formater un montant.

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

Transmettez les codes de devise ISO 4217 à la méthode of(). La méthode renvoie le nom de la devise localisé.

Vous pouvez obtenir les noms de devises dans n'importe quelle locale.

// Obtenir les noms de devises en français
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

Quand utiliser les noms complets des devises

Utilisez les noms complets des devises dans ces situations.

Rapports et relevés financiers

Affichez les noms complets dans les documents financiers où la précision est importante.

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

Applications multi-devises

Affichez les noms complets lorsque les utilisateurs travaillent simultanément avec plusieurs devises.

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

Interfaces de sélection de devises

Affichez les noms des devises dans les menus déroulants ou les listes de sélection.

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' }
// ]

Accessibilité

Les lecteurs d'écran annoncent les noms complets des devises plus clairement que les symboles. Les utilisateurs ayant des déficiences visuelles comprennent mieux 100.00 US dollars que $100.00.

Utilisez les symboles de devise pour les affichages compacts où des contraintes d'espace existent et où le contexte rend la devise claire. Utilisez les noms complets lorsque la clarté et l'accessibilité sont prioritaires.