0Pricing
React Academy · Lezione

Pluralizzazione e interpolazione

Gestisca le forme plurali basate sul conteggio e inserisca valori dinamici nelle stringhe tradotte.

Pluralizzazione e interpolazione è una lezione React 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 React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuto

In questa lezione gestirà le forme plurali basate sul conteggio e inserirà valori dinamici nelle stringhe tradotte usando l’interpolazione e il supporto ai plurali di i18next.

Nozioni di base sull’interpolazione

Utilizzi le doppie parentesi graffe nelle stringhe di traduzione come segnaposto. Passi un oggetto con i valori delle variabili come secondo argomento a t().
// JSON: "greeting": "Hello, {{name}}!"
t('greeting', { name: 'Alice' }); // Hello, Alice!

Più variabili di interpolazione

Può usare tutte le variabili di interpolazione necessarie in un’unica stringa.
// JSON: "summary": "You have {{count}} messages in {{folder}}"
t('summary', { count: 5, folder: 'Inbox' });
// You have 5 messages in Inbox

Escaping dell’HTML

Per impostazione predefinita, i18next esegue l’escaping dei caratteri HTML nei valori interpolati. Per visualizzare HTML all’interno di un valore interpolato, imposti `escapeValue: false` nella configurazione di init; in React è già sicuro, perché React esegue l’escaping del JSX.

Forme plurali

i18next supporta automaticamente le forme plurali. Definisca `key` per il singolare e `key_other` (o `key_plural`) per il plurale. Passi `count` nell’oggetto di interpolazione.
// JSON:
// "item": "{{count}} item"
// "item_other": "{{count}} items"

t('item', { count: 1 }); // 1 item
t('item', { count: 5 }); // 5 items

Regole dei plurali specifiche per lingua

Lingue diverse seguono regole diverse per i plurali. Il russo ha 4 forme plurali, mentre l’arabo ne ha 6. i18next utilizza automaticamente le regole Unicode CLDR per ogni lingua. Definisca tutte le forme richieste nel file di traduzione.
// Russian (ru):
// key_one, key_few, key_many, key_other

Forma zero

i18next supporta anche una forma speciale `key_zero` quando count è 0, consentendo di usare una formulazione diversa, ad esempio «Nessun elemento» invece di «0 elementi».
// JSON:
// "messages_zero": "No messages"
// "messages_one": "{{count}} message"
// "messages_other": "{{count}} messages"

t('messages', { count: 0 }); // No messages

Chiavi annidate con plurali

Può avere chiavi plurali all’interno di oggetti annidati. Vi acceda con la notazione a punti, proprio come per le normali chiavi annidate.
// JSON: { "cart": { "items_one": "item", "items_other": "items" } }
t('cart.items', { count: 3 }); // items

Formattazione di date e numeri

i18next si integra con l’API Intl per formattare date e numeri in base alla locale. Utilizzi i18n.format() o il plugin intlify per formattare le date all’interno delle traduzioni.
t('lastSeen', { date: new Date(), formatParams: {
  date: { month: 'long', day: 'numeric' }
}});

Traduzioni basate sul contesto

Utilizzi l’opzione `context` per gestire forme grammaticalmente diverse in contesti differenti, ad esempio parole con genere. Definisca le varianti `key_male` e `key_female` nel file di traduzione.
// JSON: { "hero_male": "Hero", "hero_female": "Heroine" }
t('hero', { context: 'female' }); // Heroine

Verifica rapida

Come si passa a una stringa di traduzione i18next un valore dinamico denominato 'username'?

Riepilogo

Utilizzi {{variable}} per l’interpolazione, key_other/key_one per i plurali e key_zero per le forme con valore zero. i18next applica automaticamente le regole dei plurali Unicode CLDR per ogni lingua. Utilizzi context per le varianti grammaticali.

Prossimo

Prossima lezione: **Selettore della lingua e lazy loading delle traduzioni** — creerà un selettore della locale e caricherà i bundle delle traduzioni su richiesta.

Domande Frequenti

La lezione «Pluralizzazione e interpolazione» è gratuita?

Sì — il testo completo di «Pluralizzazione e interpolazione» è 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 React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Pluralizzazione e interpolazione»?

Gestisca le forme plurali basate sul conteggio e inserisca valori dinamici nelle stringhe tradotte. Eserciti React 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 React Academy?

Non è richiesta alcuna esperienza precedente. React 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 interpolazione»?

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

Sì. Ogni lezione React 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 react-i18next
  2. Utilizzo dell'hook useTranslation
  3. Pluralizzazione e interpolazione
  4. Selettore della lingua e lazy loading delle traduzioni
← Torna a React Academy