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

Fresh — современный фреймворк для построения веб-приложений на JavaScript и Deno, который делает упор на высокую производительность и работу с рендерингом на сервере. Одним из важных аспектов разработки интерфейсов является корректное представление числовых данных. Форматирование чисел во Fresh осуществляется с использованием стандартных возможностей JavaScript и возможностей серверного рендеринга.

Международные стандарты форматирования

Для форматирования чисел используется объект Intl.NumberFormat, предоставляющий возможность адаптации к локали и различным числовым форматам:

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

console.log(formatter.format(123456.789)); // "123 456,79 ₽"

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

  • locale — строка, указывающая язык и регион ('en-US', 'ru-RU', 'de-DE').
  • style — стиль форматирования ('decimal', 'currency', 'percent').
  • currency — код валюты при стиле 'currency'.
  • minimumFractionDigits и maximumFractionDigits — количество отображаемых знаков после запятой.
  • useGrouping — логическое значение, определяющее необходимость разделителей тысяч.

Использование Intl.NumberFormat на сервере позволяет генерировать уже отформатированные строки, которые будут рендериться на клиенте без дополнительной обработки.

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

Компоненты Fresh представляют собой функции, возвращающие JSX. Для отображения чисел в компоненте удобно использовать встроенные функции форматирования:

/** @jsx h */
import { h } from "preact";

export default function Price({ value }) {
  const formattedValue = new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: 'RUB',
    minimumFractionDigits: 2,
  }).format(value);

  return <span>{formattedValue}</span>;
}

В этом примере числовое значение сразу конвертируется в строку с разделителями тысяч и символом валюты. Такой подход минимизирует нагрузку на клиентский JavaScript и обеспечивает консистентное отображение чисел.

Динамическое форматирование и локализация

Fresh поддерживает использование серверного контекста для динамического выбора локали:

export default function Price({ value, locale }) {
  const formattedValue = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2,
  }).format(value);

  return <span>{formattedValue}</span>;
}

Такой подход позволяет легко адаптировать интерфейс под разные регионы, используя данные пользователя или заголовки HTTP запроса Accept-Language.

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

Для отображения процентов используется стиль 'percent':

const percentFormatter = new Intl.NumberFormat('ru-RU', {
  style: 'percent',
  minimumFractionDigits: 1,
});

console.log(percentFormatter.format(0.1234)); // "12,3 %"

Для больших чисел, таких как миллионы или миллиарды, важна настройка разделителей и сокращений. JavaScript не предоставляет встроенных сокращений типа “1.2M”, но их можно реализовать с помощью пользовательских функций:

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();
}

console.log(formatLargeNumber(2500000)); // "2.5M"

Интеграция с рендерингом на сервере

Fresh использует рендеринг на сервере по умолчанию. Форматирование чисел на сервере уменьшает объем передаваемых данных и ускоряет первичный рендеринг:

export default function Dashboard({ stats }) {
  return (
    <div>
      <p>Доход: {new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB' }).format(stats.revenue)}</p>
      <p>Рост: {new Intl.NumberFormat('ru-RU', { style: 'percent', minimumFractionDigits: 1 }).format(stats.growth)}</p>
    </div>
  );
}

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

Итоговые рекомендации

  • Использовать Intl.NumberFormat для всех типов чисел, чтобы обеспечить корректное форматирование и локализацию.
  • Форматировать числа на сервере для снижения нагрузки на клиент и ускорения рендеринга.
  • Для больших чисел применять кастомные функции сокращения, если требуется компактное отображение.
  • Всегда учитывать локаль пользователя и стиль отображения (валюта, процент, обычное число).

Эффективное форматирование чисел повышает читаемость интерфейсов и делает приложения на Fresh более профессиональными и удобными для международной аудитории.

Оглавление