# General Translation Knowledge Base: Come si gestiscono i plurali in React? URL: https://generaltranslation.com/it/kb/how-to-handle-plurals-in-react.mdx Docs index: https://generaltranslation.com/llms.txt Description: Non inserire la logica del plurale direttamente nel codice con controlli come n === 1. Per le app solo in inglese basta un semplice helper, ma le app multilingue richiedono regole del plurale locale-aware, che un componente i18n come `` di gt-react o gt-next gestisce per ogni lingua. Category: Formattazione per impostazione regionale Last updated: 2025-02-17 Authors: Archie McKenzie Published: 2025-02-17 ## Video The video is narrated in English, with English captions. [How do I handle plurals in React?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-how-to-handle-plurals-in-react.mp4) (48 s) General Translation handles plurals in React with the `Plural` component. Run `npx gt init` and sign in, give `Plural` the count and an English sentence for each form, wrap it in a `T` component with the count in `Num`, then run `npx gt translate` to write the forms each language needs. ## Perché la pluralizzazione è importante in React Capita spesso di imbattersi in app che mostrano messaggi goffi come: ```text Hai 1 nuovo/i messaggio/i ``` Questo è un segnale inequivocabile di uno sviluppatore che non ha riflettuto a fondo sull'esperienza utente. Le app React devono spesso gestire la pluralizzazione: per il numero di notifiche, la lunghezza degli elenchi o i risultati di ricerca. **E gestire correttamente la pluralizzazione non è poi così difficile, soprattutto se la tua app deve funzionare solo in inglese.** Esistono però molte cattive pratiche in cui cadono gli sviluppatori alle prime armi, in particolare quando realizzano interfacce multilingue. Questa guida spiega come gestire in modo pulito i plurali in inglese, formattare i numeri in base alle diverse impostazioni regionali e realizzare un sistema di plurali completamente multilingue in React e Next.js. ### Il problema dei plurali hard-coded Molti progetti, compresi alcuni sorprendentemente grandi e importanti, implementano la logica del plurale direttamente nel codice. ```jsx export default function Example({ n }) { return (

