0Pricing
Vue Academy · Lezione

Pluralizzazione e messaggi collegati

Regole di pluralizzazione con sintassi @:key|@:key, plurale basato sul conteggio, messaggi collegati con @:path.

Pluralizzazione e messaggi collegati è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Il conteggio dipende dalla lingua

"1 elemento" ma "5 elementi": in altre lingue esistono ancora più forme. Gestire i plurali direttamente nel codice porta a stringhe poco naturali come "5 elemento(i)". Vue I18n include la pluralizzazione per scegliere la forma corretta in base a un conteggio.

Forme plurali separate da pipe

Scriva le forme in un'unica stringa di messaggio, separate dal carattere pipe (|). In inglese sono comuni due o tre forme.

const en = {
  items: "no items | one item | {count} items",
}

Selezionare un plurale con un conteggio

Passi un numero come secondo argomento a t. Vue I18n sceglie la forma corrispondente in base al conteggio.

const { t } = useI18n()

t("items", 0) // "no items"
t("items", 1) // "one item"
t("items", 9) // "9 items"

La regola predefinita per i plurali

Con tre forme, la regola è: 0 usa la prima, 1 usa la seconda e qualsiasi altro valore usa la terza. Con due forme, 0 e i valori maggiori vengono raggruppati insieme.

const en = {
  // two-form version: 0 and N share the plural
  files: "no file | one file | {count} files",
}

Il segnaposto {count}

All'interno di un messaggio con plurale, il segnaposto speciale {count} (o {n}) viene riempito con il numero passato, così è possibile visualizzarlo.

const en = { photos: "no photos | {count} photo | {count} photos" }

t("photos", 3) // "3 photos"

Plurali nei template

Nei template utilizzi $t con il conteggio come secondo argomento, proprio come nello script.

<template>
  <p>{{ $t("items", cartCount) }}</p>
</template>

Combinare conteggio e valori denominati

È possibile passare sia un conteggio sia dei segnaposto denominati, fornendo il conteggio insieme a un oggetto di valori.

const en = { greeting: "Hi {name}, no messages | Hi {name}, {count} messages" }

t("greeting", 2, { named: { name: "Ada" } })
// or per API: t("greeting", { name: "Ada" }, 2)

Che cosa sono i messaggi collegati?

A volte una traduzione deve incorporarne un'altra per evitare duplicazioni. I messaggi collegati fanno riferimento a un'altra chiave con la sintassi @:.

const en = {
  brand: "Acme",
  welcome: "Welcome to @:brand",
}

Risoluzione di un collegamento

Quando traduce welcome, il token @:brand viene sostituito dal valore tradotto di brand. Modifichi brand una sola volta e ogni messaggio collegato si aggiornerà.

t("welcome") // "Welcome to Acme"
// change brand -> all linked messages reflect it

Collegare chiavi annidate

I collegamenti funzionano anche con chiavi annidate separate da punti. Quando necessario, racchiuda tra parentesi i riferimenti composti da più parole.

const en = {
  app: { name: "MyApp" },
  footer: "Thanks for using @:(app.name)",
}

Modificatori sui collegamenti

I messaggi collegati supportano modificatori come @.upper per trasformare il valore collegato (maiuscolo, minuscolo, iniziale maiuscola).

const en = {
  brand: "acme",
  banner: "@.upper:brand sale!", // "ACME sale!"
}

Verifica rapida

Verifichi la sua comprensione dei plurali e dei collegamenti.

Riepilogo

Ha imparato a gestire i plurali e a riutilizzare i messaggi:

  • Separi le forme plurali con |: "no items | one item | {count} items".
  • Passi un conteggio a t(key, count) per scegliere la forma corretta.
  • Il segnaposto {count} mostra il numero.
  • I messaggi collegati riutilizzano un'altra chiave tramite @:otherKey (e @:(nested.key) per le chiavi annidate).
  • I modificatori come @.upper trasformano il valore collegato.

Domande Frequenti

La lezione «Pluralizzazione e messaggi collegati» è gratuita?

Sì — il testo completo di «Pluralizzazione e messaggi collegati» è 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 «Pluralizzazione e messaggi collegati»?

Regole di pluralizzazione con sintassi @:key|@:key, plurale basato sul conteggio, messaggi collegati con @:path. 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 3 di 4.

Quanto tempo richiede la lezione «Pluralizzazione e messaggi collegati»?

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