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

Question

我正在制作一个计算器，pushing/saving 所有的数字和运算符都点击了一个数组和一个字符串。

我想知道在这种情况下哪种方法最好。从输入 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

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>

Answer 2

此函数采用字符串表达式或创建表达式的字符数组。

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 mode中eval是不能引入新变量到周围作用域的。（因为它在它自己的功能的末尾，无论如何在该范围内没有发生任何其他事情。）
- 如果出现任何不属于数学表达式的字符，函数将抛出错误，从而无法进行注入。
使用 eval，调试会更具挑战性（没有行号等）
- 在这种情况下，函数会抛出一个错误，其中包含一个行号。 eval 的代码只有一行，所以这无关紧要。
eval'd 代码执行得更慢（没有机会 compile/cache eval'd 代码）
- 在这种情况下，compile/cache 没有任何问题，所以这不是问题。

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

How do I compute an array (or string) of numbers and mathematical operators

javascript

arrays

string

jquery

calculator