Angular Academy · Lezione

Plurali e select (ICU)

Gestire plurali e testi con distinzione di genere

Plurali e select (ICU) è una lezione Angular 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 Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Perché i semplici segnaposto non bastano

"You have 1 messages" è un inglese errato. Le lingue hanno regole diverse per il plurale, alcune con diverse forme plurali, oltre a formulazioni basate sul genere o sulle categorie. Angular gestisce questo aspetto con il formato dei messaggi ICU: espressioni plural e select.

L'espressione plural

Un plural ICU sceglie la formulazione in base a un numero. Si elencano i casi per categoria grammaticale e si fornisce il testo corrispondente.

<p i18n>{count, plural,
  =0 {No messages}
  =1 {One message}
  other {{{count}} messages}
}</p>

Categorie del plurale

Le categorie includono le corrispondenze esatte (=0, =1) e le parole chiave CLDR: zero, one, two, few, many e la categoria obbligatoria other. Le diverse lingue utilizzano automaticamente sottoinsiemi differenti.

Il segnaposto hash

All'interno di un caso plural, # è una forma abbreviata per indicare il numero analizzato, evitando di ripetere il binding.

<p i18n>{count, plural,
  =1 {You have one item}
  other {You have # items}
}</p>

L'espressione select

select sceglie il testo in base a un valore stringa, una soluzione ideale per categorie come genere, stato o tipo.

<p i18n>{gender, select,
  male {He replied}
  female {She replied}
  other {They replied}
}</p>

other è obbligatorio

Sia plural sia select richiedono un ramo other. Questo è il fallback utilizzato quando nessun caso specifico corrisponde; se manca, Angular genera un errore.

Combinazione con il testo circostante

Le espressioni ICU possono essere inserite all'interno del normale testo tradotto. Mantenga l'intera frase in un unico blocco i18n, così i traduttori possono controllare l'ordine delle parole.

<p i18n>Hi {{ name }}, {count, plural,
  =0 {you have no notifications}
  other {you have # notifications}
}.</p>

Annidamento di select in plural

Le espressioni ICU possono essere annidate, consentendo di esprimere insieme quantità e categoria quando la grammatica lo richiede.

{count, plural,
  =0 {No guests}
  other {# {type, select, vip {VIP} other {regular}} guests}
}

I traduttori adattano le categorie

Durante la traduzione, una lingua può aggiungere le forme plurali richieste dalla propria grammatica, ad esempio il russo usa one, few e many. Il target XLIFF di un'unità ICU contiene i rami localizzati.

ICU in TypeScript con $localize

La sintassi ICU funziona anche all'interno delle stringhe contrassegnate con $localize, quindi anche la logica del plurale nel codice dei componenti rimane traducibile.

const label = $localize('{count, plural, =1 {1 file} other {{{count}} files}}');

Perché ICU è migliore di if/else manuali

La logica hardcoded count === 1 ? 'message' : 'messages' presuppone plurali binari in stile inglese. ICU delega la regola ai dati CLDR di ciascuna lingua, così le lingue con tre o sei forme plurali vengono visualizzate correttamente senza modifiche al codice.

Verifica rapida

Quale ramo ICU è sempre obbligatorio?

Riepilogo

ICU plural sceglie il testo in base al numero usando categorie come =0, one e other, con # per il conteggio, mentre select sceglie in base a un valore stringa. Entrambi richiedono un ramo other, possono essere annidati liberamente, funzionano in $localize e consentono a ogni lingua di applicare le proprie regole del plurale.

Domande Frequenti

La lezione «Plurali e select (ICU)» è gratuita?

Sì — il testo completo di «Plurali e select (ICU)» è 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 Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Plurali e select (ICU)»?

Gestire plurali e testi con distinzione di genere Eserciti Angular 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 Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular 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 «Plurali e select (ICU)»?

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 Angular Academy?

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