JavaScriptAST解析器入门教程

本文将带你一步步实现一个简单的JavaScript AST解析器，深入理解代码背后的转换机制。首先，我们将通过**词法分析（Lexer）**把源代码分解成Token序列，例如将表达式"2 + 3 * 4"拆解成数字和运算符等Token。然后，利用**递归下降解析器（Parser）**，根据Token流构建**抽象语法树（AST）**，确保运算优先级得到正确处理。最终生成的AST能够清晰地反映表达式的结构。本教程适用于希望构建DSL、模板引擎或简化脚本语言的开发者，通过手动实现AST解析器，你将更深入地了解JavaScript是如何“读懂”代码的，并掌握编译原理中的关键技术。

首先实现词法分析将代码转为Token，再通过递归下降解析器构建AST，正确处理运算优先级，最终生成反映表达式结构的抽象语法树。

要实现一个简单的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 是如何“读懂”代码的。不复杂但容易忽略细节，比如优先级处理和递归边界。

到这里，我们也就讲完了《JavaScriptAST解析器入门教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！