Comment afficher une devise sous forme de symbole, code ou nom

Utilisez l'option currencyDisplay pour contrôler si les devises apparaissent sous forme de $, USD ou dollars américains

Introduction

Lorsque vous affichez un prix ou un montant monétaire, vous devez décider comment représenter la devise. Le prix d'un produit peut s'afficher sous forme de 25 $, 25 USD ou 25 dollars américains. Chaque format répond à un objectif différent et fonctionne mieux dans des contextes différents.

Le format symbole fonctionne bien pour les interfaces d'achat quotidiennes où les utilisateurs savent quelle devise attendre. Le format code élimine toute ambiguïté dans les documents commerciaux internationaux où plusieurs devises apparaissent. Le format nom offre une clarté maximale pour les outils d'accessibilité et le contenu éducatif.

JavaScript fournit l'option currencyDisplay dans Intl.NumberFormat pour contrôler comment les devises apparaissent. Cette leçon explique les quatre formats disponibles, comment ils diffèrent selon les locales et quel format choisir pour votre cas d'usage spécifique.

Comprendre l'option currencyDisplay

L'option currencyDisplay contrôle comment l'unité monétaire apparaît lors du formatage des montants monétaires. Elle ne modifie pas la valeur numérique, seulement la façon dont la devise est représentée.

Quatre valeurs sont disponibles :

  • symbol affiche un symbole de devise localisé comme $ ou €
  • narrowSymbol affiche un symbole compact comme $ au lieu de $ US
  • code affiche le code de devise ISO comme USD ou EUR
  • name affiche le nom complet de la devise comme dollars américains ou euros

Chaque format crée une représentation visuelle différente du même montant. Le choix dépend des exigences de votre interface utilisateur, de l'espace disponible et des attentes de votre audience.

Utilisation du format symbole pour les affichages quotidiens

Le format symbol est la valeur currencyDisplay par défaut. Il affiche un symbole monétaire localisé que les utilisateurs d'une locale donnée s'attendent à voir.

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

console.log(formatter.format(25));
// Output: "$25.00"

Ce format produit la représentation la plus familière pour les utilisateurs. Les Américains s'attendent à voir des signes dollar, les Européens s'attendent à voir des symboles euro, et les utilisateurs britanniques s'attendent à voir des symboles livre.

Le symbole s'adapte en fonction de la locale et de la devise. Lorsque vous formatez des dollars américains pour une locale allemande, le formateur utilise un symbole localisé qui inclut la désignation du pays.

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

console.log(usFormatter.format(25));
// Output: "$25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'symbol'
});

console.log(deFormatter.format(25));
// Output: "25,00 $"

Remarquez comment le formateur allemand place le signe dollar après le montant et utilise une virgule comme séparateur décimal. Ces conventions spécifiques à la locale s'appliquent automatiquement.

Lorsque vous formatez des euros pour différentes locales, le symbole euro apparaît mais les conventions de formatage changent.

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

console.log(usFormatter.format(25));
// Output: "€25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'symbol'
});

console.log(deFormatter.format(25));
// Output: "25,00 €"

Le format symbole fonctionne bien lorsque les utilisateurs opèrent dans un contexte de devise unique. Un site e-commerce américain affichant des prix en USD peut utiliser en toute sécurité des signes dollar. Un site européen affichant des prix en EUR peut utiliser des symboles euro.

Cependant, le format symbole peut créer une ambiguïté lorsque plusieurs devises partagent des symboles similaires. Les dollars canadiens, australiens et américains utilisent tous le signe dollar. Dans ces cas, certaines locales ajoutent un préfixe de pays pour lever l'ambiguïté.

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

console.log(usFormatter.format(25));
// Output: "CA$25.00"

Le formateur ajoute CA$ pour distinguer les dollars canadiens des dollars américains lors du formatage pour une locale américaine.

Utilisation du format narrowSymbol pour les affichages compacts

Le format narrowSymbol affiche le symbole monétaire sans préfixes de pays. Cela crée une représentation plus compacte qui fonctionne bien dans les interfaces à espace limité.

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

console.log(symbolFormatter.format(25));
// Output: "$25.00"

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

console.log(narrowFormatter.format(25));
// Output: "$25.00"

