Настройка стиля вывода

В экосистеме FormatJS ключевую роль играет единообразие представления локализованных данных: чисел, дат, валют, процентов, текста с переменными и вложенной разметкой. Стиль вывода определяется сочетанием механизмов ICU Message Syntax, параметров форматирования и расширений поверх стандартного Intl API. Гибкость достигается за счёт разделения логики сообщений и их визуального представления.

Базовый слой форматирования: Intl API

FormatJS опирается на нативный Intl API, предоставляемый средой выполнения JavaScript. Это означает, что базовые стили вывода зависят от конфигурации форматтеров:

  • Intl.NumberFormat
  • Intl.DateTimeFormat
  • Intl.RelativeTimeFormat
  • Intl.PluralRules

Каждый из них принимает объект опций, который определяет внешний вид результата.

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

  • числовой формат: количество знаков после запятой, группировка разрядов
  • дата: порядок компонентов (день/месяц/год), стиль времени
  • относительное время: форма словесного выражения

FormatJS использует эти возможности, расширяя их через единый слой сообщений.

Форматирование сообщений через ICU Message Syntax

Основной инструмент стилизации текста — ICU Message Format, используемый в intl-messageformat.

Сообщение может включать переменные, селекторы и вложенные структуры:

{count, plural,
  one {# элемент}
  few {# элемента}
  many {# элементов}
}

Стиль вывода здесь определяется не только переводом, но и грамматическими правилами локали.

Ключевые элементы влияния на стиль:

  • plural — формы множественного числа
  • select — выбор варианта строки
  • selectordinal — порядковые числительные
  • интерполяция значений с форматированием

Настройка локали как основа стилистики

Локаль определяет не только язык, но и визуальную структуру представления данных:

  • порядок слов
  • формат дат
  • разделители чисел
  • правила округления и группировки
  • правила склонения

Пример:

ru-RU:
1 234,56
12.05.2026

en-US:
1,234.56
05/12/2026

FormatJS автоматически применяет правила, связанные с выбранной локалью, через провайдеры и контекст.

React Intl и управление стилем через компоненты

В React-экосистеме FormatJS наиболее часто используется react-intl. Основные инструменты стилизации:

  • FormattedMessage
  • FormattedNumber
  • FormattedDate
  • FormattedTime

Каждый компонент принимает набор параметров, влияющих на внешний вид вывода.

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

<FormattedMessage
  id="cart.items"
  values={{ count: 5 }}
/>

Стиль результата зависит от ICU-правил внутри сообщения.

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

<FormattedNumber
  value={12345.678}
  style="currency"
  currency="USD"
/>

Возможные стили:

  • decimal
  • currency
  • percent
  • unit

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

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

<FormattedDate
  value={Date.now()}
  year="numeric"
  month="long"
  day="2-digit"
/>

Стиль задаётся через комбинацию параметров:

  • year
  • month
  • day
  • hour
  • minute
  • second

Также применяются preset-стили:

  • short
  • medium
  • long
  • full

Переопределение стандартных форматов

FormatJS позволяет задавать глобальные форматы, влияющие на единообразие стиля во всём приложении.

<IntlProvider
  locale="ru"
  defaultFormats={{
    number: {
      currency: {
        style: 'currency',
        currency: 'RUB',
        minimumFractionDigits: 2
      }
    }
  }}
>

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

Управление форматами через defineMessages

defineMessages используется для структурирования сообщений и их стиля:

const messages = defineMessages({
  price: {
    id: 'product.price',
    defaultMessage: '{value, number, currency}'
  }
});

Здесь стиль числа встроен непосредственно в ICU-синтаксис, что делает форматирование частью текстового шаблона.

Rich Text Formatting и стилизация элементов

FormatJS поддерживает вложенную разметку через функции в values, позволяя управлять визуальным стилем фрагментов текста.

<FormattedMessage
  id="terms"
  values={{
    b: chunks => <strong>{chunks}</strong>,
    link: chunks => <a href="/terms">{chunks}</a>
  }}
/>

ICU-шаблон:

<b>Важно</b>: согласие с <link>условиями</link>

Такой механизм отделяет структуру сообщения от HTML/React-реализации, сохраняя единообразный стиль.

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

FormatJS допускает создание кастомных форматтеров через API IntlProvider.

<IntlProvider
  locale="ru"
  formats={{
    number: {
      compact: {
        notation: 'compact',
        compactDisplay: 'short'
      }
    }
  }}
>

Это позволяет стандартизировать стиль сокращённых чисел:

  • 1 000 → 1K
  • 1 000 000 → 1M

Управление округлением и точностью

Стиль числового вывода часто определяется параметрами округления:

  • minimumFractionDigits
  • maximumFractionDigits
  • roundingMode

Пример влияния:

1.2345 → 1.23 (фиксированная точность)
1.239 → 1.24 (округление)

В FormatJS эти параметры передаются через FormattedNumber или Intl.NumberFormat.

Стилизация валютных значений

Финансовый формат требует строгой стандартизации:

<FormattedNumber
  value={1999.99}
  style="currency"
  currency="EUR"
/>

Элементы стиля:

  • положение символа валюты (до/после числа)
  • разделители тысяч
  • округление до минимальных единиц валюты
  • локальные правила отображения

Управление отображением процентов

<FormattedNumber
  value={0.75}
  style="percent"
/>

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

  • автоматическое умножение на 100
  • добавление символа %
  • контроль количества десятичных знаков

Согласование стиля между компонентами

Единообразие достигается через централизованную конфигурацию:

  • единая IntlProvider настройка
  • переиспользуемые форматы
  • изоляция ICU-сообщений от UI-логики

Стиль становится системным свойством приложения, а не локальной настройкой отдельных компонентов.

Влияние вложенных параметров на визуальный результат

ICU-сообщения могут комбинировать несколько уровней форматирования:

{price, number, currency} за {count, plural, one {# товар} few {# товара} many {# товаров}}

Здесь одновременно применяются:

  • числовой формат валюты
  • правила множественного числа
  • локальные грамматические формы

Форматирование через API без React

Вне React используется IntlMessageFormat:

const msg = new IntlMessageFormat(
  '{price, number, currency} итог',
  'ru'
);

msg.format({ price: 1200 });

Стиль результата определяется:

  • локалью
  • ICU-шаблоном
  • параметрами форматирования

Детерминированность и воспроизводимость стиля

FormatJS обеспечивает предсказуемость вывода за счёт:

  • фиксированных правил ICU
  • стандартов ECMA-402
  • явного описания форматов
  • отсутствия скрытых преобразований

Стиль текста становится результатом декларативного описания, а не императивной логики.

Оглавление