Autore:

Creazione:2026-05-04Ultimo aggiornamento:2026-05-04

Riferimento a questa documentazione al tuo assistente AI preferitoChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Pose una domanda e ottieni un riassunto del documento facendo riferimento a questa pagina e al provider AI di tua scelta

Cronologia delle versioni

"Init history"
v8.8.004/05/2026

Il contenuto di questa pagina è stato tradotto con un'IA.

Vedi l'ultima versione del contenuto originale in inglese

Modifica questa documentazione

Se hai un’idea per migliorare questa documentazione, non esitare a contribuire inviando una pull request su GitHub.

Collegamento GitHub alla documentazione

Copia

Copia il Markdown del documento nella porta-documenti

Contenuto Plurale / Il plurale in Intlayer

Name: Intlayer
Author: Intlayer

Come funziona il plurale

To use plural content inside a React component, retrieve it via the useIntlayer hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Next.js Client Components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Vue components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.vue

Copiare il codice

Copiare il codice nella clipboard

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";defineProps<{ count: number }>();const { totalOpenings } = useIntlayer("total_openings");</script><template><div>  <p>{{ totalOpenings(count) }}</p></div></template>

To use plural content in Svelte components, retrieve it via the useIntlayer hook and call it with a count. The store is accessed with $. Here's an example:

**/*.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">import { useIntlayer } from "svelte-intlayer";export let count: number;const content = useIntlayer("total_openings");</script><div><p>{$content.totalOpenings(count)}</p></div>

To use plural content in Preact components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in SolidJS components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const OpeningsComponent: Component<{ count: number }> = (props) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(props.count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Angular components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

app.component.ts

Copiare il codice

Copiare il codice nella clipboard

import { Component, Input } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-openings",template: `  <div>    <p>{{ content().totalOpenings(count) }}</p>  </div>`,})export class OpeningsComponent {@Input() count!: number;content = useIntlayer("total_openings");}

To use plural content with vanilla-intlayer, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.ts

Copiare il codice

Copiare il codice nella clipboard

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("total_openings").onChange((newContent) => {
document.getElementById("openings")!.textContent =
  newContent.totalOpenings(5);
});

// Initial render
document.getElementById("openings")!.textContent = content.totalOpenings(5);

Quando usare `plural` vs `enu`

To use plural content inside a React component, retrieve it via the useIntlayer hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Next.js Client Components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Vue components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.vue

Copiare il codice

Copiare il codice nella clipboard

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";defineProps<{ count: number }>();const { totalOpenings } = useIntlayer("total_openings");</script><template><div>  <p>{{ totalOpenings(count) }}</p></div></template>

To use plural content in Svelte components, retrieve it via the useIntlayer hook and call it with a count. The store is accessed with $. Here's an example:

**/*.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">import { useIntlayer } from "svelte-intlayer";export let count: number;const content = useIntlayer("total_openings");</script><div><p>{$content.totalOpenings(count)}</p></div>

To use plural content in Preact components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in SolidJS components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const OpeningsComponent: Component<{ count: number }> = (props) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(props.count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Angular components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

app.component.ts

Copiare il codice

Copiare il codice nella clipboard

import { Component, Input } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-openings",template: `  <div>    <p>{{ content().totalOpenings(count) }}</p>  </div>`,})export class OpeningsComponent {@Input() count!: number;content = useIntlayer("total_openings");}

To use plural content with vanilla-intlayer, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.ts

Copiare il codice

Copiare il codice nella clipboard

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("total_openings").onChange((newContent) => {
document.getElementById("openings")!.textContent =
  newContent.totalOpenings(5);
});

// Initial render
document.getElementById("openings")!.textContent = content.totalOpenings(5);

Configurazione del contenuto plurale

Per configurare il contenuto plurale nel tuo progetto Intlayer, crea un modulo di contenuto che utilizzi l'helper plural. La categoria other è obbligatoria e viene utilizzata come fallback quando una locale non definisce una categoria più specifica.

**/*.content.ts

Copiare il codice

Copiare il codice nella clipboard

import { plural, t, type Dictionary } from "intlayer";

const openingsContent = {
  key: "total_openings",
  content: {
    totalOpenings: t({
      en: plural({
        one: "{{count}} opening",
        other: "{{count}} openings",
      }),
      it: plural({
        one: "{{count}} posizione aperta",
        other: "{{count}} posizioni aperte",
      }),
    }),
  },
} satisfies Dictionary;

export default openingsContent;

Le categorie supportate sono zero, one, two, few, many, other. Devi solo dichiarare le categorie utilizzate dalla tua lingua di destinazione, Intlayer torna a other quando nessuna categoria specifica corrisponde.

Il segnaposto {{count}} viene sostituito automaticamente con il conteggio passato in fase di esecuzione. Puoi includere anche altri segnaposto (vedi Segnaposto personalizzati sotto).

Utilizzo del contenuto plurale con React Intlayer

Per utilizzare il contenuto plurale all'interno di un componente React, recuperalo tramite l'hook useIntlayer e chiamalo con un conteggio. La locale attiva e il conteggio vengono combinati per scegliere la categoria CLDR corrispondente.

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
  const { totalOpenings } = useIntlayer("total_openings");

  return (
    <div>
      {/* In inglese:                                   */}
      {/*  count=0  → "0 openings"   (other)           */}
      {/*  count=1  → "1 opening"    (one)             */}
      {/*  count=2  → "2 openings"   (other)           */}
      {/*  count=21 → "21 openings"  (other)           */}
      <p>{totalOpenings(count)}</p>
    </div>
  );
};

