Как вычислить массив (или строку) чисел и математических операторов

Question

Я делаю калькулятор и нажав/сохраняя все числа и операторы, нажав на массив и строку.

Я хочу знать, какой подходитявляется лучшим в данном случае. Создание строки или массива из ввода ИЛИ лучший подход, о котором я не могу думать.

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

$(document).ready(function(){ 
 
    var inputArr = []; 
 
    var inputStr = ''; 
 
    
 
    $('span').click(function(){ 
 
    $('#input').append($(this).text()); 
 
    //push to inputArr 
 
    inputArr.push($(this).text()); 
 
    //add to inputStr 
 
    inputStr += $(this).text(); 
 
    
 
    }); 
 
    
 
    //Get result 
 
    $('.equals').click(function(){ 
 
    $('#result').text(inputArr); 
 
    $('#result').append("<br/>" + parseInt(inputStr)); 
 
    }); 
 
    
 
    $('.clear').click(function(){ 
 
    // clear everything 
 
    $('#input').text(''); 
 
    inputArr = []; 
 
    inputStr = ''; 
 
    
 
    }); 
 
});

span { 
 
    background: #bbb; 
 
    border-radius: 2px; 
 
    margin: 5px; 
 
    padding: .5em; 
 
    cursor: pointer; 
 
} 
 
.equals{ 
 
    width: 30%; 
 
    background: #bbb; 
 
    border-radius: 2px; 
 
    margin: 15px; 
 
    padding: .5em; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    font-size: 1.5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> 
 
<br/> 
 
<br/> 
 

 
<span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>0</span> 
 
<br/><br/> 
 
    
 

 
<span>+</span><span>-</span><span>*</span><span>/</span><span class='clear'>clear</span> 
 

 
<p class="equals"> = </p> 
 

 
<p id="input"></p> 
 

 
<p id='result'></p>

Я попытался с помощью parseInt(inputStr), но это дает неправильные ответы.

Answer 1

Эта функция принимает либо строковое выражение, или массив символов, которые создают выражение.

function calculate(expression) { 
 
    "strict mode"; 
 
    if (Array.isArray(expression)) 
 
    expression = expression.join(""); 
 
    var allowedChars = "1234567890%^*()-+/. "; 
 
    for (var i = 0; i < expression.length; i++) 
 
    if (allowedChars.indexOf(expression.charAt(i)) < 0) 
 
     throw new Error("Invalid expression: unexpected '" + expression.charAt(i) + "' in '" + expression + "'"); 
 
    return eval(expression); 
 
} 
 

 
try { 
 
    alert(calculate("4+4")); 
 
    alert(calculate([7, "+", 9, "/", 34])); 
 
    alert(calculate("45/3")); 
 
    alert(calculate("100 * cheeseburger")); 
 
} catch (e) { 
 
    alert(e.message); 
 
}

Вот почему это безопасно:

1. Неправильное использование Eval открывает код для атак путем внедрения
   • В strict modeeval не может вводить новые переменных в окружающий объем. (Так как это в конце своей собственной функции, в любом случае ничего не происходит в этой области.)
   • Функция выдает ошибку, если присутствует какой-либо символ, который не является частью математического выражения, что делает невозможным инъекцию.
2. С eval, отладкой не может быть более сложными (без номеров строк и т.д.)
   • В этом случае функция выдает ошибку, которая включает в себя номер строки. Код eval 'd - это только одна строка, поэтому это не имеет значения.
3. eval «d код не выполняется медленнее (нет возможности компиляции/кэш-код Эвальд)
   • В этом случае нет ничего компилировать/кэш, так что это не проблема.

Answer 2

parseInt не оценивает строку с математическими операциями. eval сделают это. Если вас беспокоит безопасность использования eval, вам придется написать функцию калькулятора, которая анализирует строку и наблюдает за порядком операций (гораздо более сложная задача). Я не вижу причин держать и массив И строку. Либо будет достаточно.

Рабочий фрагмент кода с минимальными изменениями:

$(document).ready(function(){ 
 
    var inputStr = ''; 
 
    
 
    $('span').click(function(){ 
 
    $('#input').append($(this).text()); 
 
    //add to inputStr 
 
    inputStr += $(this).text(); 
 
    
 
    }); 
 
    
 
    //Get result 
 
    $('.equals').click(function(){ 
 
    // or however you want to format it 
 
    $('#result').text(inputStr + ' = ' + eval(inputStr)); 
 
    }); 
 
    
 
    $('.clear').click(function(){ 
 
    // clear everything 
 
    $('#input').text(''); 
 
    $('#result').text(''); 
 
    inputArr = []; 
 
    inputStr = ''; 
 
    
 
    }); 
 
});

span { 
 
    background: #bbb; 
 
    border-radius: 2px; 
 
    margin: 5px; 
 
    padding: .5em; 
 
    cursor: pointer; 
 
} 
 
.equals{ 
 
    width: 30%; 
 
    background: #bbb; 
 
    border-radius: 2px; 
 
    margin: 15px; 
 
    padding: .5em; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    font-size: 1.5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> 
 
<br/> 
 
<br/> 
 

 
<span>6</span> <span>7</span> <span>8</span> <span>9</span> <span>0</span> 
 
<br/><br/> 
 
    
 

 
<span>+</span><span>-</span><span>*</span><span>/</span><span class='clear'>clear</span> 
 

 
<p class="equals"> = </p> 
 

 
<p id="input"></p> 
 

 
<p id='result'></p>