Pour les dollars américains dans une locale américaine, les deux formats produisent le même résultat car aucun préfixe de pays n'est nécessaire. La différence devient apparente lors du formatage de devises qui pourraient autrement inclure une désignation de pays.

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

console.log(symbolFormatter.format(25));
// Output: "CA$25.00"

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

console.log(narrowFormatter.format(25));
// Output: "$25.00"

Le format de symbole étroit supprime le préfixe CA, affichant uniquement le signe dollar. Cela économise de l'espace mais perd la distinction entre les dollars canadiens et américains.

Utilisez narrowSymbol lorsque l'espace est limité et que le contexte de la devise est clair à partir d'autres parties de l'interface. Les applications mobiles, les tableaux de bord compacts et les tableaux de données bénéficient du format plus court. Cependant, assurez-vous que les utilisateurs peuvent déterminer quelle devise ils consultent par d'autres moyens, tels qu'un sélecteur de devise ou une étiquette d'en-tête.

Le format étroit affecte également d'autres devises dans différentes locales.

const narrowFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'narrowSymbol'
});

console.log(narrowFormatter.format(25));
// Output: "25,00 €"

Chaque locale définit son propre format de symbole étroit basé sur les conventions locales.

Utilisation du format code pour des affichages non ambigus

Le format code affiche le code de devise ISO 4217 au lieu d'un symbole. Ce code à trois lettres identifie de manière unique chaque devise sans ambiguïté.

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

console.log(formatter.format(25));
// Output: "USD 25.00"

Le code apparaît à la place du symbole, indiquant immédiatement quelle devise le montant représente. Ce format fonctionne dans toutes les locales avec des abréviations cohérentes.

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

console.log(usFormatter.format(25));
// Output: "EUR 25.00"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'code'
});

console.log(deFormatter.format(25));
// Output: "25,00 EUR"

Le code EUR apparaît dans les deux formats, bien que la position et le formatage des nombres suivent les conventions de la locale. Cette combinaison de codes de devise universels avec un formatage de nombres spécifique à la locale rend le format code précieux pour les contextes internationaux.

Le format code élimine la confusion entre les devises qui partagent des symboles.

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

console.log(usdFormatter.format(25));
// Output: "USD 25.00"

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

console.log(cadFormatter.format(25));
// Output: "CAD 25.00"

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

console.log(audFormatter.format(25));
// Output: "AUD 25.00"

Chaque variante de dollar reçoit un code distinct. Les utilisateurs peuvent immédiatement distinguer les dollars américains, les dollars canadiens et les dollars australiens.

Utilisez le format de code dans les rapports financiers, les factures internationales, les systèmes comptables et tout contexte où la clarté de la devise est essentielle. Le format fonctionne également bien dans les API et les exports de données où les symboles peuvent causer des problèmes d'encodage.

Le compromis est une familiarité réduite. La plupart des consommateurs reconnaissent $ mais peuvent ne pas savoir immédiatement ce que CAD représente. Utilisez les codes lorsque votre audience les comprend ou lorsque la précision l'emporte sur la familiarité.

Utiliser le format de nom pour une clarté maximale

Le format name affiche le nom complet de la devise dans la langue de la locale. Cela fournit une clarté totale sur la devise que le montant représente.

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

console.log(formatter.format(25));
// Output: "25.00 US dollars"

Le nom de la devise apparaît en toutes lettres, ne laissant aucune ambiguïté sur ce que le montant représente. Ce format est particulièrement précieux pour l'accessibilité. Les lecteurs d'écran peuvent prononcer clairement les noms de devises, tandis que les symboles peuvent être annoncés de manière incohérente.

Le nom s'adapte à la locale, s'affichant dans la langue appropriée.

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

console.log(enFormatter.format(25));
// Output: "25.00 euros"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(deFormatter.format(25));
// Output: "25,00 Euro"

const frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'EUR',
  currencyDisplay: 'name'
});

console.log(frFormatter.format(25));
// Output: "25,00 euros"

L'anglais utilise euros, l'allemand utilise Euro et le français utilise euros. L'API gère automatiquement ces variations linguistiques, y compris les formes plurielles le cas échéant.

Différentes devises affichent leurs noms dans la langue appropriée pour chaque locale.

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

console.log(enFormatter.format(1000));
// Output: "1,000 Japanese yen"

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'JPY',
  currencyDisplay: 'name'
});

