Javascript eval() 函数无法正常工作

Question

我目前正在用HTML，CSS和Javascript制作一个计算器，用于练习。我发现"内置"的 eval 函数从字符串中进行了数学运算。但它不能正常工作。

我不知道问题出在哪里。但是当我例如这样做时：11+11/2 应该是 11。由于某种原因变为 16.5。我不知道为什么。我真的很感激一些帮助。

这是代码：

function revealAnswer(){
var math = document.getElementById("numbersInputted");
math.innerHTML += " = " + eval(math.innerHTML);
}

Answer 1

有很多原因可以解释为什么这是错误的方法。

首先，innerHTML返回一个字符串，不仅包含元素的文本内容，还包含任何嵌套的 HTML 元素。如果只是您想要的文本，请使用textContent.

接下来，通过让用户输入他们想要在与数字相同的字符串中使用的实际数学运算符，会产生更多的混乱。 让用户单独输入，然后您可以使用if/then逻辑最终使用正确的运算符。

接下来(这是重要的部分)，永远不要使用eval().它不需要解决您可能遇到的任何问题，但它为您的网站上的"跨站点脚本"攻击打开了大门。此外，它还操作this绑定，并在自己的范围内执行其代码。

您真正需要做的是简单地将字符串输入转换为数字，以便您可以使用它进行数学运算。您可以使用parseInt()和parseFloat()执行此操作

因此，您的行可能是：

math.innerHTML += " = " + parseFloat(math.textContent);

最后，对于数学，运算顺序为：

• 括号
• 指数
• 乘法
• 划分
• 添加
• 减法

您可以看到除法是在加法之前完成的，这意味着在您的表达式中：11 + 11/2，首先计算11/2(5.5)，然后将其添加到11(16.5)。

最后，请记住，JavaScript 中的+运算符可以表示数学加法或字符串连接，如果其中一个操作数是字符串，另一个操作数将被转换为字符串。