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

Utilisez l'option currencyDisplay pour contrôler si les devises apparaissent comme $, 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. Un prix de produit peut s'afficher comme 25 $, 25 USD ou 25 dollars américains. Chaque format sert un objectif différent et fonctionne mieux dans différents contextes.

Le format symbole convient bien aux interfaces d'achat quotidiennes où les utilisateurs savent à quelle devise s'attendre. Le format code élimine l'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'utilisation 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 change 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 ISO de la devise 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 par défaut de currencyDisplay. Il montre un symbole de devise 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));
// Résultat : "$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));
// Résultat : "$25.00"

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

console.log(deFormatter.format(25));
// Résultat : "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));
// Résultat : "€25.00"

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

console.log(deFormatter.format(25));
// Résultat : "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));
// Résultat : "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 un paramètre régional américain, les deux formats produisent le même résultat car aucun préfixe de pays n'est nécessaire. La différence devient évidente lors du formatage des 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, montrant 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 monétaire 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, comme un sélecteur de devise ou une étiquette d'en-tête.

Le format étroit affecte également d'autres devises dans différents paramètres régionaux.

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

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

Chaque paramètre régional définit son propre format de symbole étroit basé sur les conventions locales.

Utilisation du format code pour des affichages sans ambiguïté

Le format code affiche le code ISO 4217 de la devise 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, rendant immédiatement clair 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 locales. 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 entre les dollars américains, les dollars canadiens et les dollars australiens.

Utilisez le format code dans les rapports financiers, les factures internationales, les systèmes comptables et tout contexte où la clarté de la devise est critique. Le format fonctionne également bien dans les API et les exportations de données où les symboles pourraient 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é.

Utilisation du format name pour une clarté maximale

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

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 représente le montant. Ce format est particulièrement précieux pour l'accessibilité. Les lecteurs d'écran peuvent prononcer clairement les noms des devises, tandis que les symboles pourraient ê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 lorsque c'est approprié.

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 non familières dans leur propre langue.

Utilisez le format name 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 non familières bénéficient des 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 significativement plus longs que les symboles ou les codes. Une interface mobile compacte pourrait avoir du mal à intégrer 25,00 dollars américains là où 25,00 $ fonctionnerait bien.

Choisir le bon format d'affichage

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

Utilisez symbol pour les interfaces quotidiennes où les utilisateurs opèrent dans une seule devise. Les sites de commerce électronique, 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 d'affaires 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 causer des problèmes.

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 épelés. Le format aide également les utilisateurs à apprendre 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 pourrait afficher des symboles par défaut avec une option pour passer aux codes pour une analyse détaillée. Un convertisseur de devises pourrait utiliser des codes dans l'interface mais afficher des noms dans les infobulles.

Prenez en compte le niveau d'expertise de votre utilisateur. Les professionnels de la finance comprennent les codes de devise. Les consommateurs généraux 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 de 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 de 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 épelé de la devise.

Ce qu'il faut retenir

L'option currencyDisplay contrôle comment les unités monétaires apparaissent dans les montants formatés. Utilisez symbol pour les affichages quotidiens familiers, narrowSymbol pour les interfaces compactes avec espace limité, 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 si l'ambiguïté entre les devises est préoccupante. Combinez currencyDisplay avec d'autres options de formatage pour créer la représentation exacte dont votre application a besoin.