Formatage des nombres en devise en JavaScript : 3 meilleures méthodes

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

L'argent aime l'ordre : comment transformer un nombre en un joli prix en JavaScript ?

Imaginez : vous développez une boutique en ligne. Le serveur renvoie le prix d'un article — un simple nombre 1999.5. Afficher ce nombre « brut » à l'utilisateur est de mauvais goût. Le client veut voir "$1,999.50" ou, si vous êtes en Russie, "1 999,50 ₽".

Cette question hante des milliers de développeurs sur Stack Overflow. Aujourd'hui, nous allons enfin comprendre comment formater correctement les nombres en chaînes monétaires en JavaScript. Vous découvrirez les méthodes intégrées, leurs particularités et quand utiliser quelle méthode.

Pourquoi simplement `.toFixed(2)` est une mauvaise idée ?

Beaucoup de débutants font ceci :

const price = 1999.5;console.log('$' + price.toFixed(2)); // "$1999.50"

Cela semble fonctionner. Mais c'est une bombe à retardement. Pourquoi ?

Pas de séparateurs de milliers. $1999.50 se lit moins bien que $1,999.50.
Pas de localisation. En Europe, la virgule est le séparateur décimal, le point est le séparateur de milliers. Votre code plantera.
Le symbole monétaire est codé en dur. Changer $ en € signifie modifier le code.

Heureusement, le JavaScript moderne nous offre des outils élégants. Étudions-les.

Méthode n°1 : `Intl.NumberFormat` — le roi du formatage (recommandé)

Cet objet fait partie de l'API Internationalization. Il est spécialement conçu pour travailler avec les locales, les devises et les nombres. C'est la méthode la plus correcte et la plus flexible.

Exemple de base

const formatter = new Intl.NumberFormat('ru-RU', {    style: 'currency',    currency: 'RUB'});

console.log(formatter.format(1999.5)); // "1 999,50 ₽"

Voilà ! JavaScript a lui-même placé les espaces, les virgules et ajouté le symbole du rouble. Magique, non ?

Comment ça fonctionne ?

Le constructeur prend deux arguments :

locales — une chaîne avec le code de la locale (par exemple, 'en-US', 'de-DE', 'ru-RU').
options — un objet de configuration. Essentiel : style: 'currency' et currency: 'USD'.

Configuration pour n'importe quelle devise

Vous voulez des dollars pour les États-Unis ?

const usFormatter = new Intl.NumberFormat('en-US', {    style: 'currency',    currency: 'USD'});console.log(usFormatter.format(2500)); // "$2,500.00"

Des euros pour l'Allemagne ?

const deFormatter = new Intl.NumberFormat('de-DE', {    style: 'currency',    currency: 'EUR'});console.log(deFormatter.format(2500)); // "2.500,00 €"

Remarquez : en Allemagne, le point est le séparateur de milliers et la virgule est le signe décimal. Intl fait tout pour vous.

Options supplémentaires

Vous voulez supprimer la partie fractionnaire (pas de centimes) ?

const formatter = new Intl.NumberFormat('en-US', {    style: 'currency',    currency: 'USD',    minimumFractionDigits: 0,    maximumFractionDigits: 0});console.log(formatter.format(1999.5)); // "$2,000" (arrondi)

Besoin d'afficher toujours 4 décimales ? Pas de problème :

const preciseFormatter = new Intl.NumberFormat('en-US', {    style: 'currency',    currency: 'USD',    minimumFractionDigits: 4});console.log(preciseFormatter.format(1.2)); // "$1.2000"

Avantages : natif, rapide, prend en charge toutes les devises du monde, change facilement de locale.

Inconvénients : ne fonctionne pas dans les très vieux navigateurs (IE 10 et inférieur — mais c'est de l'histoire ancienne).