JavaScript Academy · Lezione

Formattare numeri e valute

Usi Intl.NumberFormat per numeri adattati alla lingua.

Formattare numeri e valute è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Il namespace Intl

Intl è l'API integrata di JavaScript per l'internazionalizzazione. Formatta numeri, date, valute e molto altro secondo le convenzioni locali, senza bisogno di librerie.

console.log(typeof Intl); // "object"
console.log(typeof Intl.NumberFormat); // "function"

Nozioni di base su Intl.NumberFormat

Crei un formatter con una locale, quindi chiami format(). Le locale usano tag BCP 47 come "en-US" o "de-DE".

const nf = new Intl.NumberFormat("en-US");
console.log(nf.format(1234567.89)); // "1,234,567.89"

Differenze tra locale

Lo stesso numero viene visualizzato in modo diverso a seconda della locale. Il tedesco usa i punti per le migliaia e la virgola per i decimali.

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,89

Formattazione delle valute

Passi style: "currency" e un codice currency. Il simbolo e la sua posizione seguono la locale.

const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
console.log(usd.format(2999.5)); // "$2,999.50"

La valuta nelle diverse locale

La valuta rimane la stessa, ma la sua rappresentazione si adatta alla locale scelta.

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 €

Stile percentuale

style: "percent" moltiplica il valore per 100 e aggiunge il simbolo di percentuale della locale.

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%"

Controllare le cifre decimali

minimumFractionDigits e maximumFractionDigits controllano il numero di cifre decimali.

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à

style: "unit" con una unit formatta misure come chilometri o litri.

const speed = new Intl.NumberFormat("en-US", { style: "unit", unit: "kilometer-per-hour" });
console.log(speed.format(120)); // "120 km/h"

Notazione compatta

notation: "compact" abbrevia i numeri grandi (1.2K, 3.4M), una soluzione ottima per i conteggi sui social.

const c = new Intl.NumberFormat("en-US", { notation: "compact" });
console.log(c.format(1500));    // "1.5K"
console.log(c.format(2300000)); // "2.3M"

Visualizzazione del segno

signDisplay: "always" mostra il segno anche per i valori positivi, utile per differenze e variazioni.

const s = new Intl.NumberFormat("en-US", { signDisplay: "always" });
console.log(s.format(5));  // "+5"
console.log(s.format(-5)); // "-5"

Riutilizzare i formatter

Creare un formatter è relativamente costoso. Lo crei una sola volta e lo riutilizzi per molti valori, invece di crearne uno a ogni chiamata.

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)));

Verifica rapida

Verifichi la formattazione dei numeri.

Riepilogo: numeri e valute

Ha formattato i numeri in base alla locale, gestito valute, percentuali, unità, notazione compatta e visualizzazione del segno, controllato le cifre decimali e imparato a riutilizzare i formatter. Prossimo argomento: date e orari.

Domande Frequenti

La lezione «Formattare numeri e valute» è gratuita?

Sì — il testo completo di «Formattare numeri e valute» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Formattare numeri e valute»?

Usi Intl.NumberFormat per numeri adattati alla lingua. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Formattare numeri e valute»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy