使用 JavaScript eval() 函数进行基本计算器 [关闭]答案

【问题标题】：Using JavaScript eval() function for basic calculator [closed]使用 JavaScript eval() 函数进行基本计算器 [关闭]
【发布时间】：2021-05-30 18:32:40
【问题描述】：

我正在考虑用 UI 和 HTML 和 CSS 编写一个基本的计算器。我想如果我能写出这样的东西，我就可以做这个项目。

const plusFn = function(){
  const sign = '+'
  inputUser.textContent += sign

  const equalFn = function(){
    const input = `${inputUser.value}`
    const numbers = input.split(`${sign}`)
    const result = eval(`${+numbers[0]}${sign}${+numbers[1]}`)
  }
  btnEqual.addEventListener('click',equalFn)
}

btnPlus.addEventListener('click',plusFn)

假设我们的用户按下 123 并将其写入输入区域，然后按下 +，从现在开始他触发了 plusFn，它确定了一个特定的运算符并为相等按钮添加了一个新的事件侦听器。当他给出第二个数字并按下相等按钮时，操作将向上运行。安全吗？我读到 eval 函数很危险，但我想不出任何替代方案。

【问题讨论】：

这是一个（高度重视的）意见问题。没有意见的是，您不得在您通过 eval 在用户 B 的环境中运行的代码中使用来自用户 A 的输入，因为它允许执行任意代码。
"但我想不出任何替代方案" > 您可以在 Google 上搜索“基本计算器 javascript”以找到替代方案。这已经做过多次了，所以我怀疑你会在这里得到答案
如果您在 javascript 中实现此功能，还要注意浮点精度，例如 0.1 + 0.2，它会产生 0.30000000000000004
@Binary 是的，我想我可以通过使用 Math.trunc() 或 toFixed() 来摆脱这种奇怪的行为，但首先我必须从我的函数中获取一个数字 :)
是的，这是可行的，而且您不必冒着被编码社区原谅的风险。只是使用 eval 不会让您掌握计算，有时还会给您带来可恶的结果，正如 Binary 在其评论中向您指出的那样。

标签： javascript security eval calculator

【解决方案1】：

但我想不出任何替代方案

对于像您的示例一样简单的事情，您有两个输入和一个来自受限列表的运算符（在您的示例中只有 +，但我猜您还有其他三个），您可以使用调度程序对象或Map:

const operatons = {
    "+": (a, b) => a + b,
    "*": (a, b) => a * b,
    "/": (a, b) => a / b,
    // ...
};
// Using it...
const operation = operation[operator];
if (!operation) {
    throw new Error(`Invalid operator "${operator}"`);
}
const result = operation(input1, input2);

【讨论】：