数値と数学演算子の配列（または文字列）を計算するには

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); 
 
}

ここでは、これは安全である理由です：evalのの不適切な使用がstrict modeevalでインジェクション攻撃

• のためのあなたのコードを開きます
  1. 新しいを導入することができません変数を周囲のスコープに割り当てます。
  2. 数式の一部ではない文字が存在し、注入が不可能な場合、この関数はエラーをスローします（この関数は、それ自身の関数であり、そのスコープ内では何も起こりません）。

evalと、デバッグはより困難な（何行番号、等）関数は行番号を含むエラーをスローこの場合

• することはできません。 evalのコードは1行にすぎないので、これは関係ありません。

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>