export default OpeningsComponent;

Puoi chiamare la funzione restituita in due modi equivalenti:

tsx

Copiare il codice

Copiare il codice nella clipboard

totalOpenings(21); // abbreviato: solo conteggiototalOpenings({ count: 21 }); // forma esplicita

Segnaposto personalizzati

Le stringhe plurali possono includere segnaposto diversi da {{count}}. Passali sotto forma di oggetto insieme a count:

**/*.content.ts

Copiare il codice

Copiare il codice nella clipboard

import { plural, type Dictionary } from "intlayer";

const inboxContent = {
  key: "inbox_summary",
  content: {
    summary: plural({
      one: "{{name}}, hai {{count}} nuovo messaggio",
      other: "{{name}}, hai {{count}} nuovi messaggi",
    }),
  },
} satisfies Dictionary;

export default inboxContent;

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

const { summary } = useIntlayer("inbox_summary");

summary({ count: 1, name: "Alice" });
// → "Alice, hai 1 nuovo messaggio"

summary({ count: 7, name: "Alice" });
// → "Alice, hai 7 nuovi messaggi"

Categorie CLDR a colpo d'occhio

Lingue diverse utilizzano diversi sottoinsiemi delle categorie CLDR. Alcuni casi comuni:

Mostra tutto il contenuto della tabella

Apri la tabella in una finestra modale per visualizzare tutti i dati in modo chiaro

Lingua	Categorie utilizzate
Inglese (`en`)	`one`, `other`
Francese (`fr`)	`one`, `many`, `other`
Russo (`ru`)	`one`, `few`, `many`, `other`
Polacco (`pl`)	`one`, `few`, `many`, `other`
Arabo (`ar`)	`zero`, `one`, `two`, `few`, `many`, `other`
Giapponese / Cinese	solo `other`

Non è necessario memorizzarlo, dichiara le categorie per le quali hai traduzioni e Intlayer tornerà a other quando necessario.

Limitazione

A differenza di altri nodi, il nodo plural non può ancora essere nidificato con nodi figli.

Esempio:

Valido:

Copiare il codice

Copiare il codice nella clipboard

    totalOpenings: t({      en: plural({        one: "{{count}} opening",        other: "{{count}} openings",      }),      fr: plural({        one: "{{count}} offre",        other: "{{count}} offres",      }),    }),

Non valido:

Copiare il codice

Copiare il codice nella clipboard

totalOpenings: plural({  one: t({    en: "{{count}} opening",    fr: "{{count}} offre",  }),  other: t({    en: "{{count}} openings",    fr: "{{count}} offres",  }),}),

Risorse aggiuntive

Per informazioni più dettagliate sulla configurazione e l'utilizzo, fare riferimento alle seguenti risorse:

Queste risorse offrono ulteriori approfondimenti sulla configurazione e l'utilizzo di Intlayer in vari ambienti e framework.

Traduzione Enumerazione

Cronologia delle versioni

Contenuto Plurale / Il plurale in Intlayer

Come funziona il plurale

Quando usare plural vs enu

Configurazione del contenuto plurale

Utilizzo del contenuto plurale con React Intlayer

Segnaposto personalizzati

Categorie CLDR a colpo d'occhio

Limitazione

Risorse aggiuntive

Quando usare `plural` vs `enu`