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

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

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

Для работы с датами стандартный объект Date в JavaScript предоставляет базовые методы, но для удобного отображения применяются Intl.DateTimeFormat или сторонние библиотеки вроде dayjs и moment.js.

Пример с Intl.DateTimeFormat:

import m from "mithril";

const date = new Date();

const formattedDate = new Intl.DateTimeFormat("ru-RU", {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit"
}).format(date);

const DateComponent = {
    view: () => m("div", formattedDate)
};

m.mount(document.body, DateComponent);

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

    • weekday, year, month, day, hour, minute, second.
    • Локаль определяет язык и формат даты.

  • Поддержка браузерами широкая, нативная и не требует сторонних библиотек.

Для динамического обновления даты в интерфейсе можно использовать Mithril streams или методы жизненного цикла компонентов (oninit, onupdate).

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

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

Пример:

const number = 1234567.89;

const formattedNumber = new Intl.NumberFormat("ru-RU", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
}).format(number);

const NumberComponent = {
    view: () => m("div", formattedNumber)
};

m.mount(document.body, NumberComponent);

  • Основные опции:

    • style: "decimal", "percent", "currency".
    • minimumFractionDigits и maximumFractionDigits управляют количеством знаков после запятой.
    • useGrouping: включает или отключает разделители тысяч.

В Mithril можно интегрировать это в любые компоненты, где требуется отображение чисел, включая таблицы, графики и формы.

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

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

Пример:

const amount = 12345.67;

const formattedCurrency = new Intl.NumberFormat("ru-RU", {
    style: "currency",
    currency: "RUB",
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
}).format(amount);

const CurrencyComponent = {
    view: () => m("div", formattedCurrency)
};

m.mount(document.body, CurrencyComponent);

  • Важные моменты:

    • currency принимает трехбуквенный код валюты (ISO 4217), например USD, EUR, RUB.
    • Локаль определяет расположение символа, разделители и формат отрицательных чисел.
    • При необходимости можно комбинировать с динамическим вводом и конвертацией валют через API.

Динамическое обновление данных

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

Пример динамических часов:

const Clock = {
    time: new Date(),
    oninit: () => {
        setInterval(() => {
            Clock.time = new Date();
            m.redraw();
        }, 1000);
    },
    view: () => {
        const formatted = new Intl.DateTimeFormat("ru-RU", {
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit"
        }).format(Clock.time);
        return m("div", formatted);
    }
};

m.mount(document.body, Clock);
  • m.redraw() инициирует повторный рендер компонента.
  • Форматирование происходит при каждом обновлении, что обеспечивает актуальное отображение времени.

Стилизация и отображение

Mithril позволяет комбинировать форматированные данные с HTML и CSS. Для чисел и валют удобно использовать семантические теги <span> и классы для выделения, например, валюты жирным шрифтом или цветом.

view: () => m("div", [
    m("span.currency", formattedCurrency),
    m("span.note", " — сумма к оплате")
])
  • Легкая интеграция с CSS-фреймворками.
  • Позволяет строить наглядные интерфейсы с финансовыми или аналитическими данными.

Практические советы

  • Для сложных сценариев, таких как временные зоны или нестандартные форматы валют, лучше подключать специализированные библиотеки (luxon, numeral.js, accounting.js).
  • Всегда учитывать локаль при отображении дат и чисел, чтобы интерфейс был интуитивно понятен пользователю.
  • Использовать виртуальный DOM Mithril для минимизации перерисовок при динамических обновлениях, особенно в таблицах и панелях мониторинга.

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

Оглавление