js计算器代码带括号怎么输入

通过JavaScript实现带括号的计算器功能

实现一个能够处理括号的JavaScript计算器，核心在于解析输入、处理运算符优先级、确保括号匹配、实现正确的计算逻辑。在这篇文章中，我们将详细讲解如何编写一个能够处理括号的JavaScript计算器。

一、解析输入

首先，计算器需要解析用户的输入，识别数字、运算符和括号。通过创建一个解析器函数，可以将输入的字符串分割成易于处理的单元。

function tokenize(input) {
    const tokens = [];
    let numberBuffer = [];
    for (let char of input) {
        if (/d/.test(char)) {
            numberBuffer.push(char);
        } else {
            if (numberBuffer.length) {
                tokens.push(numberBuffer.join(''));
                numberBuffer = [];
            }
            if (char !== ' ') {
                tokens.push(char);
            }
        }
    }
    if (numberBuffer.length) {
        tokens.push(numberBuffer.join(''));
    }
    return tokens;
}

二、运算符优先级和括号匹配

计算器需要处理运算符优先级和括号匹配。可以使用Shunting-yard算法来实现这一功能，该算法可以将中缀表达式转换为后缀表达式（逆波兰表示法），从而简化计算过程。

function shuntingYard(tokens) {
    const outputQueue = [];
    const operatorStack = [];
    const precedence = {
        '+': 1,
        '-': 1,
        '*': 2,
        '/': 2
    };
    const associativity = {
        '+': 'Left',
        '-': 'Left',
        '*': 'Left',
        '/': 'Left'
    };
    for (let token of tokens) {
        if (/d/.test(token)) {
            outputQueue.push(token);
        } else if (token in precedence) {
            while (operatorStack.length &&
                precedence[operatorStack[operatorStack.length - 1]] > precedence[token] ||
                (precedence[operatorStack[operatorStack.length - 1]] === precedence[token] &&
                    associativity[token] === 'Left')) {
                outputQueue.push(operatorStack.pop());
            }
            operatorStack.push(token);
        } else if (token === '(') {
            operatorStack.push(token);
        } else if (token === ')') {
            while (operatorStack[operatorStack.length - 1] !== '(') {
                outputQueue.push(operatorStack.pop());
            }
            operatorStack.pop();
        }
    }
    while (operatorStack.length) {
        outputQueue.push(operatorStack.pop());
    }
    return outputQueue;
}

三、计算后缀表达式

将后缀表达式转化为最终的计算结果。我们可以使用一个栈来实现这一功能。

function evaluateRPN(tokens) {
    const stack = [];
    for (let token of tokens) {
        if (/d/.test(token)) {
            stack.push(parseFloat(token));
        } else {
            const b = stack.pop();
            const a = stack.pop();
            switch (token) {
                case '+':
                    stack.push(a + b);
                    break;
                case '-':
                    stack.push(a - b);
                    break;
                case '*':
                    stack.push(a * b);
                    break;
                case '/':
                    stack.push(a / b);
                    break;
            }
        }
    }
    return stack.pop();
}

四、整合功能

将上述各部分整合在一起，形成完整的计算器功能。

function calculate(input) {
    const tokens = tokenize(input);
    const rpn = shuntingYard(tokens);
    return evaluateRPN(rpn);
}
// 示例使用
const expression = "3 + 4 * (2 - 1)";
console.log(calculate(expression));  // 输出结果：7

五、用户界面和交互

为了让用户能够方便地输入表达式和查看结果，我们还需要创建一个简单的用户界面。这里将使用HTML和JavaScript来实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Calculator</title>
    <style>
        #calculator {
            width: 200px;
            margin: 100px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        #display {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            text-align: right;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        .button {
            width: 45px;
            height: 45px;
            margin: 2px;
            font-size: 18px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="calculator">
    <div id="display"></div>
    <button class="button" onclick="appendToDisplay('1')">1</button>
    <button class="button" onclick="appendToDisplay('2')">2</button>
    <button class="button" onclick="appendToDisplay('3')">3</button>
    <button class="button" onclick="appendToDisplay('+')">+</button>
    <button class="button" onclick="appendToDisplay('4')">4</button>
    <button class="button" onclick="appendToDisplay('5')">5</button>
    <button class="button" onclick="appendToDisplay('6')">6</button>
    <button class="button" onclick="appendToDisplay('-')">-</button>
    <button class="button" onclick="appendToDisplay('7')">7</button>
    <button class="button" onclick="appendToDisplay('8')">8</button>
    <button class="button" onclick="appendToDisplay('9')">9</button>
    <button class="button" onclick="appendToDisplay('*')">*</button>
    <button class="button" onclick="appendToDisplay('(')">(</button>
    <button class="button" onclick="appendToDisplay('0')">0</button>
    <button class="button" onclick="appendToDisplay(')')">)</button>
    <button class="button" onclick="appendToDisplay('/')">/</button>
    <button class="button" onclick="clearDisplay()">C</button>
    <button class="button" onclick="calculateResult()">=</button>
</div>
<script>
    const display = document.getElementById('display');
    function appendToDisplay(value) {
        display.textContent += value;
    }
    function clearDisplay() {
        display.textContent = '';
    }
    function calculateResult() {
        try {
            const result = calculate(display.textContent);
            display.textContent = result;
        } catch (e) {
            display.textContent = 'Error';
        }
    }
</script>
</body>
</html>

六、总结

通过解析输入、处理运算符优先级、实现括号匹配、计算后缀表达式，我们成功实现了一个带括号功能的JavaScript计算器。本文的代码提供了一个完整且可以运行的示例，能够帮助你理解如何实现复杂的计算逻辑。希望这篇文章能对你有所帮助，让你在JavaScript编程中更加得心应手。