Метод set для установки значения

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

Метод автоматически:

форматирует переданное значение;
применяет локализацию;
добавляет разделители групп;
учитывает валютные символы;
соблюдает ограничения minimumValue и maximumValue;
обновляет внутреннее состояние экземпляра.

Базовый синтаксис

anElement.set(value);

Где:

anElement — экземпляр AutoNumeric;
value — новое значение.

Простая установка значения

<input id="price">

const price = new AutoNumeric('#price', {
    currencySymbol: '₸ ',
    digitGroupSeparator: ' ',
    decimalCharacter: ','
});

price.set(150000);

Результат в поле:

₸ 150 000

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

Установка строкового значения

Метод способен принимать строку.

price.set('250000');

AutoNumeric преобразует строку во внутренний числовой формат и затем выполнит форматирование.

Установка дробных значений

const amount = new AutoNumeric('#amount', {
    decimalPlaces: 2,
    digitGroupSeparator: ' ',
    decimalCharacter: ','
});

amount.set(1250.75);

Результат:

1 250,75

Автоматическое округление

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

const tax = new AutoNumeric('#tax', {
    decimalPlaces: 2
});

tax.set(15.6789);

Результат:

15.68

Работа с отрицательными значениями

const balance = new AutoNumeric('#balance', {
    currencySymbol: '$',
    negativeBracketsTypeOnBlur: '(,)'
});

balance.set(-5000);

При потере фокуса значение может отображаться так:

($5,000)

Установка нулевого значения

anElement.set(0);

Результат зависит от настроек:

const field = new AutoNumeric('#field', {
    currencySymbol: '€ ',
    decimalPlaces: 2
});

field.set(0);

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

€ 0.00

Установка пустого значения

Для очистки поля обычно используется:

anElement.set('');

или:

anElement.clear();

Разница заключается в том, что clear() предназначен именно для очистки и лучше отражает намерение разработчика.

Передача `null`

Поведение зависит от конфигурации AutoNumeric.

anElement.set(null);

В большинстве случаев поле будет очищено.

Установка значения при загрузке данных

Один из самых распространённых сценариев — загрузка данных из API.

fetch('/api/product/1')
    .then(response => response.json())
    .then(data => {
        price.set(data.price);
    });

Если сервер возвращает:

{
    "price": 349990
}

то поле автоматически покажет форматированное значение.

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

const salary = new AutoNumeric('#salary', {
    currencySymbol: '₽ ',
    digitGroupSeparator: ' '
});

document.querySelector('#fill').addEventListener('click', () => {
    salary.set(120000);
});

Массовое обновление полей

const fields = {
    income: new AutoNumeric('#income'),
    expense: new AutoNumeric('#expense'),
    profit: new AutoNumeric('#profit')
};

fields.income.set(500000);
fields.expense.set(175000);
fields.profit.set(325000);

Использование с вычислениями

const price = new AutoNumeric('#price');
const quantity = new AutoNumeric('#quantity');
const total = new AutoNumeric('#total');

price.set(1200);
quantity.set(5);

const result =
    Number(price.getNumber()) *
    Number(quantity.getNumber());

total.set(result);

Установка значения после AJAX-запроса

async function loadBalance() {
    const response = await fetch('/balance');
    const data = await response.json();

    balance.set(data.amount);
}

Поведение при превышении `maximumValue`

const field = new AutoNumeric('#field', {
    maximumValue: '100'
});

field.set(150);

Поведение зависит от настроек библиотеки и версии AutoNumeric:

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

Поведение при значении меньше `minimumValue`

const field = new AutoNumeric('#field', {
    minimumValue: '0'
});

field.set(-10);

AutoNumeric проверяет диапазон ещё до отображения значения.

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

const usd = new AutoNumeric('#usd', {
    currencySymbol: '$ ',
    currencySymbolPlacement: 'p'
});

usd.set(9999.99);

Результат:

$ 9,999.99

Изменение значения без участия пользователя

Метод set особенно важен в реактивных интерфейсах:

function applyDiscount(percent) {
    const current = Number(price.getNumber());

    const discounted =
        current - (current * percent / 100);

    price.set(discounted);
}

Использование в калькуляторах

const loan = new AutoNumeric('#loan');
const interest = new AutoNumeric('#interest');
const payment = new AutoNumeric('#payment');

function calculate() {
    const l = Number(loan.getNumber());
    const i = Number(interest.getNumber());

    payment.set(l + (l * i / 100));
}

Обновление значений в таблицах

document.querySelectorAll('.price').forEach((element, index) => {
    const an = AutoNumeric.getAutoNumericElement(element);

    an.set(index * 1000);
});

Работа с экземпляром через DOM

const input = document.querySelector('#amount');

const an = new AutoNumeric(input);

an.set(500);

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

const an = new AutoNumeric('#sum');

an.set(1000);

