Форматирование отображаемых значений

В Carbon Components Svelte форматирование отображаемых данных играет ключевую роль в обеспечении удобного и корректного взаимодействия с пользователем. Компоненты библиотеки предоставляют встроенные механизмы для преобразования чисел, дат, валют и других значений в удобочитаемые формы, сохраняя при этом единообразие интерфейса.

Числовые значения

Для чисел применяются следующие подходы:

Форматирование с разделителями тысяч Использование встроенной функции NumberFormat позволяет автоматически добавлять разделители тысяч и управлять количеством десятичных знаков:
```
import { NumberFormat } from 'carbon-components-svelte';

<NumberFormat value={1234567.89} locale="ru-RU" minimumFractionDigits={2} />
```
Здесь:
- value — исходное число;
- locale — региональная локализация, влияющая на стиль разделителей;
- minimumFractionDigits — минимальное количество знаков после запятой.
Форматирование процентов Для отображения процентов удобно использовать опцию style: 'percent':
```
<NumberFormat value={0.256} style="percent" maximumFractionDigits={1} />
```
Результат автоматически преобразуется в 25.6%.

Валюты

Компоненты поддерживают корректное отображение валют с учётом локализации и символов валют:

<NumberFormat value={12345.67} style="currency" currency="USD" />
<NumberFormat value={12345.67} style="currency" currency="EUR" locale="de-DE" />

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

currency задаёт символ или код валюты (USD, EUR, RUB и т.д.);
locale управляет форматом (например, разделители и позиция символа валюты).

Даты и время

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

import { DateFormat } from 'carbon-components-svelte';

<DateFormat value={new Date()} dateStyle="long" timeStyle="short" locale="ru-RU" />

Опции:

dateStyle может принимать значения short, medium, long, full;
timeStyle задаёт формат времени: short, medium, long, full;
locale определяет язык и формат даты/времени.

Настраиваемое отображение

Иногда требуется комбинированное форматирование или создание специфического отображения:

<NumberFormat
  value={1234.5}
  locale="ru-RU"
  minimumFractionDigits={2}
  maximumFractionDigits={2}
  style="decimal"
/>

Можно объединять компоненты с другими элементами интерфейса Carbon, например, в таблицах (DataTable) или формах (TextInput) для динамического отображения значений.

Валидация и управление вводом

Для числовых и денежных значений компонент NumberInput поддерживает встроенные ограничения:

min и max — диапазон допустимых значений;
step — шаг изменения;
formatOptions — объект для кастомного форматирования чисел.

Пример с ограничением диапазона:

<NumberInput
  bind:value={amount}
  min={0}
  max={10000}
  step={50}
  formatOptions={{ style: 'currency', currency: 'RUB' }}
/>

Такое сочетание обеспечивает не только корректный вывод, но и ограничивает ввод пользователя, предотвращая ошибки и некорректные значения.

Работа с таблицами и списками

В DataTable форматирование данных осуществляется через render-функции колонок:

const columns = [
  { id: 'price', header: 'Цена', render: row => <NumberFormat value={row.price} style="currency" currency="USD" /> },
  { id: 'date', header: 'Дата', render: row => <DateFormat value={row.date} dateStyle="short" /> }
];

Это позволяет:

Использовать разные форматы для каждой колонки;
Автоматически применять локализацию и стандарты отображения без дополнительных преобразований данных.

Локализация и единообразие

Все компоненты Carbon Components Svelte учитывают locale как основной инструмент управления отображением. Систематическое использование локали обеспечивает:

правильное отображение чисел, валют и дат;
соответствие стандартам оформления для конкретного региона;
согласованность интерфейса при международной поддержке приложений.