Обновление настроек валюты

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

Внутренне AutoNumeric разделяет сырые значения (raw value) и отформатированные значения (formatted value), что позволяет изменять валютное отображение без потери данных.

Ключевые параметры валютного форматирования

Основные опции, влияющие на валютное отображение:

currencySymbol

Определяет символ валюты:

currencySymbol: '$'

Поддерживаются любые строки, включая мультисимвольные обозначения:

currencySymbol: '€'
currencySymbol: 'USD '

currencySymbolPlacement

Определяет расположение символа относительно числа:

  • p — префикс
  • s — суффикс
currencySymbolPlacement: 'p'

Примеры:

  • $1000
  • 1000 €

digitGroupSeparator

Разделитель тысячных групп:

digitGroupSeparator: ','

Варианты:

  • , (английский стиль)
  • . (европейский стиль)
  • пробел ' ' (ISO-стиль)

decimalCharacter

Символ десятичного разделителя:

decimalCharacter: '.'

decimalPlacesOverride

Определяет фиксированное количество знаков после запятой:

decimalPlacesOverride: 2

roundingMethod

Метод округления:

  • S — half-up
  • U — ceiling
  • D — floor
  • B — bankers rounding
roundingMethod: 'S'

Обновление валютных настроек через upd ate()

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

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

Изменение валюты:

anElement.update({
    currencySymbol: '€',
    currencySymbolPlacement: 'p',
    decimalCharacter: ',',
    digitGroupSeparator: ' '
});

После вызова update():

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

Переключение валют в реальном времени

Типичный сценарий — переключение между валютами (USD → EUR → KZT).

function setUSD(an) {
    an.update({
        currencySymbol: '$',
        currencySymbolPlacement: 'p',
        decimalCharacter: '.',
        digitGroupSeparator: ',',
        decimalPlacesOverride: 2
    });
}

function setEUR(an) {
    an.update({
        currencySymbol: '€',
        currencySymbolPlacement: 's',
        decimalCharacter: ',',
        digitGroupSeparator: ' ',
        decimalPlacesOverride: 2
    });
}

Вызов переключения:

setEUR(anElement);

Обновление валюты без потери значения

AutoNumeric сохраняет числовое значение в неизменном виде, даже при смене формата.

Пример:

anElement.se t(12345.67);

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

  • $12,345.67

После обновления:

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

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

  • €12 345,67

При этом raw value остаётся:

anElement.getNumber(); // 12345.67

Пересчёт отображения через reformat()

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

anElement.reformat();

Это используется, если:

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

Массовое обновление валютных настроек

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

const fields = AutoNumeric.multiple('.price-field');

fields.forEach(an => {
    an.update({
        currencySymbol: '€',
        currencySymbolPlacement: 's',
        decimalCharacter: ',',
        digitGroupSeparator: ' '
    });
});

Такая схема применяется в:

  • корзинах интернет-магазинов
  • финансовых таблицах
  • формах расчётов

Динамическое переключение конфигураций через пресеты

Часто валютные настройки группируются в конфигурационные профили.

const currencyProfiles = {
    USD: {
        currencySymbol: '$',
        currencySymbolPlacement: 'p',
        decimalCharacter: '.',
        digitGroupSeparator: ',',
        decimalPlacesOverride: 2
    },
    EUR: {
        currencySymbol: '€',
        currencySymbolPlacement: 's',
        decimalCharacter: ',',
        digitGroupSeparator: ' ',
        decimalPlacesOverride: 2
    },
    KZT: {
        currencySymbol: '₸',
        currencySymbolPlacement: 's',
        decimalCharacter: ',',
        digitGroupSeparator: ' ',
        decimalPlacesOverride: 0
    }
};

Применение:

anElement.update(currencyProfiles.KZT);

Влияние обновления на ввод пользователя

При изменении валютных настроек во время активного ввода происходит перерасчёт отображения:

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

Особенно важно при изменении:

  • decimalCharacter
  • digitGroupSeparator
  • currencySymbolPlacement

Особенности поведения при смене символа валюты

Изменение currencySymbol не влияет на числовую часть значения, но влияет на визуальное позиционирование.

Пример:

anElement.update({
    currencySymbol: 'USD ',
    currencySymbolPlacement: 'p'
});

или

anElement.update({
    currencySymbol: ' USD',
    currencySymbolPlacement: 's'
});

В обоих случаях raw value остаётся идентичным.

Комбинированное обновление валютных правил

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

anElement.update({
    currencySymbol: 'CHF',
    currencySymbolPlacement: 'p',
    decimalCharacter: '.',
    digitGroupSeparator: "'",
    decimalPlacesOverride: 2,
    roundingMethod: 'S'
});

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

Синхронизация с внешними источниками данных

При получении валютных настроек с backend выполняется прямое применение конфигурации:

fetch('/api/currency-settings')
    .then(res => res.json())
    .then(config => {
        anElement.update(config);
    });

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

Поведение при частичном обновлении настроек

Метод update() поддерживает частичную замену параметров. Если передан неполный объект, остальные значения сохраняются:

anElement.update({
    currencySymbol: '€'
});

Остальные параметры (разделители, округление) остаются прежними.

Влияние обновления на производительность

AutoNumeric оптимизирован для быстрого перерасчёта форматирования:

  • обновление выполняется синхронно
  • перерасчёт происходит только для изменённых параметров
  • DOM перерисовывается минимально необходимым образом

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

Оглавление