FreeCodeCamp JS计算器项目两项测试未通过寻求修改方案

修复要点 #

1. 禁止单数字内重复小数点 #

新增判断逻辑：点击小数点时，先将当前计算表达式按运算符分割，取最后一段数字校验是否已存在小数点，若存在则不追加新的小数点。

2. 连续运算符仅保留最后一个（负号除外） #

新增判断逻辑：若当前输入的是//*/+三类运算符，且上一个输入字符也是运算符，则直接替换上一个运算符，而非追加；负号-作为负数标识允许在运算符后追加。

修改后的核心代码 #

function App() {
  const [calc, setCalc] = React.useState("");
  const [result, setResult] = React.useState("");
  // 区分普通运算符和所有操作符
  const normalOps = ["/", "*", "+"];
  const allOps = ["/", "*", "+", "-", "."];

  const updateCalc = (value) => {
    // 空状态下输入0直接返回
    if (calc === "" && value === '0') {
      return;
    }
    // 处理小数点逻辑
    if (value === ".") {
      // 按运算符分割取最后一段数字
      const lastNumber = calc.split(/[\+\-\*\/]/).pop();
      if (lastNumber.includes(".")) {
        return;
      }
    }
    // 处理连续运算符逻辑
    const lastChar = calc.slice(-1);
    if (normalOps.includes(value) && allOps.includes(lastChar)) {
      // 上一个是操作符，当前是普通运算符，替换上一个
      setCalc(calc.slice(0, -1) + value);
      return;
    }
    // 正常追加逻辑
    const newCalc = calc + value;
    setCalc(newCalc);
    if (!allOps.includes(value)) {
      // 捕获eval异常避免报错
      try {
        setResult(eval(newCalc).toString());
      } catch (e) {}
    }
  };

  const calculate = () => {
    try {
      const res = eval(calc).toString();
      setCalc(res);
      setResult(res);
    } catch (e) {}
  };

  const deleteLast = () => {
    if (calc === "") {
      return;
    }
    const value = calc.slice(0, -1);
    setCalc(value);
  };

  const clearAll = () => {
    setCalc("");
    setResult("");
  };

  return (
    <div className="App">
      <div className="calculator">
        <div className="display" id="display">
          {calc || "0"}
        </div>
        <div className="operators">
          <button
            id="add"
            onClick={() => {
              updateCalc("+");
            }}
          >
            +
          </button>
          <button
            id="subtract"
            onClick={() => {
              updateCalc("-");
            }}
          >
            -
          </button>
          <button
            id="multiply"
            onClick={() => {
              updateCalc("*");
            }}
          >
            *
          </button>
          <button
            id="divide"
            onClick={() => {
              updateCalc("/");
            }}
          >
            /
          </button>
          <button id="del" onClick={deleteLast}>
            DEL
          </button>
          <button id="clear" onClick={clearAll}>
            AC
          </button>
        </div>
        <div className="digits">
          <button
            id="one"
            onClick={() => {
              updateCalc("1");
            }}
          >
            1
          </button>
          <button
            id="two"
            onClick={() => {
              updateCalc("2");
            }}
          >
            2
          </button>
          <button
            id="three"
            onClick={() => {
              updateCalc("3");
            }}
          >
            3
          </button>
          <button
            id="four"
            onClick={() => {
              updateCalc("4");
            }}
          >
            4
          </button>
          <button
            id="five"
            onClick={() => {
              updateCalc("5");
            }}
          >
            5
          </button>
          <button
            id="six"
            onClick={() => {
              updateCalc("6");
            }}
          >
            6
          </button>
          <button
            id="seven"
            onClick={() => {
              updateCalc("7");
            }}
          >
            7
          </button>
          <button
            id="eight"
            onClick={() => {
              updateCalc("8");
            }}
          >
            8
          </button>
          <button
            id="nine"
            onClick={() => {
              updateCalc("9");
            }}
          >
            9
          </button>
          <button
            id="zero"
            onClick={() => {
              updateCalc("0");
            }}
          >
            0
          </button>
          <button id="equals" onClick={calculate}>
            =
          </button>
          <button
            id="decimal"
            onClick={() => {
              updateCalc(".");
            }}
          >
            .
          </button>
        </div>
      </div>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

内容的提问来源于stack exchange，提问作者tanjim anim