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

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

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

Использование Intl.DateTimeFormat

Пример создания форматированного отображения даты:

const date = new Date();
const formatter = new Intl.DateTimeFormat('ru-RU', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});

console.log(formatter.format(date)); // 24 декабря 2025

Этот код создает экземпляр Intl.DateTimeFormat, который форматирует дату в виде “24 декабря 2025”. Важно отметить, что можно указать параметры, такие как год, месяц, день и даже время, чтобы достичь необходимого формата. Также можно использовать сокращенные варианты месяцев или дней недели.

Локализация даты

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

const date = new Date();
const formatter = new Intl.DateTimeFormat(navigator.language, {
  year: 'numeric',
  month: 'short',
  day: '2-digit',
});

console.log(formatter.format(date)); // 24 дек. 2025

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

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

Для отображения времени также можно использовать Intl.DateTimeFormat. Например, для отображения времени в 24-часовом формате:

const time = new Date();
const timeFormatter = new Intl.DateTimeFormat('ru-RU', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
});

console.log(timeFormatter.format(time)); // 14:30:45

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

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

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

Использование Intl.NumberFormat

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

const number = 1234567.89;
const numberFormatter = new Intl.NumberFormat('ru-RU');

console.log(numberFormatter.format(number)); // 1 234 567,89

Этот код отформатирует число с учетом российских стандартов: с разделением тысяч пробелами и запятой в качестве десятичного разделителя.

Форматирование чисел с фиксированным количеством знаков после запятой

Можно также установить количество знаков после запятой:

const number = 1234.5678;
const formatter = new Intl.NumberFormat('ru-RU', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

console.log(formatter.format(number)); // 1 234,57

Этот код округлит число до двух знаков после запятой.

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

При работе с денежными суммами можно использовать Intl.NumberFormat с параметром для валюты. Это особенно полезно для создания интерфейсов с поддержкой нескольких валют.

const amount = 1000.5;
const currencyFormatter = new Intl.NumberFormat('ru-RU', {
  style: 'currency',
  currency: 'RUB',
});

console.log(currencyFormatter.format(amount)); // 1 000,50 ₽

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

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

Для отображения чисел в виде процентов можно использовать стиль percent:

const percentage = 0.85;
const percentFormatter = new Intl.NumberFormat('ru-RU', {
  style: 'percent',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

console.log(percentFormatter.format(percentage)); // 85,00%

Этот подход помогает легко работать с процентными значениями в интерфейсах, например, для прогресс-баров или отчетных данных.

Использование сторонних библиотек

Несмотря на мощь стандартных возможностей JavaScript, для более сложных случаев форматирования, таких как работа с временными зонами или специфическими форматами, могут быть полезны сторонние библиотеки, такие как moment.js или date-fns. Они предоставляют расширенные функции, такие как манипуляции с датами, вычисления временных интервалов и гибкие настройки форматов.

Пример с использованием date-fns

import { format } from 'date-fns';
import { ru } from 'date-fns/locale';

const date = new Date();
const formattedDate = format(date, 'd MMMM yyyy', { locale: ru });

console.log(formattedDate); // 24 декабря 2025

Библиотека date-fns позволяет значительно упростить форматирование и манипуляции с датами, особенно если проект требует работы с датами в различных временных зонах или форматах.

Интеграция с Stencil

Для работы с форматированием данных в компонентах Stencil можно использовать встроенные методы и API JavaScript, а также интегрировать сторонние библиотеки, чтобы обеспечить поддержку локализации, точности и сложных форматов.

Пример компонента Stencil, который отображает форматированную дату:

import { Component, h } from '@stencil/core';

@Component({
  tag: 'formatted-date',
  shadow: true,
})
export class FormattedDate {
  render() {
    const date = new Date();
    const formatter = new Intl.DateTimeFormat('ru-RU', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    });
    return (
      <div>
        {formatter.format(date)}
      </div>
    );
  }
}

Этот компонент отображает дату в формате “24 декабря 2025” и использует стандартное API JavaScript для форматирования.

Заключение

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

Оглавление