JS - Как посчитать значение арифметического выражения из строки

#javascript #jquery #html5

Пытаюсь сделать калькулятор. Работает он следующим образом:
При клике по цифре, она вписывается в переменную. При клике по знаку (+,-,*,/), они
добавляются в ту же переменную что и цифра. В итоге получается к примеру:
var x = '18*2+3' 
Я хочу сделать чтобы при нажатии по знаку равенства, уравнение находящееся в переменной
x было решено, как к примеру, если бы это было просто:  var x = 18*2+3. 
console.log(x);

Пробовал функцию Number и понял что делаю что-то не то.

Подскажите пожалуйста какими способами можно решить задачу и как можно автоматический
увеличить высоту дива ('.example') при достижении определенного количества знаков?



$(function() {

var numbers = 0;
var example = 0;

// Пот нажатии на кнопку с цифро, он появляется в нижнем "табло" калькулятора
$('.numBtn').click(function() {
	if (numbers.length >= 12) {
		return;
	} else {
		if (numbers == 0) {
			numbers = this.value;
		} else {
			numbers += this.value;
		}
	}
	$('.calcIn').text(numbers);
})

// При нажатии на знак +, - , * или /, цифра и нажатый знак урованения добавляются
в переменную example.
$('.funcBtn').click(function(){
	example += ($('.calcIn').text())
	$('.desk').text(example+=this.value);
	numbers = 0
	$('.calcIn').text(numbers)
})



/*При нажатии на кнопку равно, результат примера находящегося в качестве строки в
переменной example должен появиться в качестве текста в классе calcIn */
$('.equalBtn').click(function(){
// 
//
$('.calcIn').text(result);
})

});




		

      
 0
			
0
     
		
		

	



    

Ответы

Ответ 1

Добрый день!
В вашем случае подойдет использование функции eval(), хотя ее использование крайне
не рекомендуется в сообществе. Она создает из строки полноценное выражения для выполнения.
Для простоты демонстрации я изменил ваш div в текстовый input (разница в коде только
в том, что для инпутов нужно именять не .text(), а val()).

$('.equalBtn').click(function() {
    let equation = $('.desk').val();
    let result = eval(equation);
    $('.calcIn').text(result);
});


Насчет высоты. Высота элементов сама легко регулируется при помощи css, достаточно
задать ширину для блочного элемента. В вашем случае, если ответ будет слишком длинный
и в одно "слово", то следует применить свойство overflow-wrap, которое как раз решает
эту задачу.

#text {
    width: 200px;
    overflow-wrap: break-word;
}


Для демонстрации я добавил кнопку с отображением числа пи.

Демо: https://jsfiddle.net/w96k/regbLvbf/1/


Ответ 2

The eval() function evaluates JavaScript code represented as a string.


А увеличить размер элемента, это же обычный if:

if (символов_достаточно) element.style.height = '20px'; //например (или методами jquery)


НО!


  eval() is a dangerous function, which executes the code it's passed with the privileges
of the caller. If you run eval() with a string that could be affected by a malicious
party, you may end up running malicious code on the user's machine with the permissions
of your webpage / extension. More importantly, third party code can see the scope in
which eval() was invoked, which can lead to possible attacks in ways to which the similar
Function is not susceptible.
  
  eval() is also generally slower than the alternatives, since it has to invoke the
JS interpreter, while many other constructs are optimized by modern JS engines.


Корректнее (но не проще) написать свою функцию(ции), которая разбирает строку на
токены и оперирует уже <числами> и <выражениями>, правильно определяет порядок вычислений. 

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


Ответ 3

Есть библиотека mathjs

В ней можно выполнять выражения:

math.eval('sqrt(3^2 + 4^2)')            // 5
math.eval('sqrt(-4)')                   // 2i
math.eval('2 inch to cm')               // 5.08 cm
math.eval('cos(45 deg)')                // 0.7071067811865476


Песочница где можно попробовать