setTimeout(() => {
    an.set(2000);
}, 3000);

Перезапись предыдущего значения

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

an.set(100);
an.set(200);
an.set(300);

Итоговое значение:

Использование вместе с событиями

input.addEventListener('change', () => {
    total.set(5000);
});

Связь между несколькими полями

const netto = new AutoNumeric('#netto');
const tax = new AutoNumeric('#tax');
const brutto = new AutoNumeric('#brutto');

function updateBrutto() {
    const n = Number(netto.getNumber());
    const t = Number(tax.getNumber());

    brutto.set(n + t);
}

Работа с большими числами

const population = new AutoNumeric('#population', {
    digitGroupSeparator: ' '
});

population.set(1234567890);

Результат:

1 234 567 890

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

const percent = new AutoNumeric('#percent', {
    suffixText: ' %',
    decimalPlaces: 1
});

percent.set(12.5);

Результат:

12.5 %

Взаимодействие с `get`

Методы set и get обычно используются вместе.

const amount = new AutoNumeric('#amount');

amount.set(5000);

const value = amount.get();

get() вернёт числовую строку без форматирования.

Отличие `set` от прямого изменения `value`

Неправильный вариант:

input.value = '1000';

В этом случае AutoNumeric:

не выполнит форматирование;
не обновит внутреннее состояние;
может потерять синхронизацию.

Правильный вариант:

an.set(1000);

Использование внутри SPA-приложений

Во фреймворках вроде React, Vue и Angular метод set часто используется после обновления состояния.

watch(priceValue, (newValue) => {
    an.set(newValue);
});

Производительность

Метод set выполняет:

Проверку значения;
Нормализацию;
Валидацию;
Форматирование;
Обновление DOM;
Синхронизацию внутреннего состояния.

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

Плохо:

setInterval(() => {
    an.set(Math.random() * 1000);
}, 10);

Лучше:

requestAnimationFrame(() => {
    an.set(value);
});

Типичные ошибки

Передача форматированной строки

an.set('1 000,50 ₽');

Это может привести к ошибке парсинга.

Предпочтительно:

an.set(1000.50);

или:

an.set('1000.50');

Использование `set` до инициализации

const an;

an.set(100);

Ошибка:

Cannot read properties of undefined

Прямое изменение DOM после `set`

an.set(500);

input.value = '123';

Такое смешивание подходов нарушает внутреннюю логику AutoNumeric.

Возвращаемое значение

Во многих версиях AutoNumeric метод возвращает экземпляр объекта, что позволяет использовать цепочки вызовов.

an.set(1000).select();

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

an.set(1500);

console.log(an.getFormatted());
console.log(an.getNumber());
console.log(an.getNumericString());

Асинхронное обновление интерфейса

async function refreshData() {
    const data = await loadData();

    amount.set(data.total);
}

Обновление после вычислений пользователя

discountInput.addEventListener('input', () => {
    const base = Number(price.getNumber());
    const discount = Number(discountInput.value);

    finalPrice.set(
        base - (base * discount / 100)
    );
});

Сценарии применения метода `set`

Финансовые интерфейсы

банковские приложения;
бухгалтерские системы;
CRM;
ERP;
кассовые панели.

Интернет-магазины

цена товара;
скидки;
итоговая стоимость;
налоги.

Аналитические панели

динамические расчёты;
обновление KPI;
финансовые показатели.

Формы ввода

автоматическое заполнение;
загрузка сохранённых данных;
редактирование профилей;
импорт значений из API.

Метод set для установки значения

Базовый синтаксис

Простая установка значения

Установка строкового значения

Установка дробных значений

Автоматическое округление

Работа с отрицательными значениями

Установка нулевого значения

Установка пустого значения

Передача null

Установка значения при загрузке данных

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

Массовое обновление полей

Использование с вычислениями

Установка значения после AJAX-запроса

Поведение при превышении maximumValue

Поведение при значении меньше minimumValue

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

Изменение значения без участия пользователя

Использование в калькуляторах

Обновление значений в таблицах

Работа с экземпляром через DOM

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

Перезапись предыдущего значения

Использование вместе с событиями

Связь между несколькими полями

Работа с большими числами

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

Взаимодействие с get

Отличие set от прямого изменения value

Использование внутри SPA-приложений

Производительность

Типичные ошибки

Передача форматированной строки

Использование set до инициализации

Прямое изменение DOM после set

Возвращаемое значение

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

Асинхронное обновление интерфейса

Обновление после вычислений пользователя

Сценарии применения метода set

Финансовые интерфейсы

Интернет-магазины

Аналитические панели

Формы ввода

Передача `null`

Поведение при превышении `maximumValue`

Поведение при значении меньше `minimumValue`

Взаимодействие с `get`

Отличие `set` от прямого изменения `value`

Использование `set` до инициализации

Прямое изменение DOM после `set`

Сценарии применения метода `set`