当前位置:首页 > JavaScript

js函数实现简单计算器

2026-03-02 02:24:17JavaScript

实现简单计算器的JavaScript函数

以下是实现简单计算器的JavaScript函数示例,支持加、减、乘、除基本运算:

function calculator(num1, operator, num2) {
    switch(operator) {
        case '+':
            return num1 + num2;
        case '-':
            return num1 - num2;
        case '*':
            return num1 * num2;
        case '/':
            if(num2 === 0) {
                return "Error: Division by zero";
            }
            return num1 / num2;
        default:
            return "Error: Invalid operator";
    }
}

使用示例

console.log(calculator(5, '+', 3));  // 输出: 8
console.log(calculator(10, '/', 2)); // 输出: 5
console.log(calculator(7, '*', 6));  // 输出: 42
console.log(calculator(8, '-', 9));  // 输出: -1

扩展功能:支持连续运算

如果需要支持连续运算,可以使用以下改进版本:

function advancedCalculator(expression) {
    try {
        return eval(expression);
    } catch(e) {
        return "Error: Invalid expression";
    }
}

注意事项

使用eval函数时需注意安全性问题,因为它会执行任何传入的JavaScript代码。在生产环境中,建议使用更安全的替代方案,如数学表达式解析库。

js函数实现简单计算器

改进方案:带验证的计算器

function safeCalculator(expression) {
    const validChars = /^[\d+\-*/().\s]+$/;
    if(!validChars.test(expression)) {
        return "Error: Invalid characters in expression";
    }
    try {
        const result = new Function('return ' + expression)();
        if(isNaN(result)) {
            return "Error: Invalid expression";
        }
        return result;
    } catch(e) {
        return "Error: Invalid expression";
    }
}

浏览器端实现示例

<input type="text" id="calcInput">
<button onclick="calculate()">Calculate</button>
<script>
function calculate() {
    const input = document.getElementById('calcInput').value;
    const result = safeCalculator(input);
    alert(result);
}
</script>

标签: 计算器函数
分享给朋友:

相关文章

uniapp如何写全局函数

uniapp如何写全局函数

全局函数的定义与使用 在UniApp中定义全局函数可以通过挂载到Vue.prototype或使用模块化导出导入的方式实现。以下是两种常用方法: 方法一:挂载到Vue.prototype 在main.…

vue实现计算器

vue实现计算器

Vue 实现计算器的方法 使用 Vue 实现计算器可以充分利用其响应式数据和组件化特性。以下是一个简单的实现方案: 创建 Vue 项目 使用 Vue CLI 或 Vite 初始化项目: npm i…

react函数如何调用redux

react函数如何调用redux

在React函数组件中调用Redux 使用react-redux库提供的useSelector和useDispatch钩子函数,可以在函数组件中访问Redux状态和派发action。 安装必要依赖:…

react函数组件如何混合

react函数组件如何混合

混合 React 函数组件的方法 在 React 中,函数组件可以通过组合、高阶组件(HOC)、自定义 Hook 或 Render Props 等方式实现混合功能。以下是几种常见的方法: 使用自定义…

react如何刷新函数组件

react如何刷新函数组件

刷新函数组件的方法 在React中,函数组件的刷新通常通过状态更新或外部触发来实现。以下是几种常见的方法: 使用useState触发重新渲染 通过更新状态变量强制组件重新渲染。React会在状态变化…

react高阶函数如何写

react高阶函数如何写

高阶函数的基本概念 高阶函数(Higher-Order Function)是指接收函数作为参数或返回函数的函数。在React中,高阶函数常用于逻辑复用、组件增强或事件处理封装。 接收函数作为参数…