Метод getFormatted

Метод getFormatted предназначен для получения текущего значения поля ввода, отформатированного в соответствии с правилами и настройками, установленными при инициализации экземпляра AutoNumeric. В отличие от метода get, который возвращает числовое значение в виде number или string без форматирования, getFormatted всегда возвращает строку, полностью подготовленную к отображению пользователю.

Синтаксис

const formattedValue = autoNumericInstance.getFormatted();

• autoNumericInstance — объект AutoNumeric, созданный с помощью конструктора new AutoNumeric(element, options) или через селектор.
• Возвращаемое значение — строка, соответствующая текущему формату числа, включая разделители тысяч, символ валюты, знак процента или другие настройки форматирования.

Особенности работы метода

1. Форматирование по текущим настройкам: getFormatted учитывает все параметры конфигурации, включая:

   • digitGroupSeparator — разделитель тысяч.
   • decimalCharacter — символ десятичного разделителя.
   • currencySymbol — символ валюты, если используется режим валюты.
   • suffixText и prefixText — дополнительные текстовые префиксы и суффиксы.
   • decimalPlaces — количество отображаемых знаков после запятой.

2. Возвращаемая строка всегда готова к отображению: Даже если пользователь ввел число без разделителей или с лишними пробелами, getFormatted вернет корректно отформатированное значение.

3. Отличие от метода get:

   • get() возвращает чистое числовое значение без форматирования (например, 1234.5).
   • getFormatted() возвращает отформатированную строку (например, "1,234.50" или "€1,234.50").

Примеры использования

const anElement = new AutoNumeric('#price', {
    currencySymbol: '$',
    decimalPlaces: 2,
    digitGroupSeparator: ',',
    decimalCharacter: '.'
});

// Ввод пользователя: 1234.5
console.log(anElement.get());          // 1234.5
console.log(anElement.getFormatted()); // "$1,234.50"

const percentElement = new AutoNumeric('#tax', {
    suffixText: '%',
    decimalPlaces: 1,
    decimalCharacter: '.'
});

// Ввод пользователя: 12.5
console.log(percentElement.get());          // 12.5
console.log(percentElement.getFormatted()); // "12.5%"

Применение в динамических сценариях

Метод getFormatted особенно полезен при работе с динамическим интерфейсом, где необходимо мгновенно отображать числовые значения в формате, понятном пользователю:

• При обновлении таблиц с финансовыми данными.
• Для отображения результатов расчета на лету.
• Для передачи отформатированных значений в отчеты или интерфейсы, не требующие дальнейшей конвертации.

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

function updateTotal(value) {
    totalElement.set(value);
    document.querySelector('#totalDisplay').textContent = totalElement.getFormatted();
}

updateTotal(9876.543); // Отобразит "€9,876.54"

Важные нюансы

• Метод всегда возвращает строку, поэтому любые дальнейшие арифметические операции нужно производить с помощью метода get() или преобразования строки через parseFloat/parseInt.
• При использовании форматов с локализованными символами разделителей (например, пробел или точка) необходимо учитывать корректное отображение и возможное преобразование при передаче в другие компоненты.
• Если поле AutoNumeric пустое, getFormatted вернет пустую строку, а не null или 0.

Настройки, влияющие на getFormatted

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