0Pricing
Vue Academy · Урок

Множественное число и связанные сообщения

Правила множественного числа и синтаксис @:key|@:key, формы по количеству и связанные сообщения с @:path

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

Подсчёт зависит от языка

«1 элемент», но «5 элементов» — а в других языках форм может быть ещё больше. Жёстко заданные формы множественного числа приводят к неуклюжим строкам вроде «5 элемент(а/ов)». В Vue I18n встроено изменение форм по числу, которое выбирает нужную форму для заданного количества.

Формы множественного числа через вертикальную черту

Запишите формы в одной строке сообщения, разделив их символом вертикальной черты (|). Для английского языка обычно используются две или три формы.

const en = {
  items: "no items | one item | {count} items",
}

Выбор формы по количеству

Передайте число вторым аргументом в t. Vue I18n выберет соответствующую форму на основе количества.

const { t } = useI18n()

t("items", 0) // "no items"
t("items", 1) // "one item"
t("items", 9) // "9 items"

Правило форм по умолчанию

Для трёх форм действует такое правило: 0 использует первую, 1 — вторую, а любое другое число — третью. При двух формах значения 0 и «много» объединяются.

const en = {
  // two-form version: 0 and N share the plural
  files: "no file | one file | {count} files",
}

Заполнитель {count}

В сообщении с формами по числу специальный заполнитель {count} (или {n}) заполняется переданным числом, поэтому вы можете показать это значение.

const en = { photos: "no photos | {count} photo | {count} photos" }

t("photos", 3) // "3 photos"

Формы по числу в шаблонах

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

<template>
  <p>{{ $t("items", cartCount) }}</p>
</template>

Объединение количества и именованных значений

Вы можете передать и количество, и именованные заполнители, указав количество и объект значений.

const en = { greeting: "Hi {name}, no messages | Hi {name}, {count} messages" }

t("greeting", 2, { named: { name: "Ada" } })
// or per API: t("greeting", { name: "Ada" }, 2)

Что такое связанные сообщения

Иногда один перевод должен включать другой, чтобы избежать дублирования. Связанные сообщения ссылаются на другой ключ с помощью синтаксиса @:.

const en = {
  brand: "Acme",
  welcome: "Welcome to @:brand",
}

Разрешение ссылки

При переводе welcome токен @:brand заменяется переведённым значением brand. Измените brand один раз — и каждое связанное сообщение обновится.

t("welcome") // "Welcome to Acme"
// change brand -> all linked messages reflect it

Связи с вложенными ключами

Связи работают и с вложенными ключами, разделёнными точками. При необходимости заключайте ссылки из нескольких слов в круглые скобки.

const en = {
  app: { name: "MyApp" },
  footer: "Thanks for using @:(app.name)",
}

Модификаторы связей

Связанные сообщения поддерживают такие модификаторы, как @.upper, для преобразования связанного значения (верхний регистр, нижний регистр, первая буква заглавная).

const en = {
  brand: "acme",
  banner: "@.upper:brand sale!", // "ACME sale!"
}

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

Проверьте, насколько хорошо вы поняли формы по числу и связи.

Повторение

Вы изучили формы по числу и повторное использование сообщений:

  • Разделяйте формы по числу с помощью |: "no items | one item | {count} items".
  • Передавайте количество в t(key, count), чтобы выбрать нужную форму.
  • Заполнитель {count} показывает число.
  • Связанные сообщения повторно используют другой ключ через @:otherKey (для вложенных ключей — через @:(nested.key)).
  • Модификаторы, такие как @.upper, преобразуют связанное значение.

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

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

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

Чему я научусь в уроке «Множественное число и связанные сообщения»?

Правила множественного числа и синтаксис @:key|@:key, формы по количеству и связанные сообщения с @:path Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

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

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

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

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

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

  1. Настройка vue-i18n и файлов сообщений
  2. Композируемый модуль useI18n и функция t()
  3. Множественное число и связанные сообщения
  4. Форматирование чисел, дат и валют
← Назад к Vue Academy