推荐一个简洁易用的JavaScript表达式解析库 - jsep

2026-01-14 17:53:12作者：薛曦旖Francesca

是一个轻量级的JavaScript表达式解析库，它的主要功能是将字符串形式的JavaScript表达式转换为可执行的函数。这个库可以广泛应用于各种需要动态计算结果的场景中。

应用场景

jsep适用于以下场景：

配置文件中的动态参数计算。
表单验证时的自定义规则。
在Web应用程序中实现复杂的逻辑运算。

通过使用jsep，你可以避免在代码中直接拼接字符串来生成JavaScript表达式，从而提高代码的安全性和可读性。

特点

jsep具有以下特点：

轻量级 - jsep的源码只有几百行，体积小且无需依赖其他库，方便快速集成到你的项目中。
易用性强 - jsep提供了简单的API接口，让你轻松地将字符串表达式转化为可执行的函数。
兼容性好 - 支持大部分现代浏览器和Node.js环境。
扩展性 - jsep允许你自定义操作符和节点类型，以满足更丰富的应用场景。
安全 - jsep内置了防止XSS攻击的机制，确保在处理用户输入时不会引入安全隐患。

使用方法

安装

你可以通过npm或CDN方式获取jsep：

npm install jsep

<script src="https://unpkg.com/jsep@latest/dist/jsep.min.js"></script>

API

`jsep(expression: string): Node | boolean`

根据给定的expression字符串返回对应的抽象语法树（AST）表示的节点。当expression无效时，返回false。

示例：

const expression = "2 + 2";
const node = jsep(expression);
console.log(node); // 输出：{type: 'BinaryExpression', operator: '+', left: {...}, right: {...}}

`evaluate(node: Node, scope: object): any`

根据给定的AST节点和作用域对象计算表达式的值。

示例：

const expression = "2 + 2";
const node = jsep(expression);

// 创建一个包含变量的对象
const scope = {
  x: 2,
  y: 3,
};

// 计算表达式的结果
const result = jsep.evaluate(node, scope);
console.log(result); // 输出：4

示例

下面是一个完整的例子，展示了如何使用jsep解析并计算一个简单的数学表达式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jsep Example</title>
  <script src="https://unpkg.com/jsep@latest/dist/jsep.min.js"></script>
</head>
<body>
  <input type="text" id="expression" placeholder="Enter an expression">
  <button onclick="calculate()">Calculate</button>

  <script>
    function calculate() {
      const expressionInput = document.getElementById("expression");
      const expression = expressionInput.value;
      const node = jsep(expression);

      if (node === false) {
        alert("Invalid expression!");
        return;
      }

      const result = jsep.evaluate(node);
      alert(`Result: ${result}`);
    }
  </script>
</body>
</html>