Метод getNumber

Метод getNumber() в библиотеке AutoNumeric предназначен для получения числового значения из форматированного поля в виде объекта Number. Метод удаляет визуальное оформление, разделители групп разрядов, валютные символы, проценты и другие элементы форматирования, возвращая стандартное числовое значение JavaScript.

Основная задача метода — преобразование пользовательского ввода в число, пригодное для математических вычислений, сравнений, отправки на сервер и работы с бизнес-логикой приложения.

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

anElement.getNumber();

Где:

  • anElement — экземпляр AutoNumeric
  • результат — число типа Number

Простейший пример

<input id="price">
const price = new AutoNumeric('#price', {
    currencySymbol: '$',
    digitGroupSeparator: ',',
    decimalCharacter: '.'
});

price.set('12345.67');

console.log(price.getNumber());

Результат:

12345.67

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

$12,345.67

метод возвращает чистое число.

Отличие getNumber() от getNumericString()

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

getNumber()

Возвращает:

Number

Пример:

12345.67

getNumericString()

Возвращает:

String

Пример:

"12345.67"

Почему это важно

JavaScript имеет ограничения точности чисел типа Number.

Например:

const value = 9999999999999999;

console.log(value);

Результат:

10000000000000000

Из-за этого:

  • getNumber() подходит для обычных финансовых расчётов

  • getNumericString() предпочтителен для:

    • больших чисел
    • банковских систем
    • криптовалют
    • высокоточной арифметики
    • работы с BigInt
    • серверных вычислений

Внутренний механизм работы

При вызове getNumber() библиотека выполняет несколько этапов:

1. Получение форматированного значения

Например:

€ 1.234.567,89

2. Удаление форматирующих символов

Удаляются:

  • валюты
  • пробелы
  • разделители тысяч
  • суффиксы
  • префиксы

Получается:

1234567,89

3. Нормализация десятичного разделителя

1234567.89

4. Преобразование в Number

1234567.89

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

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

amount.set('-5432.10');

console.log(amount.getNumber());

Результат:

-5432.1

Работа с процентами

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

percent.set('12.5');

console.log(percent.getNumber());

Результат:

12.5

Символ % автоматически исключается.

Работа с валютами

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

salary.set('850000');

console.log(salary.getNumber());

Результат:

850000

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

Одно из главных преимуществ getNumber() — немедленная готовность значения к арифметическим операциям.

Сложение

const price1 = an1.getNumber();
const price2 = an2.getNumber();

const total = price1 + price2;

console.log(total);

Вычитание

const balance = income.getNumber() - expense.getNumber();

Умножение

const tax = amount.getNumber() * 0.12;

Деление

const average = total.getNumber() / count.getNumber();

Проблема плавающей точки

Поскольку метод возвращает тип Number, проявляются стандартные особенности IEEE 754.

Пример:

const a = 0.1;
const b = 0.2;

console.log(a + b);

Результат:

0.30000000000000004

То же возможно и при использовании getNumber():

const total =
    field1.getNumber() +
    field2.getNumber();

Способы минимизации ошибок

Округление

const result = Number(
    (field.getNumber() * 1.15).toFixed(2)
);

Использование decimal-библиотек

Например:

  • Decimal.js
  • Big.js
  • BigNumber.js
const value = new Decimal(field.getNumericString());

Такой подход безопаснее для финансовых приложений.

Возврат null

В некоторых конфигурациях пустое поле может возвращать null.

Пример:

const value = anElement.getNumber();

console.log(value);

Результат:

null

Это зависит от настроек:

emptyInputBehavior

Проверка на null

const value = amount.getNumber();

if (value !== null) {
    console.log(value * 2);
}

Работа с NaN

Некорректные данные могут привести к:

NaN

Проверка:

const value = anElement.getNumber();

if (Number.isNaN(value)) {
    console.log('Ошибка числа');
}

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

Отправка на сервер

form.addEventListener('submit', () => {
    const payload = {
        amount: amountField.getNumber(),
        tax: taxField.getNumber()
    };

    console.log(payload);
});

Результат:

{
  "amount": 1500,
  "tax": 180
}

Интеграция с AJAX

fetch('/api/payment', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        amount: payment.getNumber()
    })
});

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

