用 Eval 函数编写简单计算器的终极指南

2023-09-05 14:30:50

JavaScript 中的 Eval 函数：释放动态代码执行的力量

在 JavaScript 的广阔世界中，Eval 函数 脱颖而出，成为一把解锁代码执行动态性的强大工具。通过本文，我们将深入探究 eval 函数的奥秘，揭示其强大功能，并使用它构建一个简单的计算器来展示其实际应用。

理解 Eval 函数

Eval 函数允许您将字符串作为代码进行解释和执行，从而在运行时动态计算表达式和运行代码。其语法很简单：

eval(string);

其中 string 是要作为代码执行的字符串。

使用 Eval 函数构建简单计算器

为了展示 eval 函数的实用性，让我们构建一个简单的计算器：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>简单计算器</h1>
  <form>
    <input type="number" id="num1">
    <select id="operator">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="number" id="num2">
    <input type="submit" value="计算">
  </form>

  <p id="result"></p>

  <script>
    const form = document.querySelector('form');

    form.addEventListener('submit', (event) => {
      event.preventDefault();

      const num1 = Number(document.querySelector('#num1').value);
      const operator = document.querySelector('#operator').value;
      const num2 = Number(document.querySelector('#num2').value);

      let result;

      switch (operator) {
        case '+':
          result = num1 + num2;
          break;
        case '-':
          result = num1 - num2;
          break;
        case '*':
          result = num1 * num2;
          break;
        case '/':
          result = num1 / num2;
          break;
      }

      document.querySelector('#result').textContent = `结果：${result}`;
    });
  </script>
</body>
</html>