Displaying {n} item{n === 1 ? '' : 's'}

) } ``` Ma la pluralizzazione è spesso più complessa che aggiungere semplicemente una "s" alla fine di una parola. Alcuni sostantivi hanno forme plurali irregolari, come "child" e "children". A volte anche altre parti della frase devono cambiare per accordarsi con il sostantivo, come "is" e "are" a seconda della quantità. La tabella seguente illustra alcuni scenari comuni: | Scenario | Esempi | Note | | ------------------------ | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | Numero di spettatori | "1 person is watching"
"2 people are watching" | Richiede un sostantivo irregolare ("person" → "people") e la modifica del verbo. | | Eliminazione di elementi | "Delete this message?"
"Delete these 2 messages?" | Cambia il dimostrativo ("this" vs. "these") e il sostantivo va al plurale. | | Risultati di ricerca | "No results"
"1 result found"
"2 results found" | Formulazioni diverse per zero, uno o più risultati. | Le espressioni condizionali diventano presto ingestibili. E la situazione si trasforma in un incubo quando devi distribuire la tua app in altre lingue. Ciò che funziona in inglese spesso non funziona affatto in lingue come il polacco o l'arabo, che gestiscono le quantità con regole completamente diverse. **Le aziende con cui lavoriamo spesso rimandano l'internazionalizzazione per la fatica di dover rifattorizzare UI hardcoded come questa.** *** ## Come gestire i plurali in inglese In inglese, usare i plurali corretti nella tua app è di solito semplice. Per la pluralizzazione dei sostantivi nei casi più semplici, scrivi una funzione di utilità: ```jsx export function pluralize( count: number, singular: string, plural: string = singular + 's' ) { return `${count === 1 ? singular : plural}`; } ``` Ora esiste un'unica funzione per gestire tutta la logica del plurale, e funziona anche con i plurali irregolari: ```js pluralize(2, 'user') // "users" pluralize(2, 'person', 'people') // "people" pluralize(2, 'child', 'children') // "children" ``` Ma se ti serve una logica più complessa, ad esempio: ```text "No one is watching" "1 person is watching" "2 people are watching" ``` A questo punto, conviene valutare seriamente l'adozione di una libreria di internazionalizzazione ("i18n") che richieda poca manutenzione. Anche se gli sviluppatori tendono a pensare che le librerie i18n servano solo per le interfacce multilingue, possono rivelarsi molto utili per la formattazione di plurali e variabili anche nelle applicazioni monolingue. Dietro le quinte, la maggior parte delle librerie i18n usa l'API nativa di JavaScript `Intl.PluralRules` per determinare la forma plurale corretta in qualsiasi lingua. Esistono numerose librerie i18n per React, tra cui la nostra, [`gt-react`](/docs/react/overview) (oppure [`gt-next`](/docs/react/nextjs-quickstart) se usi Next.js). Visualizzare un plurale in inglese con gt-react è semplice: ```jsx import { Plural } from 'gt-react' function Example({ count }) { return ( {count} people are watching ) } ``` La UI viene renderizzata in modo condizionale in base al valore di `n`. La maggior parte delle librerie utilizza l'API [`Intl.PluralRules`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules) di JavaScript per stabilire quale forma plurale mostrare. Ciò significa che in inglese si usa il nome `"one"` per indicare il singolare e `"other"` per indicare il plurale. Il nostro componente [``](/docs/react/reference/components/plural) verifica prima la categoria plurale esatta, poi le props generiche `plural` e `other`. Ricorre al proprio contenuto figlio solo se nessuna di queste props è disponibile. Anche nelle applicazioni solo in inglese, usare una libreria in questo caso è una best practice e semplifica notevolmente la futura internazionalizzazione. *** ## Pluralizzazione nelle app React multilingue (i18n) Se la tua app si rivolge solo a utenti di lingua inglese, l'approccio descritto sopra potrebbe bastarti, ma prima o poi la maggior parte delle app in produzione deve supportare più lingue. Ed è qui che le cose si fanno interessanti. * In arabo, i sostantivi cambiano forma a seconda che la quantità sia zero, uno, due o molti * Con impostazioni regionali come `de-DE`, `es-ES` e `it-IT`, i numeri grandi usano i punti al posto delle virgole, quindi 1,000,000 diventa 1.000.000 * In hindi, le cifre sono raggruppate a coppie, quindi 1,000,000 diventerebbe 10,00,000 **Per un'app internazionalizzata, è consigliabile usare una libreria i18n dedicata**, che avrà la propria documentazione su come gestire i plurali e la formattazione dei numeri. ### Formattare i numeri per diverse impostazioni regionali Puoi usare l'oggetto `Intl` per [formattare i numeri](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) in base a qualsiasi impostazione regionale. Il modo più semplice è usare il metodo integrato `toLocaleString()`. Per impostazione predefinita, viene usata l'impostazione regionale corrente del runtime: ```javascript const n = 1000000 n.toLocaleString() // mostra 1,000,000 quando l'impostazione regionale del runtime è "en-US" (inglese americano) n.toLocaleString('de') // 1.000.000 perché come impostazione regionale è stata specificata "de" (tedesco) ``` gt-react offre anche un componente [``](/docs/react/reference/components/num) che, dietro le quinte, si basa su `Intl.NumberFormat`. ```jsx import { Num } from 'gt-react' // mostra 1,000,000 quando la lingua è "en-US" // mostra 1.000.000 quando la lingua è "de" // mostra 10,00,000 quando la lingua è "hi" export default function Example() { return 1000000 } ``` ### Comprendere le forme plurali nelle diverse lingue Le sei forme plurali supportate dall'API `Intl.PluralRules` di JavaScript sono: `zero`, `one`, `two`, `few`, `many`, `other`. Mentre l'inglese usa solo `one` ("singolare") e `other` ("plurale"), lingue come l'arabo e il polacco prevedono più forme. Ad esempio, un utente anglofono potrebbe aspettarsi: ```text "No one is watching" "1 person is watching" "2 people are watching" ``` Un utente arabofono, invece, potrebbe aspettarsi espressioni diverse per il singolare, il duale (quando si contano esattamente due elementi) e per le forme plurali relative a quantità piccole e grandi: ```text "لا أحد يشاهد" "1 شخص يشاهد" "2 شخصان يشاهدان" "3 أشخاص يشاهدون" "11 شخصاً يشاهدون" ``` È qui che una libreria di internazionalizzazione diventa essenziale. Ogni lingua ha la propria logica per stabilire quando e come mostrare i plurali, quindi è meglio affidarsi a una libreria dedicata per gestirli correttamente. Una buona libreria i18n si occupa di due cose: 1. Decidere quale forma plurale (`one`, `many`, `other`, ecc.) usare in base all'impostazione regionale 2. Individuare la traduzione nella lingua corretta corrispondente a quella forma **Se usi già una libreria di internazionalizzazione, consulta la sua documentazione per informazioni sulla formattazione dei plurali.** Quasi tutte le librerie offrono una documentazione dedicata al rendering dei plurali. ### Esempio completo: plurali in un'app React multilingue Se non usi ancora una libreria di internazionalizzazione, prova [`gt-react`](/docs/react/react-quickstart)! Il componente [``](/docs/react/reference/components/plural) di gt-react: * Offre un modo semplice e dichiarativo per renderizzare correttamente i plurali in React * Funziona nativamente con il componente di formattazione [``](/docs/react/reference/components/num) * Funziona nativamente con il componente di traduzione [``](/docs/react/reference/components/t), che si integra con il nostro [servizio di traduzione](https://generaltranslation.com) per generare automaticamente le forme plurali Mettendo insieme tutti i tasselli, ecco un componente multilingue completo: ```jsx import { T, Plural, Num } from 'gt-react' // Funziona subito, senza configurazione, in oltre 100 lingue function Example({ count }) { return ( {count} person is watching } > {count} people are watching ) } ``` *** Configura la pluralizzazione con l'[Avvio rapido di `gt-react`](/docs/react/react-quickstart) per le app React o con l'[Avvio rapido di `gt-next`](/docs/react/nextjs-quickstart) per le app Next.js. Consulta il [Riferimento API di ``](/docs/react/reference/components/plural) per l'API completa del componente. La pluralizzazione è una delle sfide di i18n più comuni in React: impostarla correttamente fin dall'inizio ti risparmia parecchio refactoring in seguito. ## Related questions - [Come si traduce il testo condizionale in JSX?](https://generaltranslation.com/it/kb/translate-conditional-jsx.mdx): Anziché tradurre separatamente i due rami di un operatore ternario, racchiudi l'intera frase in un componente `` ed esprimi la condizione con ``, così il traduttore vede il contesto completo e può riordinare la frase in base alla lingua. - [Posso fare i18n senza file di traduzione?](https://generaltranslation.com/it/kb/i18n-without-translation-files.mdx): Sì. Con gt-react o gt-next, i contenuti restano inline nei tuoi componenti, all'interno di un componente ``, e le traduzioni vengono generate come output in fase di compilazione. Non ci sono quindi chiavi né file JSON per ogni impostazione regionale da scrivere e mantenere sincronizzati. - [Qual è la migliore libreria i18n per un'app React?](https://generaltranslation.com/it/kb/best-react-i18n-library.mdx): Le quattro principali librerie i18n per React sono gt-react di General Translation, react-i18next, Lingui e React Intl. Tutte e quattro renderizzano e formattano le traduzioni, ma solo gt-react è anche in grado di generarle, a partire dai testi scritti inline nel tuo JSX. Scegli react-i18next per continuare a usare i cataloghi e i plugin di i18next, Lingui per l'estrazione in cataloghi compilati e React Intl per FormatJS e ICU MessageFormat. ## Previous and next questions - Next question: [Come si traduce il testo condizionale in JSX?](https://generaltranslation.com/it/kb/translate-conditional-jsx.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/it/kb/sitemap.md) for every article.