如何计算数字和数学运算符的数组（或字符串）

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，调试能更有挑战性的（无线号码等）
   • 在这种情况下，函数抛出Error，它包括一个行号。 eval'd代码只是这么一行，所以这是不相关的。
3. eval“d代码执行速度比较慢（没有机会编译/缓存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>