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

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

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

В Slim.js форматирование чисел чаще всего выполняется через фильтры или собственные методы компонента, которые вызываются внутри шаблонной привязки.

Основные задачи форматирования чисел:

  • Ограничение количества десятичных знаков.
  • Добавление разделителей тысяч.
  • Форматирование в валюту.
  • Локализованное представление чисел.

Пример использования метода для форматирования чисел внутри компонента:

class NumberFormatter extends Slim {
    get useShadow() { return false }

    formatNumber(value, decimals = 2) {
        if (typeof value !== 'number') return value;
        return value.toLocaleString(undefined, {
            minimumFractionDigits: decimals,
            maximumFractionDigits: decimals
        });
    }
}

Slim.tag('number-formatter', NumberFormatter);

Шаблон компонента:

<number-formatter>
    <div>{{ formatNumber(1234567.891) }}</div>
</number-formatter>

Вывод будет локализованным, например: 1,234,567.89 (для en-US) или 1 234 567,89 (для ru-RU).

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

Метод toLocaleString позволяет форматировать числа в валюту, указав валюту и стиль:

formatCurrency(value, currency = 'USD') {
    return value.toLocaleString(undefined, {
        style: 'currency',
        currency
    });
}

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

<div>{{ formatCurrency(12345.67, 'EUR') }}</div>

Результат: €12,345.67.

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

Slim.js не содержит встроенных средств для работы с датами, поэтому обычно используют стандартный объект Date и методы Intl.DateTimeFormat.

Локализованное форматирование даты

formatDate(date, options = {}) {
    if (!(date instanceof Date)) date = new Date(date);
    return new Intl.DateTimeFormat(undefined, options).format(date);
}

Пример с настройкой формата:

<div>{{ formatDate('2026-01-17', { year: 'numeric', month: 'long', day: 'numeric' }) }}</div>

Вывод: 17 января 2026 (для ru-RU).

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

Можно отдельно форматировать время:

formatTime(date, options = { hour: '2-digit', minute: '2-digit', second: '2-digit' }) {
    if (!(date instanceof Date)) date = new Date(date);
    return new Intl.DateTimeFormat(undefined, options).format(date);
}

Пример:

<div>{{ formatTime(new Date()) }}</div>

Результат будет зависеть от локали, например: 14:30:45.

Комбинированные форматы

Для отображения даты и времени вместе:

formatDateTime(date) {
    return new Intl.DateTimeFormat(undefined, {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    }).format(new Date(date));
}

Вывод: 17 января 2026, 14:30.

Привязка формата к свойствам

Slim.js позволяет автоматически обновлять формат при изменении данных через реактивные свойства. Например:

class PriceDisplay extends Slim {
    static get observedAttributes() { return ['price'] }

    get price() { return parseFloat(this.getAttribute('price')) }
    set price(val) { this.setAttribute('price', val) }

    get useShadow() { return false }

    formatPrice() {
        return this.price.toLocaleString(undefined, {
            style: 'currency',
            currency: 'USD'
        });
    }
}

Slim.tag('price-display', PriceDisplay);

HTML:

<price-display price="1234.56"></price-display>

Элемент автоматически отобразит: $1,234.56.

Пользовательские фильтры

Для повторного использования форматирования в Slim.js можно создать фильтры:

Slim.filter('currency', function(value, currency = 'USD') {
    return Number(value).toLocaleString(undefined, {
        style: 'currency',
        currency
    });
});

Slim.filter('date', function(value, options) {
    return new Intl.DateTimeFormat(undefined, options).format(new Date(value));
});

Использование в шаблоне:

<div>{{ 1234.56 | currency('EUR') }}</div>
<div>{{ '2026-01-17' | date({ day: 'numeric', month: 'short' }) }}</div>

Результат: €1,234.56 и 17 янв.

Рекомендации по форматированию

  • Использовать Intl для поддержки локализации и корректного отображения чисел и дат.
  • Для повторяющихся форматов создавать методы компонента или фильтры, чтобы не дублировать код.
  • Разделять логику форматирования и отображения: шаблон отвечает только за визуальное представление, а методы компонента за преобразование данных.
  • Всегда проверять тип значения перед форматированием, чтобы избежать ошибок при некорректных данных.

Такой подход обеспечивает единообразное форматирование чисел и дат во всём приложении, позволяет легко менять локаль и формат без изменения логики шаблонов и обеспечивает чистоту кода в компонентах Slim.js.

Оглавление