JavaScript简单AST解析器实现教程

本文手把手带你用 JavaScript 从零实现一个支持运算符优先级的简易 AST 解析器，涵盖词法分析（将源码拆解为数字、操作符等 Token）和递归下降语法分析（精准构建反映表达式结构的抽象语法树），并通过“2 + 3 * 4”等实例直观展示如何让代码真正“理解”运算顺序；内容深入浅出，不仅适用于学习编译原理核心思想，更为开发 DSL、模板引擎或轻量脚本语言打下坚实基础——原来让代码读懂代码，并没有想象中那么遥远。

要实现一个简单的AST（抽象语法树）解析器，我们需要从词法分析（Lexer）开始，接着进行语法分析（Parser），最终生成AST。这个过程是编译原理中的核心部分，适用于构建DSL、模板引擎或简化脚本语言。

词法分析：将代码拆分为 Token

词法分析的目标是把源代码字符串转换成一个个有意义的标记（Token）。比如对于表达式 2 + 3 * 4，我们希望得到类似：

下面是一个简单的 Lexer 实现：

function tokenize(input) {
  const tokens = [];
  let i = 0;
<p>while (i < input.length) {
let char = input[i];</p><pre class="brush:php;toolbar:false"><code>if (char === '+' || char === '-' || char === '*' || char === '/') {
  tokens.push({ type: 'operator', value: char });
  i++;
  continue;
}

if (/\d/.test(char)) {
  let num = '';
  while (i < input.length && /\d/.test(input[i])) {
    num += input[i++];
  }
  tokens.push({ type: 'number', value: parseInt(num, 10) });
  continue;
}

if (char === ' ') {
  i++;
  continue;
}

throw new Error(`未知字符: ${char}`);</code>

}

return tokens; }

语法分析：根据 Token 构建 AST

语法分析的任务是根据 Token 流构建出一棵树结构，体现运算的优先级和嵌套关系。我们采用递归下降的方式处理表达式，并优先处理乘除（高优先级），再处理加减（低优先级）。

目标AST结构示例：

下面是 Parser 的实现：

function parse(tokens) {
  let current = 0;
<p>function walk() {
let token = tokens[current];</p><pre class="brush:php;toolbar:false"><code>if (token.type === 'number') {
  current++;
  return {
    type: 'NumberLiteral',
    value: token.value
  };
}

if (
  token.type === 'operator' &&
  (token.value === '+' || token.value === '-')
) {
  current++; // 跳过操作符
  return {
    type: 'BinaryExpression',
    operator: token.value,
    left: walk(),         // 左边可能是更复杂的表达式
    right: parseMultiplication() // 右边优先处理乘除
  };
}

throw new Error(`无法解析的 token: ${token.value}`);</code>

}

// 单独处理乘除法，保证优先级更高 function parseMultiplication() { let token = tokens[current];

if (token.type === 'number') {
  current++;
  return {
    type: 'NumberLiteral',
    value: token.value
  };
}

if (
  token.type === 'operator' &&
  (token.value === '*' || token.value === '/')
) {
  current++;
  return {
    type: 'BinaryExpression',
    operator: token.value,
    left: parseMultiplication(),
    right: parseMultiplication()
  };
}

throw new Error(`期望一个数字或乘除操作符`);

}

const ast = { type: 'Program', body: [] };

while (current < tokens.length) { ast.body.push(walk()); }

return ast; }

测试整个流程

现在我们可以组合 Lexer 和 Parser 来测试一个简单表达式：

<code>const code = "2 + 3 * 4";
const tokens = tokenize(code);
const ast = parse(tokens);
console.log(JSON.stringify(ast, null, 2));
</code>

输出结果会正确反映优先级：

扩展思路

这个解析器目前只支持整数和四则运算，但可以继续扩展：

• 支持括号：遇到 ( 时递归解析内部表达式
• 支持变量和标识符：添加 identifier 类型的 Token
• 加入更多语法结构：如赋值、函数调用等
• 使用 BNF 或工具生成更复杂语法分析器（如 nearley.js）

基本上就这些。通过手动实现 Lexer 和 Parser，你能更深入理解 JavaScript 是如何“读懂”代码的。不复杂但容易忽略细节，比如优先级处理和递归边界。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。