Comment formater les devises avec des symboles spécifiques à la locale

Introduction

Les symboles monétaires identifient la devise qu'un prix représente. Le signe dollar indique les dollars américains, le symbole euro indique les euros, et le signe livre indique les livres britanniques. Ces symboles sont essentiels pour les applications internationales car les utilisateurs doivent savoir quelle devise ils consultent ou dépensent.

Différents pays formatent les montants monétaires différemment. Les Américains écrivent $1,234.56 avec le symbole avant le montant. Les Allemands écrivent 1.234,56 € avec le symbole après le montant et des séparateurs différents. Le formatage français utilise 1 234,56 € avec des espaces entre les groupes de chiffres. Lorsque vous codez en dur le formatage de devise comme "$" + amount, vous supposez que tous les utilisateurs suivent les mêmes conventions.

JavaScript fournit l'API Intl.NumberFormat pour formater les montants monétaires avec des symboles et des conventions appropriés à la locale. Cette leçon explique comment le formatage des devises varie selon la locale et comment formater correctement les prix pour n'importe quelle langue ou région.

Les symboles monétaires varient selon la locale

Différentes devises utilisent différents symboles. Le dollar américain utilise $, l'euro utilise €, la livre britannique utilise £, le yen japonais utilise ¥, et le franc suisse utilise Fr. ou CHF selon le contexte. Chaque symbole aide les utilisateurs à identifier rapidement quelle devise ils consultent.

Certains symboles représentent plusieurs devises. Le signe dollar $ est utilisé pour les dollars américains, les dollars canadiens, les dollars australiens, les pesos mexicains et plusieurs autres devises. Sans contexte supplémentaire, les utilisateurs ne peuvent pas déterminer quelle devise dollar un prix représente.

La position du symbole monétaire varie selon la locale. Les pays anglophones placent généralement le symbole avant le montant comme $100. De nombreux pays européens placent le symbole après le montant comme 100 €. Certains pays incluent un espace entre le montant et le symbole tandis que d'autres non.

Ces différences signifient que vous ne pouvez pas simplement concaténer un symbole et un nombre. Vous avez besoin d'une logique de formatage qui comprend à la fois la devise affichée et la locale de l'utilisateur qui la consulte.

Formater une devise avec Intl.NumberFormat

Le constructeur Intl.NumberFormat crée un formateur de devise lorsque vous passez style: 'currency' dans les options. Vous devez également spécifier quelle devise formater en utilisant l'option currency avec un code de devise ISO 4217.

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

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

Cela crée un formateur pour l'anglais américain qui affiche les montants en dollars américains. La méthode format() convertit le nombre en une chaîne avec le symbole dollar, les séparateurs de milliers et deux décimales.

L'option currency nécessite un code ISO 4217 à trois lettres. Les codes courants incluent USD pour les dollars américains, EUR pour les euros, GBP pour les livres britanniques, JPY pour les yens japonais et CAD pour les dollars canadiens.

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

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

const gbpFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'GBP'
});

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

console.log(eurFormatter.format(100));
// Résultat : "€100.00"

console.log(gbpFormatter.format(100));
// Résultat : "£100.00"

Chaque formateur insère automatiquement le symbole de devise approprié. Vous n'avez pas besoin de connaître le symbole correspondant à chaque code de devise.

La locale détermine la position du symbole et le formatage

Le paramètre de locale contrôle la façon dont les montants en devise sont formatés, y compris la position du symbole, le regroupement des chiffres et les séparateurs décimaux. Le même code de devise produit des résultats différents selon la locale.

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

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

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

console.log(usFormatter.format(1234.56));
// Résultat : "€1,234.56"

console.log(deFormatter.format(1234.56));
// Résultat : "1.234,56 €"

console.log(frFormatter.format(1234.56));
// Résultat : "1 234,56 €"

Les trois formateurs affichent des euros, mais chacun utilise des conventions différentes. Le formateur en anglais américain place le symbole avant le montant avec un point comme séparateur décimal. Le formateur allemand place le symbole après le montant avec un espace, utilise des points pour les séparateurs de milliers et une virgule comme séparateur décimal. Le formateur français utilise des espaces pour les séparateurs de milliers.

L'API Intl gère automatiquement ces différences en fonction de la locale que vous spécifiez. Vous n'avez pas besoin de connaître les règles de formatage pour chaque locale.

Le formatage des devises inclut les décimales

Les formateurs de devises déterminent automatiquement le nombre approprié de décimales en fonction de la devise. La plupart des devises utilisent deux décimales pour les centimes ou fractions équivalentes.

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

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

