Angular Academy · Урок

Множественное число и Select (ICU)

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

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

Почему обычных заполнителей недостаточно

Фраза "You have 1 messages" написана на английском неправильно. В языках действуют разные правила образования множественного числа (в некоторых есть несколько форм), а также используются формы, зависящие от рода или категории. Angular решает эту задачу с помощью формата сообщений ICU: выражений plural и select.

Выражение plural

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

<p i18n>{count, plural,
  =0 {No messages}
  =1 {One message}
  other {{{count}} messages}
}</p>

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

Категории включают точные совпадения (=0, =1) и ключевые слова CLDR: zero, one, two, few, many и обязательное other. Разные языковые стандарты автоматически используют разные подмножества.

Заполнитель в виде решётки

Внутри случая plural символ # является сокращением для сопоставляемого числа, поэтому повторять привязку не нужно.

<p i18n>{count, plural,
  =1 {You have one item}
  other {You have # items}
}</p>

Выражение select

select выбирает текст на основе строкового значения и идеально подходит для таких категорий, как род, статус или тип.

<p i18n>{gender, select,
  male {He replied}
  female {She replied}
  other {They replied}
}</p>

Ветка other обязательна

И plural, и select требуют ветку other. Она используется, когда ни один конкретный случай не подходит; Angular выдаст ошибку, если ветка отсутствует.

Объединение с окружающим текстом

Выражения ICU могут находиться внутри обычного переводимого текста. Помещайте всё предложение в один блок i18n, чтобы переводчики могли управлять порядком слов.

<p i18n>Hi {{ name }}, {count, plural,
  =0 {you have no notifications}
  other {you have # notifications}
}.</p>

Вложение select в plural

Выражения ICU можно вкладывать друг в друга, что позволяет одновременно выразить количество и категорию, когда этого требует грамматика.

{count, plural,
  =0 {No guests}
  other {# {type, select, vip {VIP} other {regular}} guests}
}

Переводчики настраивают категории

При переводе языковой стандарт может добавить формы множественного числа, необходимые его грамматике (например, в русском используются one, few и many). Целевой текст элемента ICU в XLIFF содержит локализованные ветки.

ICU в TypeScript с $localize

Синтаксис ICU также работает внутри строк с тегом $localize, поэтому логику множественного числа в коде компонента тоже можно переводить.

const label = $localize('{count, plural, =1 {1 file} other {{{count}} files}}');

Почему ICU лучше ручного if/else

Жёстко заданное условие count === 1 ? 'message' : 'messages' предполагает бинарное правило множественного числа, характерное для английского языка. ICU передаёт выбор правила данным CLDR каждого языкового стандарта, поэтому языки с тремя или шестью формами множественного числа отображаются правильно без изменения кода.

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

Какая ветка ICU обязательна всегда?

Итоги

ICU plural выбирает текст по числу, используя категории (=0, one, other), а символ # обозначает количество. select выбирает текст по строковому значению. Оба выражения требуют ветку other, допускают вложенность, работают в $localize и позволяют каждому языковому стандарту применять собственные правила множественного числа.

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

Урок «Множественное число и Select (ICU)» бесплатный?

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

Чему я научусь в уроке «Множественное число и Select (ICU)»?

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

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

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

Сколько времени занимает урок «Множественное число и Select (ICU)»?

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

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

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

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

← Назад к Angular Academy