console.log(deFormatter.format(1000));
// Output: "1.000 Japanische Yen"

L'anglais affiche Japanese yen tandis que l'allemand affiche Japanische Yen. Cette localisation aide les utilisateurs à comprendre les devises peu familières dans leur propre langue.

Utilisez le format de nom lorsque la clarté est plus importante que l'espace. Le contenu éducatif, les interfaces axées sur l'accessibilité et les contextes où les utilisateurs peuvent rencontrer des devises peu familières bénéficient de noms écrits en toutes lettres. Le format fonctionne également bien pour les interfaces vocales où les noms de devises sont plus faciles à traiter que les symboles.

Le compromis est l'espace. Les noms de devises sont considérablement plus longs que les symboles ou les codes. Une interface mobile compacte pourrait avoir du mal à afficher 25,00 dollars américains là où 25,00 $ fonctionnerait parfaitement.

Choisir le bon format d'affichage

Sélectionnez votre valeur currencyDisplay en fonction des contraintes d'espace, de la familiarité de l'audience et des préoccupations d'ambiguïté.

Utilisez symbol pour les interfaces quotidiennes où les utilisateurs opèrent dans une seule devise. Les sites e-commerce, les pages de tarification et les applications grand public fonctionnent bien avec les symboles. Les utilisateurs reconnaissent rapidement les symboles et ceux-ci occupent un espace minimal.

Utilisez narrowSymbol lorsque l'espace est extrêmement limité et que le contexte de la devise est clair. Les applications mobiles, les tableaux compacts et les widgets de tableau de bord bénéficient du format plus court. Assurez-vous que la devise est identifiée ailleurs dans l'interface.

Utilisez code lorsque vous devez distinguer plusieurs devises sans ambiguïté. Les applications financières, les convertisseurs de devises, les outils commerciaux internationaux et les systèmes comptables nécessitent la précision que les codes fournissent. Le format fonctionne également bien dans les contextes techniques où les symboles pourraient poser problème.

Utilisez name lorsqu'une clarté maximale est requise. Les interfaces axées sur l'accessibilité, le contenu éducatif, les interfaces vocales et les contextes avec des devises peu familières bénéficient des noms écrits en toutes lettres. Le format aide également les utilisateurs qui découvrent les devises internationales.

Vous pouvez fournir plusieurs vues des mêmes données en permettant aux utilisateurs de basculer entre les formats. Un tableau de bord financier peut afficher les symboles par défaut avec une option pour passer aux codes pour une analyse détaillée. Un convertisseur de devises peut utiliser des codes dans l'interface mais afficher les noms dans les infobulles.

Tenez compte du niveau d'expertise de votre utilisateur. Les professionnels de la finance comprennent les codes de devises. Les consommateurs grand public s'attendent à des symboles. Les utilisateurs internationaux peuvent avoir besoin de codes pour distinguer les devises. Les utilisateurs ayant des besoins d'accessibilité bénéficient des noms.

Combiner currencyDisplay avec d'autres options

L'option currencyDisplay fonctionne avec toutes les autres options de formatage des nombres. Vous pouvez contrôler les décimales, l'arrondi et l'affichage du signe tout en choisissant votre format de devise.

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

console.log(formatter.format(25.5));
// Output: "USD 25.50"

Le format code apparaît avec les paramètres de décimales spécifiés. Vous pouvez combiner currencyDisplay avec n'importe quelle autre option comme signDisplay, notation, ou des règles d'arrondi personnalisées.

Différents formats d'affichage fonctionnent avec la notation comptable.

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

console.log(formatter.format(-25));
// Output: "(25.00 US dollars)"

Les parenthèses du format comptable se combinent avec le nom de la devise écrit en toutes lettres.

Ce qu'il faut retenir

L'option currencyDisplay contrôle la façon dont les unités monétaires apparaissent dans les montants formatés. Utilisez symbol pour des affichages quotidiens familiers, narrowSymbol pour des interfaces compactes avec contraintes d'espace, code pour des contextes internationaux sans ambiguïté, et name pour une clarté et une accessibilité maximales.

Choisissez le format en fonction de l'espace disponible, de l'expertise des utilisateurs et de la nécessité d'éviter toute ambiguïté entre les devises. Combinez currencyDisplay avec d'autres options de formatage pour créer la représentation exacte dont votre application a besoin.