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

Американский формат чисел (US number format) базируется на двух ключевых правилах представления числовых значений: использование запятой в качестве разделителя тысяч и точки в качестве десятичного разделителя. Такая система отличается от европейской, где роли этих символов обычно противоположны.

Базовая структура чисел

В американской нотации число 1234567.89 записывается как:

1,234,567.89

Ключевые элементы:

  • Разделитель тысяч: ,
  • Десятичный разделитель: .
  • Группировка разрядов: каждые 3 цифры слева от десятичной точки

AutoNumeric строго придерживается этой логики при соответствующей конфигурации, обеспечивая корректное отображение и ввод чисел в input-полях.

Денежный формат (USD)

В контексте финансов американский формат почти всегда связан с валютой USD. Визуальное представление включает символ $, который может размещаться слева от числа:

  • $1,000.00
  • $12,345,678.90

Особенности отображения:

  • символ валюты обычно стоит слева без пробела
  • дробная часть фиксируется до 2 знаков
  • отрицательные значения часто отображаются со знаком минус перед символом валюты: -$1,250.00

Настройка AutoNumeric под американский формат

AutoNumeric предоставляет набор параметров, позволяющих полностью воспроизвести американскую нотацию.

Ключевые настройки:

  • digitGroupSeparator: ','
  • decimalCharacter: '.'
  • currencySymbol: '$'
  • currencySymbolPlacement: 'p' (prefix)
  • decimalPlaces: 2

Пример базовой конфигурации:

AutoNumeric.init('.usd-input', {
  digitGroupSeparator: ',',
  decimalCharacter: '.',
  decimalPlaces: 2,
  currencySymbol: '$',
  currencySymbolPlacement: 'p'
});

Такая конфигурация обеспечивает поведение, полностью совпадающее с US formatting rules.

Поведение ввода и отображения

AutoNumeric разделяет внутреннее значение и отображаемое представление.

Пример:

Пользователь вводит:

1234567.89

Отображается:

$1,234,567.89

При этом внутреннее значение (unformatted) остаётся числовым:

1234567.89

Это важно для интеграции с API, вычислениями и отправкой данных на сервер.

Разделители и их роль

В американском формате критически важно строгое различие символов:

  • запятая , — только для группировки тысяч
  • точка . — только для дробной части

AutoNumeric автоматически предотвращает ввод некорректных комбинаций, таких как:

  • двойные десятичные точки: 123.45.67
  • неправильные разделители: 1.234.567,89 (европейский формат)

Отрицательные значения

AutoNumeric поддерживает несколько моделей отображения отрицательных чисел в американском формате.

  1. Стандартный вариант:
-$1,200.00
  1. Альтернативный accounting style:
$1,200.00-

Настройка:

AutoNumeric.init('.usd-input', {
  digitGroupSeparator: ',',
  decimalCharacter: '.',
  currencySymbol: '$',
  currencySymbolPlacement: 'p',
  negativeSignCharacter: '-'
});

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

Работа с decimal places

В американских финансовых системах чаще всего фиксируется 2 знака после точки.

AutoNumeric позволяет:

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

Пример:

AutoNumeric.init('.usd-input', {
  decimalPlaces: 2,
  decimalPlacesShownOnFocus: 4,
  roundingMethod: 'S'
});

Такой подход полезен при вводе финансовых данных, где требуется повышенная точность на этапе редактирования.

Маскирование и форматирование в реальном времени

AutoNumeric применяет форматирование непосредственно во время ввода:

  • вводимые цифры автоматически группируются
  • разделители вставляются динамически
  • пользователь работает с «чистым» числом, но видит отформатированное значение

Пример поведения:

Ввод Отображение
1 1
12 12
1234 1,234
1234567 1,234,567

Извлечение значения (unformat)

Для получения числового значения используется метод getNumber():

const anElement = AutoNumeric.getAutoNumericElement('.usd-input');

const value = anElement.getNumber();

Результат:

1234567.89

Без символа валюты и без разделителей.

Обновление значений программно

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

anElement.set(9876543.21);

Отображение:

$9,876,543.21

Глобальная конфигурация для американского формата

Для крупных приложений удобно задавать глобальные настройки:

AutoNumeric.setGlobal({
  digitGroupSeparator: ',',
  decimalCharacter: '.',
  decimalPlaces: 2,
  currencySymbol: '$',
  currencySymbolPlacement: 'p'
});

Все новые экземпляры наследуют данные параметры, если не переопределены локально.

Особенности интеграции в формы

При использовании нескольких полей в американском формате важно учитывать:

  • синхронизацию значений перед отправкой формы
  • отключение форматирования при сериализации данных
  • обработку пустых значений как null или 0

Пример сбора данных:

const inputs = document.querySelectorAll('.usd-input');

const data = Array.from(inputs).map(el => {
  const an = AutoNumeric.getAutoNumericElement(el);
  return an.getNumber();
});

Типичные ошибки при настройке

Часто встречающиеся проблемы:

  • использование . как разделителя тысяч вместо ,
  • конфликт локалей при серверной обработке
  • попытка вручную форматировать значение вместе с AutoNumeric
  • несоответствие backend-формата и frontend-отображения

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

Поведение при вставке значений

При вставке данных из буфера обмена библиотека:

  • очищает недопустимые символы
  • приводит значение к числовому виду
  • применяет американский формат отображения

Пример:

Вставка:

"1.234.567,89"

Результат в US формате:

$1,234,567.89

(при условии корректной конфигурации обработки разделителей)

Совместимость с API и JSON

AutoNumeric всегда отделяет UI-формат от данных:

  • UI: $1,234.56
  • JSON: 1234.56

Это критично для:

  • REST API
  • финансовых расчётов
  • серверной валидации

Поведение при ошибочном вводе

AutoNumeric блокирует:

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

При этом не ломает ввод, а корректирует его в реальном времени, сохраняя UX стабильным.

Итоговая модель американского формата в AutoNumeric

Вся система строится вокруг трёх принципов:

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

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

Оглавление