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

Vue.js предоставляет мощные механизмы для работы с отображением данных, включая форматирование дат и чисел. В основе этого лежит концепция фильтров (в Vue 2) и композиционных функций или методов (в Vue 3), а также использование встроенных возможностей JavaScript, таких как Intl.DateTimeFormat и Intl.NumberFormat.

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

Для форматирования дат в приложении Vue.js обычно применяются следующие подходы:

1. Использование встроенных методов JavaScript

Класс Date и объект Intl.DateTimeFormat позволяют локализовать и форматировать даты:

const date = new Date('2025-12-31T15:45:00');

const formattedDate = new Intl.DateTimeFormat('ru-RU', {
  year: 'numeric',
  month: 'long',
  day: '2-digit',
  weekday: 'long',
  hour: '2-digit',
  minute: '2-digit'
}).format(date);

console.log(formattedDate); // "среда, 31 декабря 2025 г., 15:45"

Ключевые опции для Intl.DateTimeFormat:

  • weekday: "long" | "short" | "narrow" — день недели.
  • year: "numeric" | "2-digit" — формат года.
  • month: "numeric" | "2-digit" | "long" | "short" | "narrow" — формат месяца.
  • day: "numeric" | "2-digit" — день месяца.
  • hour, minute, second: "numeric" | "2-digit" — время.
  • timeZone: строка, например "Europe/Moscow".

2. Использование методов Vue 3 (Composition API)

Во Vue 3 чаще всего форматирование выполняется через композитные функции:

import { ref, computed } from 'vue';

export default {
  setup() {
    const date = ref(new Date());

    const formattedDate = computed(() => {
      return new Intl.DateTimeFormat('ru-RU', {
        year: 'numeric',
        month: 'long',
        day: '2-digit'
      }).format(date.value);
    });

    return { formattedDate };
  }
};

3. Вариант с фильтрами (Vue 2)

Фильтры позволяют преобразовывать данные непосредственно в шаблоне:

Vue.filter('formatDate', function(value) {
  if (!value) return '';
  return new Intl.DateTimeFormat('ru-RU', { day: '2-digit', month: 'long', year: 'numeric' }).format(new Date(value));
});

Использование в шаблоне:

<span>{{ order.date | formatDate }}</span>

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

Vue.js также позволяет легко форматировать числа с учетом локали и различных требований к отображению.

1. Использование Intl.NumberFormat

const number = 1234567.89;

const formattedNumber = new Intl.NumberFormat('ru-RU', {
  style: 'currency',
  currency: 'RUB',
  minimumFractionDigits: 2
}).format(number);

console.log(formattedNumber); // "1 234 567,89 ₽"

Параметры:

  • style: "decimal" | "currency" | "percent".
  • currency: валюта, например "USD", "EUR", "RUB".
  • minimumFractionDigits, maximumFractionDigits: количество знаков после запятой.
  • useGrouping: true | false — использовать ли разделители тысяч.

2. Применение в Vue через вычисляемые свойства

import { ref, computed } from 'vue';

export default {
  setup() {
    const amount = ref(1234567.89);

    const formattedAmount = computed(() => {
      return new Intl.NumberFormat('ru-RU', {
        style: 'currency',
        currency: 'RUB'
      }).format(amount.value);
    });

    return { formattedAmount };
  }
};

3. Фильтры Vue 2 для чисел

Vue.filter('currency', function(value) {
  if (typeof value !== 'number') return value;
  return new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB' }).format(value);
});

Использование:

<span>{{ product.price | currency }}</span>

Локализация и настройка отображения

Использование Intl позволяет полностью контролировать локализацию:

  • Месяцы и дни недели автоматически адаптируются под локаль ('ru-RU', 'en-US' и другие).
  • Валюты корректно форматируются с учетом символов и разделителей.
  • Можно комбинировать различные опции для отображения полного времени и даты, либо только части (например, только день и месяц).

Практические советы

  • Для часто используемых форматов дат и чисел лучше создавать утилитарные функции и подключать их через методы или Composition API.
  • Использование фильтров удобно для небольших проектов на Vue 2, но в Vue 3 рекомендуется отдавать предпочтение вычисляемым свойствам и композиционным функциям.
  • Для проектов с множественными локалями можно хранить локали в конфигурации и динамически формировать форматтеры на основе текущего языка приложения.

Примеры комбинированного использования

import { ref, computed } from 'vue';

export default {
  setup() {
    const orders = ref([
      { date: '2025-12-31', total: 4999.99 },
      { date: '2025-11-15', total: 12999.50 }
    ]);

    const formattedOrders = computed(() => {
      return orders.value.map(order => ({
        date: new Intl.DateTimeFormat('ru-RU', { day: '2-digit', month: 'long', year: 'numeric' }).format(new Date(order.date)),
        total: new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB' }).format(order.total)
      }));
    });

    return { formattedOrders };
  }
};

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

Форматирование дат и чисел во Vue.js строится на интеграции с стандартными API JavaScript и гибкой организации кода через вычисляемые свойства, методы и фильтры, что обеспечивает высокую масштабируемость и удобство локализации интерфейса.

Оглавление