Простейшее решение калькулятора на js без eval();

Приветствие

Доброго времени суток, уважаемый Хабр. Меня зовут Илья и это моя первая статья. Откровенно говоря, я давно уже искал повод опубликовать какой-нибудь материал и вот, похоже этот день настал. Сразу предупрежу - я не считаю решение описанное ниже какой-то метой или истинно верным, но когда вам нужно срочно посчитать строку содержащую простые математические выражения, с использованием скобок, оно может сильно упростить жизнь.

Предисловие

Примерно неделю назад я столкнулся с необходимостью преобразовать строку подобного типа (81+47*(33-42))/15 в математическое выражение и посчитать его. Казалось бы используй любое решение из интернетов и дело в шляпе, но к сожалению использовать библиотеки нельзя, а решения которые я находил как правило считали не правильно, то порядок действий путают, то каким-то образом отрицательное число получается... В общем я просто написал свой код и был доволен, но на следующий день меня вдруг осенило.

Перейдем к практике

Я предлагаю рассмотреть все на практике написания калькулятора, который будет составлять строку а позже считать её, оговорюсь очень важно, чтоб число скобок в выражении было сколько нашей душе угодно и не так важно число символов после запятой, для моей задачи хватит и 3-х.

И так, напишем простой интерфейс с полем ввода и выводом результата

<div class="calc">
    <div class="story"></div>
    <input class="input" type="text" name="">
</div>

И добавим ему симпатичных стилей

body, input {padding: 0; margin: 0; border: 0; font-family: 'Roboto';}
body {
	background: #222; 
	color:#fff;
	display: flex;
	height: 100vh;
	justify-content: center;
	align-items: center;
}

.calc {
	height: 420px;
	width: 240px;
	position: relative;
	border-radius: 8px;
	box-shadow: -5px -5px 20px 5px rgba(255,255,255,0.08), 5px 5px 20px 5px rgba(0,0,0,0.5), -1px -1px 0px 0px rgba(255,255,255,0.2), 1px 1px 0px 0px rgba(0,0,0,0.4);
	background: linear-gradient(120deg, #464e55 0%, #292929 100%);
}

.calc:after {
	content: '';
	position: absolute;
	z-index: -1;
	background: #fff;
	display: block;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	margin: -1px;
	top: 0;
	border-radius: 8px;
	background: linear-gradient(120deg, #4f6579 0%, #312e40 100%);
}

.story {
	height: calc(420px - 42px);
	text-align: right;
	box-sizing: border-box;
	padding: 10px 20px;
	display: flex;
	justify-content: end;
	flex-direction: column;
	opacity: 0.6;
	overflow: hidden;
	position: relative;
}

.story:after {
	content: '';
	background: linear-gradient(180deg, #3e464d 0%, #312e4000 50%);
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	border-radius: 10px;
}

.story i {
	font-size: 12px;
	font-style: normal;
}

.input {
	outline: none;
	border: none;
	margin: 0;
	width: 100%;
	background: none;
	color: #fff;
}

.input {
	height: 42px;
	border-top: 1px dotted #8096a4;
	box-sizing: border-box;
	text-align: right;
	padding: 0 20px;
	line-height: 40px;
	font-size: 18px;
	font-weight: 300;
}

А далее создадим маленькую магии и напишем простой код для создания строки, которую мы будем считать

let string = '',
    $input = document.querySelector('.input');
    $story = document.querySelector('.story');

// событие для отлавливания нажатия в поле input
$input.onkeyup = function(e){
    // если нажат Enter то считаем строку
	if(e.key == 'Enter'){
        // это наша будущая функция
		let result = strToMath(string); 
		
        // передаём результат в поле ввода чтоб иметь возможность дальше работать с ним
        this.value = result; 
		
        // просто сохраняем историю
        $story.innerHTML += `<i>${string}=${result}</i>`; 
		
        // а это вынужденный костыль, чтоб считать правильно дробные числа
        string = `(${string})`; 
	}
	else
		string += e.key; // не совсем верное решение но ведь это просто пример
}

Хорошо, тут должно быть в целом все понятно, но что у нас с strToMath()?

А собственно вот и она

function strToMath(string){
    // преходящие значение необходимо разбить на массив по символам, иначе ничего работать не будет
	string = string.replaceAll(' ', '').replaceAll('+', ' + ').replaceAll('*', ' * ').replaceAll('-', ' - ').replaceAll('/', ' / ').split(' ');

    // Переносим повторный символ == "-" к следующему числу
	for(let i = 0; i < string.length; i++){
		if(string[i] == ''){
			string.splice(i, 2);
			string[i] = '-'+string[i];
		}
	}

    // а теперь та самая магичиская и потрясающая функция calc() прямиком из css3
    // создаем любой элемент
	let calc = document.createElement('calc');

    // передаём туда в свойство opacity наш объедененный через пробел массив 
	calc.style['opacity'] = `calc(${string.join(' ')})`;

    // получаем значение обратно удаляя все лишнее
	let result = parseFloat(calc.style['opacity'].replace('calc(', '').replace(')', ''))

    // и удаляем сам элемент
	calc.remove();
  
    // результат возвращаем.
	return result;
}

Грубо говоря, данное решение в 4 строки если поступающие данные всегда валидны.

По большому счету мы просто эксплуатируем функцию из css3 для получения решения. Однако есть и минусы, если у нас калькулятор то прошлое решение должно поступать с новым в данную функцию т.к. calc() обрезает результат до 5-ти символов после запятой и при делении 89/81 = 1.09877 после обратного умножения мы не получим 89 , результатом будет: 89.0004

Еще говоря об opacity, если использовать z-index то значение будет округляться, а размерные значения требуют обязательно в конце умножения на 1px т.е. примерно так будет выглядеть код:

calc.style['top'] = `calc((${string.join(' ')}) * 1px)`;

let result = parseFloat(calc.style['top'].replace('calc(', '').replace('px)', ''))

Так же собрал маленькое демо с полноценным калькулятором доступным по ссылке: https://preview-1326290.playcode.io/

Код демки: https://playcode.io/1326290

Спасибо за внимание, понимаю, что данный инструмент просто велосипед, но имеющий право на существование.