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

Question

我正在制作一个计算器并将所有点击的数字和运算符推送/保存到一个数组和一个字符串。

我想知道哪种方法 在这种情况下最好。从输入 OR 制作字符串或数组是我想不到的更好方法。

我想计算数组或字符串。该字符串给出了错误的答案，我不知道如何计算数组。演示计算器如下。

$(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 mode eval 中无法将新变量引入周围范围。 （因为它在它自己的函数的末尾，所以在那个范围内没有发生任何其他事情。）
   • 如果存在任何不属于数学表达式的字符，该函数将引发错误，从而无法进行注入。
2. 使用eval，调试可能更具挑战性（没有行号等）
   • 在这种情况下，函数会引发错误，其中包括行号。 eval'd 代码只有一行，因此不相关。
3. eval'd 代码执行得更慢（没有机会编译/缓存 eval'd 代码）
   • 在这种情况下，没有什么可以编译/缓存，所以这不是问题。

Answer 2

parseInt 不使用数学运算评估字符串。 eval 会这样做。如果您担心使用eval 的安全性，您将不得不编写一个解析字符串并观察操作顺序的计算器函数（一项涉及更多的任务）。我认为没有理由同时保留一个数组和一个字符串。任何一个都足够了。

修改最少的工作代码 sn-p：

$(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>