Автор:

Создание:2026-05-04Последнее обновление:2026-05-04

Ссылайтесь на этот документ на ваш любимый ассистент AIChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI

История версий

"Init history"
v8.8.004.05.2026

Содержимое этой страницы было переведено с помощью ИИ.

Смотреть последнюю версию оригинального контента на английском

Изменить эту документацию

Если у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.

Ссылка на документацию GitHub

Копировать

Копировать Markdown документа в буфер обмена

Контент во множественном числе / Множественное число в Intlayer

Name: Intlayer
Author: Intlayer

Как работает множественное число

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

Копировать код

Копировать код в буфер обмена

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

Копировать код

Копировать код в буфер обмена

"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

Копировать код

Копировать код в буфер обмена

<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

Копировать код

Копировать код в буфер обмена

<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

Копировать код

Копировать код в буфер обмена

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

Копировать код

Копировать код в буфер обмена

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

Копировать код

Копировать код в буфер обмена

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

Копировать код

Копировать код в буфер обмена

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);

Когда использовать `plural` против `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

Копировать код

Копировать код в буфер обмена

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

Копировать код

Копировать код в буфер обмена

"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

Копировать код

Копировать код в буфер обмена

<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

Копировать код

Копировать код в буфер обмена

<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

Копировать код

Копировать код в буфер обмена

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

Копировать код

Копировать код в буфер обмена

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

Копировать код

Копировать код в буфер обмена

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

Копировать код

Копировать код в буфер обмена

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);

Настройка контента во множественном числе

Чтобы настроить контент во множественном числе в вашем проекте Intlayer, создайте модуль контента, использующий помощник plural. Категория other является обязательной и используется в качестве запасного варианта, когда локаль не определяет более конкретную категорию.

**/*.content.ts

Копировать код

Копировать код в буфер обмена

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

const openingsContent = {
  key: "total_openings",
  content: {
    totalOpenings: t({
      en: plural({
        one: "{{count}} opening",
        other: "{{count}} openings",
      }),
      ru: plural({
        one: "{{count}} вакансия",
        few: "{{count}} вакансии",
        many: "{{count}} вакансий",
        other: "{{count}} вакансий",
      }),
    }),
  },
} satisfies Dictionary;

export default openingsContent;

Поддерживаемые категории: zero, one, two, few, many, other. Вам нужно объявить только те категории, которые использует ваш целевой язык, Intlayer возвращается к other, когда ни одна конкретная категория не подходит.

Заполнитель {{count}} автоматически заменяется счетчиком, который вы передаете во время выполнения. Вы также можете включить другие заполнители (см. Пользовательские заполнители ниже).

Использование контента во множественном числе с React Intlayer

Чтобы использовать контент во множественном числе внутри компонента React, извлеките его с помощью хука useIntlayer и вызовите его со счетчиком. Активная локаль и счетчик объединяются для выбора соответствующей категории CLDR.

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

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

  return (
    <div>
      {/* На английском:                               */}
      {/*  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;

Вы можете вызвать возвращаемую функцию двумя эквивалентными способами:

tsx

Копировать код

Копировать код в буфер обмена

totalOpenings(21); // сокращение: только счетчикtotalOpenings({ count: 21 }); // явная форма

Пользовательские заполнители

Строки во множественном числе могут включать заполнители, отличные от {{count}}. Передайте их в форме объекта вместе с count:

**/*.content.ts

Копировать код

Копировать код в буфер обмена

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

const inboxContent = {
  key: "inbox_summary",
  content: {
    summary: plural({
      one: "{{name}}, у вас {{count}} новое сообщение",
      other: "{{name}}, у вас {{count}} новых сообщений",
    }),
  },
} satisfies Dictionary;

export default inboxContent;

**/*.tsx

Копировать код

Копировать код в буфер обмена

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

summary({ count: 1, name: "Alice" });
// → "Alice, у вас 1 новое сообщение"

summary({ count: 7, name: "Alice" });
// → "Alice, у вас 7 новых сообщений"

Категории CLDR с первого взгляда

Разные языки используют разные подмножества категорий CLDR. Несколько распространенных случаев:

Показать все данные таблицы

Открыть таблицу в модальном окне для четкого просмотра всех данных

Язык	Используемые категории
Английский (`en`)	`one`, `other`
Французский (`fr`)	`one`, `many`, `other`
Русский (`ru`)	`one`, `few`, `many`, `other`
Польский (`pl`)	`one`, `few`, `many`, `other`
Арабский (`ar`)	`zero`, `one`, `two`, `few`, `many`, `other`
Японский / Китайский	только `other`

Вам не нужно это запоминать, объявляйте категории, для которых у вас есть переводы, и Intlayer при необходимости вернется к other.

Ограничение

В отличие от других узлов, узел plural пока не может быть вложен в дочерние узлы.

Пример:

Действительно:

Копировать код

Копировать код в буфер обмена

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

Недействительно:

Копировать код

Копировать код в буфер обмена

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

Дополнительные ресурсы

Для получения более подробной информации о настройке и использовании обратитесь к следующим ресурсам:

Эти ресурсы предлагают дополнительную информацию о настройке и использовании Intlayer в различных средах и фреймворках.

Перевод Перечисление

История версий

Контент во множественном числе / Множественное число в Intlayer

Как работает множественное число

Когда использовать plural против enu

Настройка контента во множественном числе

Использование контента во множественном числе с React Intlayer

Пользовательские заполнители

Категории CLDR с первого взгляда

Ограничение

Дополнительные ресурсы

Когда использовать `plural` против `enu`