Плюрализация

Quasar Framework предоставляет мощные средства для локализации и интернационализации приложений на Vue.js, включая поддержку плюрализации. Плюрализация — это процесс выбора правильной формы слова в зависимости от числового значения. В языках с богатой морфологией, таких как русский, английский или французский, это особенно важно для корректного отображения интерфейса.

Настройка локализации

Quasar использует пакет @quasar/locale для работы с переводами и форматированием чисел и дат. Для поддержки плюрализации необходимо подключить соответствующий язык. Например, для русского языка:

import { Quasar } from 'quasar'
import ru from 'quasar/lang/ru'

Quasar.lang.set(ru)

После установки языка все компоненты Quasar будут использовать его настройки, включая правила плюрализации.

Использование функции $tc

Для работы с плюрализацией в Quasar применяется функция $tc (translate & choose). Она позволяет передавать число и выбирать правильную форму слова:

export default {
  methods: {
    messages(count) {
      return this.$tc('item', count)
    }
  }
}

В шаблоне Vue это будет выглядеть так:

<p>{{ messages(1) }}</p> <!-- 1 предмет -->
<p>{{ messages(3) }}</p> <!-- 3 предмета -->
<p>{{ messages(5) }}</p> <!-- 5 предметов -->

Определение правил в словаре

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

export default {
  item: 'предмет | предмета | предметов'
}
  • Первая форма (предмет) используется для числа 1.
  • Вторая форма (предмета) — для чисел 2, 3, 4.
  • Третья форма (предметов) — для чисел 0, 5 и выше.

Quasar автоматически применяет алгоритм выбора формы в зависимости от числа и языка.

Алгоритм выбора формы

Для русского языка используется следующий алгоритм:

  1. Если число оканчивается на 1 и не оканчивается на 11 — использовать единственное число.
  2. Если число оканчивается на 2–4, но не на 12–14 — использовать форму двух-трёх слов.
  3. Во всех остальных случаях — форма множественного числа.

Примеры:

this.$tc('item', 1)  // предмет
this.$tc('item', 2)  // предмета
this.$tc('item', 5)  // предметов
this.$tc('item', 21) // предмет
this.$tc('item', 14) // предметов

Плюрализация в компонентах Quasar

Многие компоненты Quasar поддерживают локализацию и $tc напрямую. Например, QTable, QPagination и уведомления QNotify:

this.$q.notify({
  message: this.$tc('item', itemsCount),
  color: 'primary'
})

В таблицах можно использовать $tc для заголовков столбцов с числом элементов:

<q-table
  :rows="rows"
  :columns="columns"
  :title="$tc('item', rows.length)"
></q-table>

Динамическая плюрализация

Можно создавать динамические ключи для более сложных случаев:

computed: {
  cartMessage() {
    const count = this.cart.length
    return this.$tc(count === 0 ? 'cart.empty' : 'cart.items', count)
  }
}

Словарь может быть структурирован так:

export default {
  cart: {
    empty: 'Корзина пуста',
    items: 'товар | товара | товаров'
  }
}

Особенности работы с Vue 3

В Quasar на Vue 3 рекомендуется использовать Composition API с useQuasar:

import { useQuasar } from 'quasar'

export default {
  setup() {
    const $q = useQuasar()
    
    const message = (count) => $q.lang.tc('item', count)

    return { message }
  }
}

Это позволяет безопасно использовать плюрализацию в любых реактивных вычислениях и компонентах.

Рекомендации по организации словарей

  • Разделять переводы на отдельные файлы по модулям.
  • Использовать вложенные объекты для категорий (cart.items, notifications.messages).
  • Всегда указывать все формы слова для языков с богатой морфологией.
  • Проверять корректность работы $tc при больших числах и нулях, чтобы избежать ошибок отображения.

Поддержка других языков

Quasar поставляется с готовыми локализациями для большинства популярных языков. Алгоритмы плюрализации встроены для каждого языка:

  • Английский: две формы (item | items).
  • Французский: две формы, с особенностями для нуля.
  • Немецкий, испанский и другие: стандартные правила множественного числа.

Подключение осуществляется аналогично русскому примеру:

import fr from 'quasar/lang/fr'
Quasar.lang.set(fr)

После этого $tc будет автоматически использовать французские правила.

Плюрализация в Quasar обеспечивает точное и корректное отображение текста с числами, снижает вероятность ошибок в локализации и упрощает поддержку многоязычных интерфейсов, делая приложения удобными для пользователей любых языков.

Оглавление