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

Posted 2023-05-09

【中文标题】如何计算数字和数学运算符的数组（或字符串）

【英文标题】：How do I compute an array (or string) of numbers and mathematical operators

【发布时间】：2017-03-18 22:14:08

【问题描述】：

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

我想知道哪种方法 在这种情况下最好。从输入 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)，但它给出了错误的答案。

【问题讨论】：

How to make javascript evaluate a string and more的可能重复

一个简单的解决方案就是使用eval，但有些人会说 eval 是邪恶的，所以下一个解决方案是解析你的字符串并评估.. 例如。 -> ***.com/questions/2276021/…

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

【讨论】：

最后，关于如何安全使用 eval 的一些合乎逻辑的建议，谢谢。

【参考方案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>