Форматирование валют

Фреймворк Fresh предоставляет мощные возможности для работы с данными на стороне сервера и клиента, что делает его удобным инструментом для динамического отображения чисел, включая валюту. В основе форматирования валют лежит объект Intl.NumberFormat, который является частью стандартного JavaScript и позволяет корректно отображать суммы в зависимости от локали и типа валюты.

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

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

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

console.log(formatter.format(123456.789)); // 123 456,79 ₽
  • style — определяет тип форматирования. Для валют используется 'currency'.
  • currency — код валюты в формате ISO 4217.
  • minimumFractionDigits и maximumFractionDigits — задают количество знаков после запятой.

Локализация валюты

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

const usdFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
});

console.log(usdFormatter.format(123456.789)); // $123,456.79

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

Форматирование в компонентах Fresh

В Fresh компоненты могут быть как серверными, так и клиентскими. Серверные компоненты идеально подходят для предварительного форматирования валюты перед рендерингом HTML. Пример:

export default function Product({ price }) {
  const formattedPrice = new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: 'RUB'
  }).format(price);

  return (
    <div>
      <h2>Цена товара:</h2>
      <p>{formattedPrice}</p>
    </div>
  );
}

Клиентские компоненты также могут использовать Intl.NumberFormat, особенно если цена обновляется динамически после загрузки страницы, например, при выборе количества товара или валюты.

Динамическая смена валюты

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

export default function Price({ amount, currency, locale }) {
  const formattedPrice = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency
  }).format(amount);

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

// Пример использования:
<Price amount={1000} currency="EUR" locale="de-DE" />
// 1.000,00 €

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

Работа с большим количеством данных

Если приложение обрабатывает массивы цен, можно применить форматирование в цикле или через методы массивов:

const prices = [100, 2500.5, 98765.43];
const formatter = new Intl.NumberFormat('ru-RU', {
  style: 'currency',
  currency: 'RUB'
});

const formattedPrices = prices.map(price => formatter.format(price));
// ["100,00 ₽", "2 500,50 ₽", "98 765,43 ₽"]

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

Настройка отображения символов

С помощью опций currencyDisplay можно управлять форматом символа валюты:

  • 'symbol' — отображает символ (₽, $, €).
  • 'code' — выводит код валюты (RUB, USD, EUR).
  • 'name' — отображает полное название валюты (рубль, доллар, евро).
const formatter = new Intl.NumberFormat('ru-RU', {
  style: 'currency',
  currency: 'USD',
  currencyDisplay: 'name'
});

console.log(formatter.format(123)); // 123,00 доллара США

Поддержка округлений

Опции minimumFractionDigits и maximumFractionDigits позволяют контролировать округление чисел, что важно для корректного отображения цен:

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

console.log(formatter.format(12345.67)); // 12 346 ₽

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

Итоговая структура использования

  • Создание форматтера один раз для локали и валюты.
  • Форматирование чисел до вставки в компонент.
  • Использование пропсов для динамической смены валют и локали.
  • Применение опций для контроля дробной части и отображения символов.

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

Оглавление