Создание собственных настроек валют

Библиотека AutoNumeric построена вокруг идеи конфигурируемого форматирования чисел через единый объект настроек. Любая валютная специфика — символ, позиция, разделители, точность, правила округления — не является жёстко заданной, а формируется через параметры и их комбинации.

Создание собственных валютных настроек опирается на переопределение стандартного профиля и расширение его через пользовательские поля. В результате формируется набор правил, который может описывать практически любую денежную систему: от классических USD/EUR до локальных и нестандартных форматов.

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

Структура валютного профиля

Базовый валютный профиль в AutoNumeric включает несколько групп параметров:

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

Пример минимальной структуры:

const currencyConfig = {
  currencySymbol: "$",
  currencySymbolPlacement: "p", // prefix
  decimalCharacter: ".",
  digitGroupSeparator: ",",
  decimalPlaces: 2
};

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

Создание базового пользовательского валютного формата

Создание собственного формата начинается с инициализации экземпляра AutoNumeric с кастомным объектом настроек.

const element = document.querySelector("#amount");

new AutoNumeric(element, {
  currencySymbol: "₸",
  currencySymbolPlacement: "s",
  decimalCharacter: ".",
  digitGroupSeparator: " ",
  decimalPlaces: 2
});

В данном случае формируется формат, характерный для тенге:

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

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

Переиспользуемые конфигурации и фабрика профилей

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

const createCurrencyProfile = ({ symbol, decimals, position }) => ({
  currencySymbol: symbol,
  currencySymbolPlacement: position,
  decimalCharacter: ".",
  digitGroupSeparator: ",",
  decimalPlaces: decimals
});

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

const usd = createCurrencyProfile({
  symbol: "$",
  decimals: 2,
  position: "p"
});

const chf = createCurrencyProfile({
  symbol: "CHF ",
  decimals: 2,
  position: "p"
});

Далее профили передаются в AutoNumeric без изменений.

Расширенные параметры валютного поведения

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

Управление округлением

{
  decimalPlaces: 2,
  roundingMethod: "S", // стандартное математическое округление
}

В пользовательских валютных настройках часто требуется различное округление:

  • банковское
  • математическое
  • округление вниз/вверх

Управление значением при вводе

{
  minimumValue: "0",
  maximumValue: "999999999.99"
}

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

Поддержка локальных форматов валют

Разные страны используют разные соглашения отображения чисел, и это напрямую отражается в конфигурации.

Европейский формат

{
  currencySymbol: "€",
  currencySymbolPlacement: "p",
  decimalCharacter: ",",
  digitGroupSeparator: ".",
  decimalPlaces: 2
}

Британский формат

{
  currencySymbol: "£",
  currencySymbolPlacement: "p",
  decimalCharacter: ".",
  digitGroupSeparator: ",",
  decimalPlaces: 2
}

Локальные нестандартные форматы

В некоторых интерфейсах требуется комбинированный подход:

{
  currencySymbol: "руб.",
  currencySymbolPlacement: "s",
  decimalCharacter: ",",
  digitGroupSeparator: " ",
  decimalPlaces: 0
}

Такая конфигурация характерна для интерфейсов без дробной части.

Динамическая смена валютного профиля

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

const anElement = new AutoNumeric("#price", {
  currencySymbol: "$",
  decimalPlaces: 2
});

anElement.update({
  currencySymbol: "€",
  decimalCharacter: ",",
  digitGroupSeparator: "."
});

Это позволяет реализовывать:

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

Наследование и комбинирование настроек

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

const baseCurrency = {
  decimalCharacter: ".",
  digitGroupSeparator: ",",
  decimalPlaces: 2
};

const usdProfile = {
  ...baseCurrency,
  currencySymbol: "$",
  currencySymbolPlacement: "p"
};

const cadProfile = {
  ...baseCurrency,
  currencySymbol: "CA$",
  currencySymbolPlacement: "p"
};

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

Обработка пользовательского ввода в валютных настройках

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

Игнорирование некорректных символов

{
  allowDecimalPadding: true,
  modifyValueOnWheel: false
}

Автоматическое форматирование при потере фокуса

{
  watchExternalChanges: true,
  formatOnPageLoad: true
}

Интеграция пользовательских валют в формы

При использовании в формах важен момент сериализации данных.

const anElement = new AutoNumeric("#amount", {
  currencySymbol: "₸",
  decimalPlaces: 2
});

document.querySelector("form").addEventListener("submit", () => {
  const rawValue = anElement.getNumber();
});

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

Создание набора валютных пресетов

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

const currencyPresets = {
  usd: {
    currencySymbol: "$",
    decimalPlaces: 2,
    currencySymbolPlacement: "p"
  },
  eur: {
    currencySymbol: "€",
    decimalPlaces: 2,
    currencySymbolPlacement: "p"
  },
  jpy: {
    currencySymbol: "¥",
    decimalPlaces: 0,
    currencySymbolPlacement: "p"
  }
};

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

new AutoNumeric("#field", currencyPresets.jpy);

Работа с высокой точностью и криптовалютами

Некоторые валюты требуют высокой точности или нестандартного количества знаков после запятой.

{
  currencySymbol: "BTC",
  decimalPlaces: 8,
  decimalCharacter: ".",
  digitGroupSeparator: " "
}

Такая конфигурация позволяет адаптировать AutoNumeric под криптовалютные интерфейсы и финансовые панели.

Объединение валютных правил с бизнес-логикой

В сложных приложениях валютные настройки часто зависят от логики:

function getCurrencyConfig(region) {
  if (region === "KZ") {
    return {
      currencySymbol: "₸",
      decimalPlaces: 2,
      digitGroupSeparator: " "
    };
  }

  if (region === "EU") {
    return {
      currencySymbol: "€",
      decimalPlaces: 2,
      decimalCharacter: ",",
      digitGroupSeparator: "."
    };
  }

  return {
    currencySymbol: "$",
    decimalPlaces: 2
  };
}

Управление форматами в реальном времени

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

function switchCurrency(anElement, config) {
  anElement.update(config);
}

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

Кастомизация поведения символа валюты

Символ валюты может вести себя по-разному:

  • фиксироваться слева или справа
  • быть частью поля или отдельным элементом
  • изменяться динамически
{
  currencySymbol: "USD ",
  currencySymbolPlacement: "p",
  showCurrencySymbolOnFocus: true
}

Это позволяет управлять визуальной плотностью интерфейса.

Формирование масштабируемой системы валютных профилей

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

Типовая структура:

  • базовый профиль
  • региональные профили
  • пользовательские переопределения
  • временные настройки (UI state)

Такой подход позволяет разделить:

  • отображение
  • хранение
  • вычисление

и избежать смешивания логики форматирования с бизнес-операциями.

Оглавление