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

Одной из важнейших задач при разработке веб-приложений является правильное отображение данных для пользователей, особенно когда речь идет о числовых значениях, датах и валютах. В Svelte для решения этой задачи можно использовать стандартные возможности JavaScript и дополнительные инструменты фреймворка. Рассмотрим, как форматировать данные в Svelte для различных сценариев.

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

JavaScript предоставляет встроенный объект Intl.NumberFormat, который позволяет форматировать числа с учетом локализации и различных параметров отображения. В Svelte это легко интегрируется в шаблоны через реактивные переменные.

Пример: Форматирование чисел
<script>
  let amount = 1234567.89;
</script>

<p>Число: {new Intl.NumberFormat('ru-RU').format(amount)}</p>

В данном примере число 1234567.89 будет отформатировано в соответствии с российскими стандартами: 1 234 567,89. Важным моментом является использование локали 'ru-RU', которая позволяет корректно отображать разделители тысяч и десятичных знаков.

Настройки форматирования

Помимо локализации, Intl.NumberFormat позволяет задавать дополнительные параметры форматирования, такие как стиль отображения (например, в виде валюты, процента и т. д.).

<script>
  let price = 1234.56;
</script>

<p>Цена: {new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB' }).format(price)}</p>

Результат будет: Цена: 1 234,56 ₽. В данном случае используется стиль 'currency', который форматирует число как валюту, а также указана валюта 'RUB'.

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

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

Пример: Форматирование даты
<script>
  let date = new Date();
</script>

<p>Сегодня: {new Intl.DateTimeFormat('ru-RU').format(date)}</p>

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

Настройки форматирования дат

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

<script>
  let eventDate = new Date('2025-12-29T10:30:00');
</script>

<p>Событие: {new Intl.DateTimeFormat('ru-RU', { 
  weekday: 'long', 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric', 
  hour: 'numeric', 
  minute: 'numeric' 
}).format(eventDate)}</p>

Результат: Событие: понедельник, 29 декабря 2025 г., 10:30. В этом примере используется подробное описание дня недели, месяца, года, а также времени.

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

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

Пример: Форматирование валюты
<script>
  let amount = 4567.89;
</script>

<p>Сумма: {new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB' }).format(amount)}</p>

Результат: Сумма: 4 567,89 ₽. Это наглядный пример того, как с помощью локализации и стиля 'currency' можно корректно отобразить денежные суммы.

Изменение валюты

Для отображения сумм в других валютах можно изменить параметр currency.

<script>
  let usdAmount = 1234.56;
</script>

<p>Сумма в долларах: {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(usdAmount)}</p>

Результат: Сумма в долларах: $1,234.56. Это пример того, как можно отформатировать валюту в долларах США с помощью локализации для США ('en-US').

4. Реактивное форматирование в Svelte

Svelte предлагает мощные средства реактивности, что позволяет автоматически обновлять отображение данных при изменении переменных. Форматирование дат, чисел и валют можно легко интегрировать в реактивные блоки шаблона.

Пример: Реактивное форматирование чисел
<script>
  let quantity = 10000;
</script>

<p>Количество: {new Intl.NumberFormat('ru-RU').format(quantity)}</p>

Здесь при изменении значения переменной quantity автоматически будет обновляться и отформатированное число. Это ключевое преимущество Svelte, позволяющее минимизировать количество кода для управления состоянием.

Пример: Реактивное форматирование валюты
<script>
  let amount = 5000.45;
</script>

<p>Сумма в валюте: {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount)}</p>

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

5. Альтернативные способы форматирования

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

Пример использования numeral.js в Svelte:

<script>
  import numeral from 'numeral';
  let price = 1500;
</script>

<p>Цена: {numeral(price).format('$0,0.00')}</p>

Этот код отформатирует цену в виде валюты, добавляя запятые в качестве разделителей тысяч и отображая два знака после запятой.

Заключение

Форматирование дат, чисел и валют в Svelte позволяет создавать интерфейсы, которые легко воспринимаются пользователями в зависимости от их локализации. Использование встроенных возможностей JavaScript, таких как Intl.NumberFormat и Intl.DateTimeFormat, позволяет с минимальными усилиями отобразить данные в нужном формате. Svelte в свою очередь обеспечивает высокую гибкость благодаря своей реактивной системе, что упрощает процесс обновления данных на экране.

Оглавление