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

    Контент во множественном числе / Множественное число в 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;

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

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

    Чтобы настроить контент во множественном числе в вашем проекте 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 пока не может быть вложен в дочерние узлы.

    Пример:

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

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

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

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

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

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

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

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