console.log(formatter.format(100.5));
// Résultat : "$100.50"

console.log(formatter.format(100.567));
// Résultat : "$100.57"

Le formateur affiche toujours deux décimales pour les dollars américains, complétant avec des zéros si nécessaire et arrondissant lorsque l'entrée a plus de précision.

Certaines devises n'ont pas de décimales. Le yen japonais n'a pas d'unité fractionnaire, donc les montants sont affichés sans décimales.

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

console.log(formatter.format(1234.56));
// Résultat : "¥1,235"

Le formateur arrondit au nombre entier le plus proche car les montants en yen n'incluent pas d'unités fractionnaires. L'API Intl connaît la précision décimale pour chaque devise et l'applique automatiquement.

Formater la devise selon la locale de l'utilisateur

Au lieu de coder en dur une locale spécifique, vous pouvez utiliser les préférences linguistiques du navigateur de l'utilisateur. La propriété navigator.language renvoie la locale préférée de l'utilisateur.

const userLocale = navigator.language;

const formatter = new Intl.NumberFormat(userLocale, {
  style: 'currency',
  currency: 'USD'
});

console.log(formatter.format(1234.56));
// Le résultat varie selon la locale de l'utilisateur
// Pour en-US : "$1,234.56"
// Pour de-DE : "1.234,56 $"
// Pour fr-FR : "1 234,56 $US"

Cette approche affiche les montants en devise selon les attentes de formatage de chaque utilisateur. Un utilisateur allemand voit le symbole après le montant avec les séparateurs allemands, tandis qu'un utilisateur américain voit le symbole avant le montant avec les séparateurs américains.

Vous pouvez également passer le tableau complet navigator.languages pour activer le comportement de repli lorsque la préférence principale de l'utilisateur n'est pas disponible.

const formatter = new Intl.NumberFormat(navigator.languages, {
  style: 'currency',
  currency: 'USD'
});

console.log(formatter.format(1234.56));

L'API utilise la première locale qu'elle prend en charge dans le tableau, offrant une gestion automatique du repli.

Réutilisation des formateurs de devises

La création d'une nouvelle instance Intl.NumberFormat implique le chargement des données de locale et le traitement des options. Lorsque vous formatez plusieurs prix avec la même locale et la même devise, créez le formateur une seule fois et réutilisez-le.

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

const prices = [19.99, 29.99, 49.99, 99.99];

prices.forEach(price => {
  console.log(formatter.format(price));
});
// Output:
// "$19.99"
// "$29.99"
// "$49.99"
// "$99.99"

Ce modèle est plus efficace que de créer un nouveau formateur pour chaque prix. La différence de performance devient significative lors du formatage de tableaux ou de listes contenant de nombreuses valeurs.

Affichage des prix dans les applications

Vous pouvez utiliser des formateurs de devises partout où vous affichez des prix aux utilisateurs. Cela inclut les listes de produits, les paniers d'achat, les pages de paiement, les factures et les tableaux de bord financiers.

const formatter = new Intl.NumberFormat(navigator.language, {
  style: 'currency',
  currency: 'USD'
});

const productPrice = 29.99;
const taxAmount = 2.40;
const totalPrice = productPrice + taxAmount;

document.getElementById('product-price').textContent = formatter.format(productPrice);
document.getElementById('tax-amount').textContent = formatter.format(taxAmount);
document.getElementById('total-price').textContent = formatter.format(totalPrice);

Les chaînes formatées fonctionnent comme n'importe quelle autre valeur de chaîne. Vous pouvez les insérer dans du contenu textuel, des attributs ou tout contexte où vous affichez des informations aux utilisateurs.

Gestion de plusieurs devises

Les applications qui prennent en charge plusieurs devises doivent créer des formateurs distincts pour chaque devise. Le code de devise détermine quel symbole apparaît, tandis que la locale détermine comment le montant est formaté.

const locale = navigator.language;

const usdFormatter = new Intl.NumberFormat(locale, {
  style: 'currency',
  currency: 'USD'
});

const eurFormatter = new Intl.NumberFormat(locale, {
  style: 'currency',
  currency: 'EUR'
});

const gbpFormatter = new Intl.NumberFormat(locale, {
  style: 'currency',
  currency: 'GBP'
});

console.log(usdFormatter.format(100));
console.log(eurFormatter.format(100));
console.log(gbpFormatter.format(100));

Chaque formateur affiche le symbole approprié et suit les conventions de locale de l'utilisateur pour cette devise. Cela garantit que les prix sont à la fois précis et lisibles, quelle que soit la combinaison de devise ou de locale utilisée.