разбивка чисел на разряды в калькуляторе на js

Рейтинг: 0Ответов: 1Опубликовано: 22.02.2023

Подскажите пожалуйста как разбить число которое вводится в input на разряды так чтобы она работала с математическими операциями. Сейчас калькулятор работает нормально. Когда разбиваю число перестает работать. Выдает NaN.

Вот функция которая разбивает числа на разряды.

function discharge(){
  $('input').val(String($('input').val().replace(/[^0-9.]/g,'')).replace(/\B(?=(\d{3})+(?!\d))/g, " "));
}
discharge();
$('input').keyup(function(){
  discharge();
});
javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 0

Функция discharge() в вашем коде производит замену всех символов, кроме цифр и точки, на пустую строку. Затем она форматирует строку ввода, добавляя пробелы между каждыми тремя цифрами с помощью регулярного выражения.

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

Вы можете модифицировать функцию discharge() следующим образом, чтобы она возвращала правильный формат числа:

function discharge() {
  const inputVal = $('input').val().replace(/[^0-9.]/g,''); // удаляем все символы, кроме цифр и точки
  const decimalSeparator = Number("1.2").toLocaleString().substring(1,2); // определяем десятичный разделитель, используемый в локали
  const formattedVal = inputVal.replace(".", decimalSeparator) // заменяем точку на десятичный разделитель
                               .replace(/\B(?=(\d{3})+(?!\d))/g, " "); // форматируем строку ввода
  $('input').val(formattedVal);
  return Number(formattedVal.replace(/\s/g, '')); // удаляем пробелы из строки и возвращаем число
}

Теперь вы можете использовать значение, возвращаемое функцией discharge(), в математических операциях

const x = discharge();
const y = discharge();
const z = x + y;
console.log(z); // отобразит сумму x и y, разделенную на разряды

Кроме того, вам нужно изменить обработчик событий keyup, чтобы он вызывал функцию discharge() только после того, как пользователь закончил вводить число. Для этого вы можете использовать задержку, например, 500 миллисекунд, перед вызовом функции discharge()

let timeout;
$('input').keyup(function(){
  clearTimeout(timeout);
  timeout = setTimeout(function() {
    discharge();
  }, 500);
});