const value = autoNumericRef.current.getNumber();

setPrice(value);

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

const total = autoNumericInstance.getNumber();

this.amount = total;

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

const amount: number = this.autoNumeric.getNumber();

Работа с несколькими полями

const subtotal = subtotalField.getNumber();
const shipping = shippingField.getNumber();
const discount = discountField.getNumber();

const total =
    subtotal +
    shipping -
    discount;

console.log(total);

Автоматический пересчёт

function updateTotal() {
    const total =
        qty.getNumber() *
        price.getNumber();

    result.set(total);
}

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

let sum = 0;

fields.forEach(field => {
    sum += field.getNumber();
});

console.log(sum);

Получение числа из DOM-элемента

const anElement = AutoNumeric.getAutoNumericElement('#price');

const value = anElement.getNumber();

Сравнение с get()

get()

Возвращает строку:

"1234.56"

getNumber()

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

1234.56

Когда использовать getNumber()

Метод особенно удобен в следующих случаях:

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

Когда getNumber() использовать нежелательно

Метод не рекомендуется для:

  • сверхбольших чисел
  • высокоточных финансовых систем
  • криптовалют
  • бухгалтерии высокой точности
  • scientific-computing
  • работы с BigInt
  • хранения точных денежных значений

В подобных случаях безопаснее:

getNumericString()

Особенности преобразования

Потеря завершающих нулей

anElement.set('12.500');

console.log(anElement.getNumber());

Результат:

12.5

Тип Number не хранит форматирование.

Экспоненциальная запись

Большие числа могут отображаться так:

1.23e+21

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

getNumber() работает очень быстро, поскольку:

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

Метод подходит даже для:

  • realtime-калькуляторов
  • live-таблиц
  • частых событий input
  • динамических интерфейсов

Частые ошибки

Ошибка №1 — ожидание строки

const value = anElement.getNumber();

console.log(value.trim());

Ошибка:

value.trim is not a function

Причина:

getNumber() возвращает число.

Ошибка №2 — использование для точной валютной арифметики

0.1 + 0.2

Проблема связана не с AutoNumeric, а с типом Number.

Ошибка №3 — отсутствие проверки пустого значения

const total = field.getNumber() * 2;

Если поле пустое:

null * 2

Безопасный шаблон использования

const value = field.getNumber();

if (
    value !== null &&
    !Number.isNaN(value)
) {
    console.log(value);
}

Комбинирование с set()

const current = amount.getNumber();

amount.set(current + 100);

Практический пример калькулятора

<input id="price">
<input id="qty">
<input id="total">
const price = new AutoNumeric('#price');
const qty = new AutoNumeric('#qty', {
    decimalPlaces: 0
});
const total = new AutoNumeric('#total');

function recalc() {
    const result =
        price.getNumber() *
        qty.getNumber();

    total.set(result);
}

document
    .querySelector('#price')
    .addEventListener('input', recalc);

document
    .querySelector('#qty')
    .addEventListener('input', recalc);

Практический пример НДС

const amount = subtotal.getNumber();

const vat = amount * 0.12;

const finalPrice = amount + vat;

console.log(finalPrice);

Практический пример скидок

const original = price.getNumber();
const discount = percent.getNumber();

const result =
    original -
    (original * discount / 100);

console.log(result);

Практический пример кредитного расчёта

const principal = loan.getNumber();
const rate = interest.getNumber();

const payment =
    principal * (1 + rate / 100);

console.log(payment);

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

Метод getNumber() поддерживается:

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Opera

и всеми современными версиями AutoNumeric.

Поведение при локализации

Независимо от локали результат всегда приводится к стандартному JavaScript-числу.

Французский формат

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

1 234 567,89 €

Результат:

1234567.89

Немецкий формат

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

1.234.567,89 €

Результат:

1234567.89

Связь с внутренним состоянием AutoNumeric

Метод работает не напрямую с DOM-строкой, а с внутренним нормализованным представлением значения. Это позволяет:

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

Краткая сводка поведения

Ситуация Результат
$1,234.56 1234.56
12 % 12
-5 000 -5000
пустое поле null
неверное значение NaN
12.500 12.5
Оглавление