如何計算數字和數學運算符的數組（或字符串）

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>