0Pricing
React Academy · Урок

Множественное число и интерполяция

Обрабатывайте формы множественного числа на основе количества и вставляйте динамические значения в переведённые строки.

«Множественное число и интерполяция» — бесплатный урок React Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Добро пожаловать

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

Основы интерполяции

Используйте двойные фигурные скобки в строках перевода как заполнители. Передайте объект со значениями переменных вторым аргументом в t().
// JSON: "greeting": "Hello, {{name}}!"
t('greeting', { name: 'Alice' }); // Hello, Alice!

Несколько переменных интерполяции

В одной строке можно использовать любое необходимое количество переменных интерполяции.
// JSON: "summary": "You have {{count}} messages in {{folder}}"
t('summary', { count: 5, folder: 'Inbox' });
// You have 5 messages in Inbox

Экранирование HTML

По умолчанию i18next экранирует символы HTML в интерполированных значениях. Чтобы отображать HTML внутри интерполированного значения, задайте `escapeValue: false` в конфигурации init (в React это уже безопасно, поскольку React экранирует JSX).

Формы множественного числа

i18next автоматически поддерживает формы множественного числа. Определите `key` для единственного числа и `key_other` (или `key_plural`) для множественного. Передайте `count` в объекте интерполяции.
// JSON:
// "item": "{{count}} item"
// "item_other": "{{count}} items"

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

Правила множественного числа для разных языков

В разных языках действуют разные правила образования множественного числа. В русском языке 4 формы множественного числа, а в арабском — 6. i18next автоматически использует правила Unicode CLDR для каждого языка. Определите все необходимые формы в файле перевода.
// Russian (ru):
// key_one, key_few, key_many, key_other

Форма для нулевого количества

i18next также поддерживает специальную форму `key_zero`, когда count равен 0, что позволяет использовать другой вариант формулировки (например, «Нет элементов» вместо «0 элементов»).
// JSON:
// "messages_zero": "No messages"
// "messages_one": "{{count}} message"
// "messages_other": "{{count}} messages"

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

Вложенные ключи с формами множественного числа

Вложенные объекты могут содержать ключи для форм множественного числа. Получайте к ним доступ с помощью точечной нотации так же, как к обычным вложенным ключам.
// JSON: { "cart": { "items_one": "item", "items_other": "items" } }
t('cart.items', { count: 3 }); // items

Форматирование дат и чисел

i18next интегрируется с API Intl для форматирования дат и чисел с учётом локали. Используйте i18n.format() или плагин intlify, чтобы форматировать даты как часть переводов.
t('lastSeen', { date: new Date(), formatParams: {
  date: { month: 'long', day: 'numeric' }
}});

Переводы с учётом контекста

Используйте параметр `context` для грамматически разных форм в разных контекстах (например, для слов, зависящих от рода). Определите варианты `key_male` и `key_female` в файле перевода.
// JSON: { "hero_male": "Hero", "hero_female": "Heroine" }
t('hero', { context: 'female' }); // Heroine

Быстрая проверка

Как передать динамическое значение с именем «username» в строку перевода с помощью i18next?

Итоги

Используйте {{variable}} для интерполяции, key_other/key_one для форм множественного числа и key_zero для формы нулевого количества. i18next автоматически применяет правила множественного числа Unicode CLDR для каждого языка. Используйте context для грамматических вариантов.

Далее

Следующий урок: **Переключатель языка и отложенная загрузка переводов** — Вы создадите переключатель локали и будете загружать пакеты переводов по мере необходимости.

Часто задаваемые вопросы

Урок «Множественное число и интерполяция» бесплатный?

Да — полный текст урока «Множественное число и интерполяция» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Множественное число и интерполяция»?

Обрабатывайте формы множественного числа на основе количества и вставляйте динамические значения в переведённые строки. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Множественное число и интерполяция»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Настройка react-i18next
  2. Использование хука useTranslation
  3. Множественное число и интерполяция
  4. Переключатель языка и отложенная загрузка переводов
← Назад к React Academy