html计算数学表达式,如何使用MathCalc在JavaScript中实现基本的数学表达式计算器...

本文概述

在数学学校的好日子里, 老师不允许在教室里使用计算器。小时候, 我(可能仍然)很懒惰, 因此拥有可以解决任何数学运算的电子设备(卡西欧计算器的廉价广告)的可能性简直太棒了。现在, 尽管我每天都不使用计算器, 但作为一名开发人员, 我很高兴看到其他开发人员如何解决此类问题。现在, 在JavaScript中, 使用代码执行数学运算非常简单, 至少对于程序员而言是如此, 但是如果用户是需要执行某些数学运算的用户, 那该怎么办呢？今天, 我想分享一个有用的代码片段, 即MathCalc, 该代码片段使你可以使用非常复杂的函数, 通过一个简单的字符串即可解决基本的数学表达式。是的, 就像你使用计算器一样, 键入值并替换某些公式中的值。

1.添加MathCalc脚本

MathCalc脚本由@paiv编写, 其基本思想虽然难以实现, 但使用和使用非常简单。该脚本从tring解析一个数学表达式, 就像(1 + 2 + 3)/(2)这样的运算, 该运算式应返回2作为结果。

该脚本托管在GithubHist中, 因此你可以获取MathCalc脚本的副本：

然后使用script标签将文件中的脚本包括在HTML文档中：

你可以访问脚本的主页, 该脚本解释了更多可能的用例, 等等。解析器使用移位减少解析器实现, 该实现非常有效且没有依赖性。该库支持以下运算符：

()

func(x)(调用)

-(一元)

^(权力, 右联想)

* /％

+-

=

, (元组构造函数)

号码：42.3, 1e-7

2.使用MathCalc脚本

MathCalc提供了不同的功能, 这些功能也将进行描述和使用。我们将通过示例向大家解释：

基本用法

基本用法是从字符串表示形式解决简单的数学运算, 在这种情况下, 我们将解决变量表达式中显示的简单加法和除法, 创建该库的新实例可让你使用它的parse方法将表达式作为第一个参数。解析器将验证语法是否正确, 如果不正确, 你可以执行操作。如果正确, 则可以使用eval方法求解表达式, 仅此而已：

// Create instance of MathCalc

var calc = new MathCalc();

// Your mathematical operation

var expression = '(1 + 2 + 3) / 3';

// Evaluate expression

var parser = calc.parse(expression);

// Check if there's a syntax error

if (parser.error) {

console.error(

'The expression "' + expression + '" has an error', expr.error.text

);

// Proceed to solve

}else {

// The result will be a JS number, not a string

var result = parser.eval();

// Displays 2 as results (as expected) !

console.log(

'The expression "' + expression + '" generates:', result

);

}

请注意, eval方法的结果是一个数字, 而不是字符串, 并且根据操作, 它也可能返回NaN(不是数字)。

使用变量

要像许多数学运算一样使用变量, 可以在解析器中将它们声明为对象内的第一个参数。例如, 在这种情况下, 我们的表达式将很简单x + y, 其中x的值为1, y的值为2：

// Create instance of MathCalc

var calc = new MathCalc();

// Your mathematical operation

var expression = 'x + y';

// Evaluate result

var parser = calc.parse(expression);

// Check if there's a syntax error

if (parser.error) {

console.error(

'The expression "' + expression + '" has an error', expr.error.text

);

// Proceed to solve

}else {

// The result will be a JS number, not a string

// Insert the variables value

var result = parser.eval({

x: 1, y: 2

});

// Displays 3 as results (as expected) !

console.log(

'The expression "' + expression + '" generates:', result

);

}

创建自定义数学函数

就像平方根函数起作用(sqrt(25)等于5)一样, 你也可以声明自己的函数。例如,

// Create instance of MathCalc

var calc = new MathCalc();

// Your mathematical operation

var expression = 'addNumbers(1 , 3)';

// Evaluate result

var parser = calc.parse(expression);

// Declare addNumbers function in the parser

parser.scope.addNumbers = function(a, b) {

return a + b;

};

// Check if there's a syntax error

if (parser.error) {

console.error(

'The expression "' + expression + '" has an error', expr.error.text

);

// Proceed to solve

}else {

// The result will be a JS number, not a string

// Insert the variables value

var result = parser.eval();

// Displays 4 as results (as expected) !

console.log(

'The expression "' + expression + '" generates:', result

);

}

处理运行时错误

如果自定义实现的功能无法按预期工作, 那么你可能不知道在没有正确处理过程的情况下发生了什么。检查范围是否具有runtimeError属性, 以检查自定义函数是否触发了错误：

// Create instance of MathCalc

var calc = new MathCalc();

// Your mathematical operation

var expression = 'functionThatDoesnExist(1 , 3)';

// Evaluate result

var parser = calc.parse(expression);

// Check if there's a syntax error

if (parser.error) {

console.error(

'The expression "' + expression + '" has an error', expr.error.text

);

// Proceed to solve

}else {

// The result will be a JS number, not a string

// Insert the variables value

var result = parser.eval();

if (parser.scope.runtimeError) {

alert('Runtime JS Error');

}

// Displays 4 as results (as expected) !

console.log(

'The expression "' + expression + '" generates:', result

);

}

现场例子

以下小提琴实现了脚本的非常基本的实现。输入充当屏幕, 你可以在其中插入表达式以及计算结果的按钮：

编码愉快！