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

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

Локализация через Intl

Atomico использует встроенный объект Intl для форматирования данных. Он обеспечивает поддержку множества локалей и гибкое управление стилем отображения.

Пример форматирования числа:

import { c, useState } from "atomico";

function NumberDisplay({ value }) {
  const formatted = new Intl.NumberFormat("ru-RU", {
    style: "decimal",
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(value);

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

customElements.define("number-display", c(NumberDisplay));

Ключевые моменты:

  • style может принимать значения: "decimal", "currency", "percent".
  • minimumFractionDigits и maximumFractionDigits позволяют управлять количеством отображаемых десятичных знаков.
  • Локаль ("ru-RU") задает правила разделения тысяч и формат даты.

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

Для отображения денежных значений используется стиль currency и параметр currency с кодом валюты ISO 4217.

function Price({ amount }) {
  const formatted = new Intl.NumberFormat("ru-RU", {
    style: "currency",
    currency: "RUB",
    minimumFractionDigits: 0
  }).format(amount);

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

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

  • Отображение символа валюты корректно учитывает локаль: для "RUB" в "ru-RU" это ₽.
  • Можно контролировать количество знаков после запятой через minimumFractionDigits и maximumFractionDigits.

Форматирование процентов

Для процентов используется стиль "percent", при этом значение передается как десятичная дробь (0.25 = 25%).

function Discount({ value }) {
  const formatted = new Intl.NumberFormat("ru-RU", {
    style: "percent",
    minimumFractionDigits: 1
  }).format(value);

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

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

  • Atomico обеспечивает реактивное обновление компонента при изменении value.
  • Можно контролировать отображение десятичных знаков и символ %.

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

Для работы с датами используется Intl.DateTimeFormat. Он позволяет форматировать дату в различных стилях, включая короткий, средний, длинный и полный.

function DateDisplay({ date }) {
  const formatted = new Intl.DateTimeFormat("ru-RU", {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric"
  }).format(date);

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

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

  • Параметры weekday, year, month, day управляют отображением конкретных частей даты.
  • Можно использовать стили numeric или 2-digit для чисел, и short, long, narrow для месяцев и дней недели.
  • Локаль задает язык и формат записи даты.

Динамическая локаль и реактивность

Atomico поддерживает реактивное обновление компонентов, что позволяет менять локаль и форматирование на лету:

function DynamicDate({ date, locale }) {
  const formatted = new Intl.DateTimeFormat(locale, {
    weekday: "short",
    year: "numeric",
    month: "short",
    day: "numeric"
  }).format(date);

  return <span>{formatted}</span>;
}
  • При изменении пропса locale компонент автоматически перерендеривается с новым форматом.
  • Это особенно полезно для мультиязычных приложений.

Универсальные утилиты форматирования

Для упрощения повторного использования в Atomico часто создают небольшие утилиты:

export function formatNumber(value, locale = "ru-RU", options = {}) {
  return new Intl.NumberFormat(locale, options).format(value);
}

export function formatDate(date, locale = "ru-RU", options = {}) {
  return new Intl.DateTimeFormat(locale, options).format(date);
}
  • Эти функции можно подключать в любом компоненте.
  • Позволяют стандартизировать стиль отображения данных во всей библиотеке компонентов.

Рекомендации по использованию

  1. Всегда задавать локаль явно, если приложение предназначено для определенного региона.
  2. Использовать утилиты для консистентного форматирования чисел и дат.
  3. Выбирать подходящий стиль (decimal, currency, percent) и указывать количество знаков после запятой.
  4. Для сложных сценариев, таких как отображение валют разных стран, использовать динамическое определение локали.

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

Оглавление