0Pricing
Vue Academy · Lezione

Formattazione di numeri, date e valute

n() per i numeri, d() per le date, formati data e ora, numberFormats per locale.

Formattazione di numeri, date e valute è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Numeri e date variano in base al locale

Negli Stati Uniti 1,000.50 diventa 1.000,50 in gran parte dell'Europa. Anche date e valute variano. Vue I18n integra le API del browser Intl, così numeri, date e importi vengono visualizzati correttamente in base al locale.

Configurare numberFormats

Definisca formati numerici denominati per ogni locale nell'opzione numberFormats di createI18n. Ogni formato denominato è un oggetto di opzioni di Intl.NumberFormat.

const i18n = createI18n({
  locale: "en",
  numberFormats: {
    en: {
      currency: { style: "currency", currency: "USD" },
      decimal: { style: "decimal", minimumFractionDigits: 2 },
    },
  },
})

La funzione n()

Formatti un numero con n(value, formatName) da useI18n(), oppure con $n nei template. Viene utilizzato il formato denominato del locale attivo.

const { n } = useI18n()

n(1234.5, "decimal") // "1,234.50" in en

Formattazione delle valute

Lo stile currency aggiunge il simbolo e il raggruppamento corretti. Il codice della valuta nella configurazione del formato determina quale simbolo viene visualizzato.

const { n } = useI18n()

n(49.99, "currency") // "$49.99" in en

Visualizzazione delle valute in base al locale

Aggiunga lo stesso formato denominato per ogni locale, con impostazioni appropriate al locale. Cambiando locale, il raggruppamento, i separatori decimali e la posizione del simbolo cambiano automaticamente.

numberFormats: {
  en: { currency: { style: "currency", currency: "USD" } },
  tr: { currency: { style: "currency", currency: "TRY" } },
}
// n(49.99, "currency") => "$49.99" (en) or "TRY 49,99" style (tr)

Percentuali

Lo stile percent moltiplica il valore per 100 e aggiunge il simbolo di percentuale secondo il locale.

numberFormats: {
  en: { percent: { style: "percent", maximumFractionDigits: 1 } },
}

n(0.256, "percent") // "25.6%"

Configurare datetimeFormats

La formattazione delle date segue gli stessi principi dei numeri. Definisca i formati denominati in datetimeFormats; ciascuno è un oggetto di opzioni di Intl.DateTimeFormat.

const i18n = createI18n({
  locale: "en",
  datetimeFormats: {
    en: {
      short: { year: "numeric", month: "short", day: "numeric" },
      long: { dateStyle: "full", timeStyle: "short" },
    },
  },
})

La funzione d()

Formatti una Date con d(value, formatName) (oppure con $d nei template). Passi un oggetto Date o un timestamp.

const { d } = useI18n()

d(new Date("2026-05-29"), "short") // "May 29, 2026" in en

Date in base al locale

Come per i numeri, fornisca il formato della data denominato per ogni locale. La stessa chiamata restituisce un ordine e i nomi dei mesi localizzati quando cambia il locale.

datetimeFormats: {
  en: { short: { year: "numeric", month: "short", day: "numeric" } },
  tr: { short: { year: "numeric", month: "short", day: "numeric" } },
}
// d(date, "short") => "May 29, 2026" (en) / "29 May 2026" (tr)

Usare gli helper di formattazione nei template

Nei template utilizzi $n e $d con un valore e il formato denominato.

<template>
  <p>Total: {{ $n(total, "currency") }}</p>
  <p>Updated: {{ $d(updatedAt, "short") }}</p>
</template>

Opzioni inline per un uso singolo

Oltre ai formati denominati, può passare un oggetto di opzioni inline come secondo argomento per una formattazione una tantum, senza definirlo nella configurazione.

const { n, d } = useI18n()

n(0.5, { style: "percent" })           // "50%"
d(new Date(), { weekday: "long" })     // "Friday"

Verifica rapida

Verifichi la Sua comprensione della formattazione basata sulla locale.

Riepilogo

Ha imparato a usare la formattazione basata sulla locale:

  • Configuri i formati denominati in numberFormats e datetimeFormats per ogni locale.
  • n(value, name) / $n formatta i numeri con stili decimale, valuta e percentuale.
  • d(value, name) / $d formatta le date.
  • Cambiando locale, raggruppamento delle cifre, separatori decimali, simboli e ordine della data cambiano automaticamente.
  • Può anche passare un oggetto di opzioni inline per una formattazione una tantum.

Domande Frequenti

La lezione «Formattazione di numeri, date e valute» è gratuita?

Sì — il testo completo di «Formattazione di numeri, date 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 Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Formattazione di numeri, date e valute»?

n() per i numeri, d() per le date, formati data e ora, numberFormats per locale. Eserciti Vue 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 Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue 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 4 di 4.

Quanto tempo richiede la lezione «Formattazione di numeri, date 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 Vue Academy?

Sì. Ogni lezione Vue 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

  1. Configurazione di vue-i18n e file dei messaggi
  2. Composable useI18n e funzione t()
  3. Pluralizzazione e messaggi collegati
  4. Formattazione di numeri, date e valute
← Torna a Vue Academy