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

Polymer — это библиотека для создания веб-компонентов на JavaScript, ориентированная на повторное использование элементов интерфейса. Одним из ключевых аспектов разработки компонентов является правильное отображение и форматирование данных, включая текст и числовые значения. Polymer предоставляет мощные средства для привязки данных и фильтрации их через computed properties и formatters.

Привязка данных и вычисляемые свойства

В Polymer данные между компонентом и DOM связываются с помощью синтаксиса double curly braces ({{ }}) для двусторонней привязки и square brackets ([[ ]]) для односторонней. Для форматирования чисел и текста часто используют вычисляемые свойства:

class MyElement extends Polymer.Element {
  static get is() { return 'my-element'; }

  static get properties() {
    return {
      amount: {
        type: Number,
        value: 0
      },
      formattedAmount: {
        type: String,
        computed: '_formatAmount(amount)'
      }
    };
  }

  _formatAmount(amount) {
    return amount.toLocaleString('ru-RU', { style: 'currency', currency: 'RUB' });
  }
}

customElements.define(MyElement.is, MyElement);

В этом примере свойство formattedAmount автоматически обновляется при изменении amount. Метод _formatAmount использует стандартный JavaScript API toLocaleString, что позволяет отображать числа в формате валюты с учётом локализации.

Использование фильтров и форматтеров

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

_formatText(text) {
  if (!text) return '';
  return text.trim().replace(/\s+/g, ' ');
}

_formatNumber(num) {
  return num.toFixed(2);
}

Применение в шаблоне:

<p>[[ _formatText(description) ]]</p>
<p>[[ _formatNumber(price) ]]</p>

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

  • Методы фильтров вызываются при каждом обновлении зависимых свойств.
  • Фильтры можно комбинировать через цепочку вычисляемых свойств.

Масштабирование и локализация чисел

Для сложных числовых форматов используется объект Intl.NumberFormat:

_formatLocalizedNumber(value) {
  return new Intl.NumberFormat('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value);
}

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

<span>[[ _formatLocalizedNumber(salary) ]] ₽</span>

Это обеспечивает единообразное отображение чисел, включая:

  • десятичные разделители и группы разрядов;
  • фиксированное количество знаков после запятой;
  • локализованное отображение валюты и процентов.

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

Polymer не имеет встроенных дата-форматтеров, но через вычисляемые свойства можно использовать стандарт Intl.DateTimeFormat:

_formatDate(date) {
  if (!date) return '';
  return new Intl.DateTimeFormat('ru-RU', { year: 'numeric', month: 'long', day: 'numeric' }).format(new Date(date));
}

Пример в шаблоне:

<p>Дата публикации: [[ _formatDate(publishedAt) ]]</p>

Преимущества такого подхода:

  • Автоматическая локализация;
  • Поддержка разнообразных форматов;
  • Прозрачная интеграция с привязкой данных Polymer.

Динамическое форматирование на основе условий

Иногда требуется изменять формат в зависимости от условий:

_formatConditionalAmount(amount, isLarge) {
  if (isLarge) {
    return amount.toLocaleString('ru-RU', { notation: 'compact' });
  }
  return amount.toLocaleString('ru-RU');
}

Использование в шаблоне с несколькими аргументами:

<p>[[ _formatConditionalAmount(amount, isLarge) ]]</p>

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

Стиль и визуальное оформление текста

Для форматирования текста на уровне отображения рекомендуется использовать CSS-переменные и миксины Polymer:

:host {
  --text-color: #333;
  --font-size: 16px;
}

p {
  color: var(--text-color);
  font-size: var(--font-size);
  line-height: 1.5;
}

Сочетание привязки данных с CSS-переменными позволяет управлять визуальным стилем текста без изменения логики компонентов.

Сводка ключевых возможностей

  • Вычисляемые свойства позволяют динамически форматировать числа и строки.
  • Методы форматирования могут использовать стандартные API Jav * aScript: toLocaleString, Intl.NumberFormat, Intl.DateTimeFormat.
  • Условное форматирование обеспечивает гибкость при отображении больших данных.
  • CSS-переменные дают полный контроль над визуальным стилем текста и чисел без вмешательства в логику.

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

Оглавление