format форматирование данных

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

Утилиты Quasar для форматирования

Quasar включает модуль Quasar.utils, который содержит несколько подмодулей, в частности:

  • date — функции для работы с датами и временем
  • number — функции для работы с числами, процентами и валютами
  • format — функции для строкового форматирования и приведения данных к нужному виду

Пример подключения утилит:

import { date, number } from 'quasar';

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

number.formatNumber

Позволяет привести число к читаемому виду с разделителями тысяч и настройкой количества десятичных знаков:

import { number } from 'quasar';

const value = 1234567.891;
const formatted = number.formatNumber(value, {
  decimals: 2,
  decimalSeparator: '.',
  thousandSeparator: ','
});
// Результат: "1,234,567.89"

Параметры:

  • decimals — количество знаков после запятой
  • decimalSeparator — символ, разделяющий целую и дробную часть
  • thousandSeparator — разделитель тысяч

number.formatCurrency

Используется для отображения чисел в денежном формате:

const price = 123456.789;
const formattedPrice = number.formatCurrency(price, {
  prefix: '$',
  decimals: 2,
  decimalSeparator: '.',
  thousandSeparator: ','
});
// Результат: "$123,456.79"

Опции:

  • prefix / suffix — символ валюты
  • decimals — количество десятичных знаков
  • decimalSeparator — символ десятичной точки
  • thousandSeparator — символ разделителя тысяч

number.formatPercent

Позволяет форматировать числа в проценты:

const ratio = 0.1234;
const percent = number.formatPercent(ratio, { decimals: 1 });
// Результат: "12.3%"

Форматирование дат и времени

Подмодуль date предоставляет функции для гибкого отображения времени и дат.

date.formatDate

Применяется для преобразования объекта Date или строки в указанный формат:

import { date } from 'quasar';

const now = new Date();
const formatted = date.formatDate(now, 'YYYY-MM-DD HH:mm:ss');
// Результат: "2026-03-20 15:45:12"

Форматные строки:

  • YYYY — год
  • MM — месяц с ведущим нулем
  • DD — день с ведущим нулем
  • HH — часы в 24-часовом формате
  • mm — минуты
  • ss — секунды

date.addToDate и date.getDateDiff

Позволяют легко добавлять или вычитать временные интервалы и вычислять разницу между датами:

const nextWeek = date.addToDate(now, { days: 7 });
const diff = date.getDateDiff(nextWeek, now, 'days'); // Результат: 7

Параметры:

  • unit — единицы измерения (days, months, years, hours, minutes, seconds)

Форматирование строк

Quasar включает ряд функций для работы с текстом:

  • format.capitalize — делает первую букву строки заглавной
import { format } from 'quasar';

const text = 'quasar framework';
const capitalized = format.capitalize(text);
// Результат: "Quasar framework"

  • format.upperCase и format.lowerCase — преобразование регистра

  • format.truncate — сокращение строки до указанной длины с добавлением многоточия:

const longText = 'Это очень длинный текст для отображения';
const shortText = format.truncate(longText, { length: 20, ellipsis: '...' });
// Результат: "Это очень длинный..."

Форматирование для компонентов

Многие компоненты Quasar напрямую поддерживают форматирование через пропсы и слоты. Например:

QInput с маской

<q-input
  v-model="phone"
  mask="(###) ###-####"
  fill-mask
  label="Телефон"
/>
  • mask задает шаблон ввода
  • fill-mask автоматически подставляет разделители

QTable и форматирование чисел

Компонент QTable поддерживает кастомные рендереры через слот body-cell:

<q-table
  :rows="rows"
  :columns="columns"
>
  <template v-slot:body-cell-price="props">
    {{ number.formatCurrency(props.value, { prefix: '$', decimals: 2 }) }}
  </template>
</q-table>

Такой подход позволяет централизованно контролировать отображение чисел и дат в таблицах без изменения исходных данных.

Локализация форматов

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

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

Quasar.lang.set(langRu);

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

Практические рекомендации

  1. Использовать встроенные утилиты вместо самописных функций для единообразия.
  2. Применять форматирование на уровне рендеринга, а не данных, чтобы сохранить чистоту логики.
  3. Настраивать локаль приложения через Quasar.lang для корректного отображения дат, времени и валют.
  4. Для сложных форматов чисел и дат комбинировать утилиты number и date с пользовательскими фильтрами или вычисляемыми свойствами.

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

Оглавление