我用 JS 构建了一个简单的计算器，但我遇到了严重的 0 问题

Question

我使用 Javascript 构建了一个简单的计算器，但是当我进行诸如 012 + 3 之类的操作时，它总是返回 13 而不是 15...！

此外，在我的计算器中，当我将任何数字除以 0 时，它会返回“Infinity”，但我想将“Error”或“It is not calculable”作为字符串返回。在这种情况下我该怎么办？

我花了很多时间在 StackOverflow 中搜索解决方案，因为我注意到这个问题非常频繁，但我没有找到真正适合我的代码的解决方案。

这是我的代码：

let output = document.getElementById('output');

let cells = Array.from(document.getElementsByClassName('cell'));
// console.log(cells);

cells.map(cell => {
    cell.addEventListener('click', (e) => {
        /* console.log('clicked');
        console.log(e);
        console.log(e.target);
        console.log(e.target.innerText); */
        switch (e.target.innerText) {
            case 'C':
                output.innerText = '';
                break;

            case '=':
                // Funzione di gestione degli errori;
                try {
                    output.innerText = eval(output.innerText);
                } catch {
                    output.innerText = 'Error!';
                }
                break;


            default:
                output.innerText += e.target.innerText;

        }
    });
});

<div>
    <div class="calculator">
        <div id="output"></div>
        <div class="buttons">
          <button class="cell operator">+</button>
          <button class="cell operator">*</button>
          <button class="cell operator">/</button>
          <button class="cell operator">-</button>
          <button class="cell">7</button>
          <button class="cell">8</button>
          <button class="cell">9</button>
          <button class="cell">4</button>
          <button class="cell">5</button>
          <button class="cell">6</button>
          <button class="cell">1</button>
          <button class="cell">2</button>
          <button class="cell">3</button>
          <button class="cell">0</button>
          <button class="cell">.</button>
          <button class="cell">C</button>
          <button class="cell result">=</button>
        </div>
      </div>
</div>

Answer 1

一个可行的解决方案是在 eval 之前删除前导 0。

let output = document.getElementById('output');

let cells = Array.from(document.getElementsByClassName('cell'));
// console.log(cells);

cells.map(cell => {
    cell.addEventListener('click', (e) => {
        /* console.log('clicked');
        console.log(e);
        console.log(e.target);
        console.log(e.target.innerText); */
        switch (e.target.innerText) {
            case 'C':
                output.innerText = '';
                break;

            case '=':
                // Funzione di gestione degli errori;
                try {
                    output.innerText = eval(output.innerText.replace(/^0+/, ''));
                } catch {
                    output.innerText = 'Error!';
                }
                break;


            default:
                output.innerText += e.target.innerText;

        }
    });
});

<div>
    <div class="calculator">
        <div id="output"></div>
        <div class="buttons">
          <button class="cell operator">+</button>
          <button class="cell operator">*</button>
          <button class="cell operator">/</button>
          <button class="cell operator">-</button>
          <button class="cell">7</button>
          <button class="cell">8</button>
          <button class="cell">9</button>
          <button class="cell">4</button>
          <button class="cell">5</button>
          <button class="cell">6</button>
          <button class="cell">1</button>
          <button class="cell">2</button>
          <button class="cell">3</button>
          <button class="cell">0</button>
          <button class="cell">.</button>
          <button class="cell">C</button>
          <button class="cell result">=</button>
        </div>
      </div>
</div>

Answer 2

我不会为您编写代码，但我会指出您的问题所在，以便您继续。您指出了两个不同的问题。

• 当您在 javascript 中使用“0”作为整数的开头时，它将被识别为八进制或以 8 为基数的数字，因此以 8 为基数的“012”可能类似于十进制的 10，加上 3 将等于13. 我不知道具体的细节，但如果你使用以 0 开头的整数，你会遇到困难，所以你必须确保从整数中删除任何前导 0。

• 对于您的第二个问题，快速解决方法是使用isFinite (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isFinite) 查看除法是否为无穷大，但正确的解决方案是确保您不除以零或引发异常。

您需要在output.innerText 上进行更多的字符串操作（例如删除 0），然后才能对其进行eval。

Answer 3

您的解决方案是利用eval() 函数。所以你得到了这个函数的行为。如果您尝试在 Javascript 控制台中输入相同的操作（尝试使用您的浏览器），您将得到相同的结果。

至于为什么012 + 3 = 13的解释： 前导 0 表示字面数字将是八进制（以 8 为基数）。

所以012 以 10 为底数

1 * 8^1 + 2 * 8^0 = 8 + 2 = 10

显然，以 10 为底，10 + 3 = 13。

避免这种情况将涉及一些更复杂的工作。即使您可以轻松摆脱前导零，您也无法解决Infinity 问题。还可以返回其他值，例如 0/0 返回 NaN。

另外，请注意eval() 潜在的安全问题。

见：https://stackoverflow.com/a/18208029/9658671