Formater les nombres et les devises
Utilisez Intl.NumberFormat pour des nombres adaptés aux paramètres régionaux.
Formater les nombres et les devises est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.
L’espace de noms Intl
Intl est l’API JavaScript intégrée d’internationalisation. Elle formate les nombres, les dates, les devises et bien plus encore selon les conventions des paramètres régionaux, sans bibliothèque supplémentaire.
console.log(typeof Intl); // "object"
console.log(typeof Intl.NumberFormat); // "function"Bases de Intl.NumberFormat
Créez un formateur avec des paramètres régionaux, puis appelez format(). Les paramètres régionaux utilisent des balises BCP 47 comme "en-US" ou "de-DE".
const nf = new Intl.NumberFormat("en-US");
console.log(nf.format(1234567.89)); // "1,234,567.89"Différences entre paramètres régionaux
Un même nombre s’affiche différemment selon les paramètres régionaux. En allemand, les points séparent les milliers et la virgule indique les décimales.
const n = 1234567.89;
console.log(new Intl.NumberFormat("en-US").format(n)); // 1,234,567.89
console.log(new Intl.NumberFormat("de-DE").format(n)); // 1.234.567,89Formatage des devises
Passez style: "currency" ainsi qu’un code currency. Le symbole et sa position suivent les paramètres régionaux.
const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
console.log(usd.format(2999.5)); // "$2,999.50"Une devise selon les paramètres régionaux
La devise reste la même, mais sa présentation s’adapte aux paramètres régionaux choisis.
const opts = { style: "currency", currency: "EUR" };
console.log(new Intl.NumberFormat("en-IE", opts).format(1000)); // €1,000.00
console.log(new Intl.NumberFormat("de-DE", opts).format(1000)); // 1.000,00 €Style pourcentage
style: "percent" multiplie la valeur par 100 et ajoute le signe de pourcentage des paramètres régionaux.
const pct = new Intl.NumberFormat("en-US", { style: "percent" });
console.log(pct.format(0.1875)); // "19%"
console.log(new Intl.NumberFormat("en-US", { style: "percent", maximumFractionDigits: 2 }).format(0.1875)); // "18.75%"Contrôler les chiffres décimaux
minimumFractionDigits et maximumFractionDigits contrôlent le nombre de décimales.
const f = new Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
console.log(f.format(3)); // "3.00"
console.log(f.format(3.14159)); // "3.14"Unités
style: "unit" associé à une unit permet de formater des mesures comme des kilomètres ou des litres.
const speed = new Intl.NumberFormat("en-US", { style: "unit", unit: "kilometer-per-hour" });
console.log(speed.format(120)); // "120 km/h"Notation compacte
notation: "compact" abrège les grands nombres (1.2K, 3.4M), ce qui est idéal pour les compteurs des réseaux sociaux.
const c = new Intl.NumberFormat("en-US", { notation: "compact" });
console.log(c.format(1500)); // "1.5K"
console.log(c.format(2300000)); // "2.3M"Affichage du signe
signDisplay: "always" affiche un signe même pour les nombres positifs, ce qui est pratique pour les écarts et les variations.
const s = new Intl.NumberFormat("en-US", { signDisplay: "always" });
console.log(s.format(5)); // "+5"
console.log(s.format(-5)); // "-5"Réutiliser les formateurs
La création d’un formateur est relativement coûteuse. Créez-le une seule fois et réutilisez-le pour plusieurs valeurs plutôt que d’en construire un à chaque appel.
const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
const prices = [9.99, 19.5, 100];
console.log(prices.map((p) => money.format(p)));Vérification rapide
Testez le formatage des nombres.
Récapitulatif : nombres et devises
Vous avez formaté des nombres selon les paramètres régionaux, géré les devises, les pourcentages, les unités, la notation compacte et l’affichage du signe, contrôlé le nombre de décimales et appris à réutiliser les formateurs. Ensuite : les dates et les heures.
Apprends JavaScript avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 59
- Leçons
- 200
Questions Fréquemment Posées
La leçon « Formater les nombres et les devises » est-elle gratuite ?
Oui — le texte complet de « Formater les nombres et les devises » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Formater les nombres et les devises » ?
Utilisez Intl.NumberFormat pour des nombres adaptés aux paramètres régionaux. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer JavaScript Academy ?
Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Formater les nombres et les devises » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?
Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Formater les nombres et les devises
- Formater les dates et les heures
- Temps relatif et pluriels
- Tri adapté aux paramètres régionaux