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

Библиотека Naive UI предоставляет мощные компоненты для работы с числовыми значениями, включая поддержку локализованных форматов и удобное отображение валют, процентов и больших чисел. Для форматирования чисел часто используется NNumberAnimation и вспомогательные утилиты, основанные на стандартных методах JavaScript, таких как Intl.NumberFormat.

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

Intl.NumberFormat позволяет создавать локализованные числовые форматы. В сочетании с Naive UI это обеспечивает единый стиль отображения чисел в интерфейсе:

import { NInput } from 'naive-ui';

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

const formattedValue = formatter.format(1234567.89); // "1 234 567,89 ₽"

Особенности применения:

  • style: 'currency' – форматирование как денежной единицы.
  • style: 'percent' – для процентов.
  • minimumFractionDigits и maximumFractionDigits – контроль количества знаков после запятой.
  • Локаль ('ru-RU', 'en-US' и т.д.) определяет разделители тысяч и десятичные точки.

Компонент NNumberAnimation

Для динамического отображения чисел можно использовать NNumberAnimation, который плавно анимирует изменения значения:

<template>
  <n-number-animation :value="currentValue" :precision="2" :group-separator="' '" />
</template>

<script setup>
import { ref } from 'vue';

const currentValue = ref(12345.67);

// Обновление значения с анимацией
setTimeout(() => {
  currentValue.value = 98765.43;
}, 2000);
</script>

Ключевые параметры:

  • value – текущее число для отображения.
  • precision – количество знаков после запятой.
  • group-separator – символ разделителя тысяч (например, пробел или запятая).
  • prefix и suffix – добавление символов перед или после числа, например валютных значков.

Форматирование больших чисел

Для отображения больших чисел удобно использовать сокращенные формы (K, M, B). В Naive UI можно сочетать утилиты JavaScript с компонентами:

function formatLargeNumber(num) {
  if (num >= 1e9) return (num / 1e9).toFixed(1) + 'B';
  if (num >= 1e6) return (num / 1e6).toFixed(1) + 'M';
  if (num >= 1e3) return (num / 1e3).toFixed(1) + 'K';
  return num.toString();
}

Применение вместе с NNumberAnimation позволяет визуально привлекательно отображать данные на дашбордах.

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

Naive UI не содержит отдельного компонента для форматирования дат, но его компоненты работают с датами через стандартные объекты Date и форматирование с помощью Intl.DateTimeFormat.

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

const date = new Date('2026-03-19T14:30:00');

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

formatter.format(date); // "четверг, 19 марта 2026 г., 14:30"

Особенности:

  • year, month, day – форматы отображения даты.
  • weekday – день недели.
  • hour, minute, second – отображение времени.
  • Локаль задает язык и порядок элементов.

Компоненты для выбора даты

Компоненты NDatePicker и NTimePicker позволяют не только выбирать дату/время, но и интегрировать кастомное форматирование:

<template>
  <n-date-picker v-model:value="selectedDate" :format="customFormat" />
</template>

<script setup>
import { ref } from 'vue';

const selectedDate = ref(new Date());

function customFormat(date) {
  return new Intl.DateTimeFormat('ru-RU', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date);
}
</script>

Параметр format позволяет указать функцию, которая принимает объект Date и возвращает строку, что делает форматирование полностью гибким.

Форматирование временных диапазонов

Для отображения диапазонов дат удобно комбинировать NDatePicker с утилитами date-fns или dayjs:

import dayjs from 'dayjs';

const start = dayjs('2026-03-01');
const end = dayjs('2026-03-19');

const formattedRange = `${start.format('DD.MM.YYYY')} - ${end.format('DD.MM.YYYY')}`; // "01.03.2026 - 19.03.2026"

Это позволяет создавать дашборды с удобным визуальным представлением периодов.

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

  • Использовать локализованные форматы через Intl.NumberFormat и Intl.DateTimeFormat для поддержки разных языков и валют.
  • Для динамических чисел применять NNumberAnimation, чтобы улучшить визуальное восприятие изменений данных.
  • Комбинировать NDatePicker с кастомными функциями форматирования для единого стиля интерфейса.
  • Для больших чисел и финансовых данных выделять тысячные разделители и сокращения (K, M, B) для компактного отображения.
  • Сохранять единый формат даты и времени во всем приложении через утилиты или глобальные функции форматирования.

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

Оглавление