JavaScript语法树简介：AST/CST/词法/语法分析/ESTree/生成工具

漂流瓶jz2025-08-01 23:40

AST简介

在平时的开发中，经常会遇到对JavaScript代码进行检查或改动的工具，例如ESLint会检查代码中的语法错误；Prettier会修改代码的格式；打包工具会将不同文件中的代码打包在一起等等。这些工具都对JavaScript代码本身进行了解析和修改。这些工具是如何实现对代码本身的解析呢？这就要用到一种叫做AST抽象语法树的技术。

抽象语法树(Abstract Syntax Tree, 缩写为AST)，是将代码抽象成一种树状结构，树上的每个节点表示代码中的一种语法，包括标识符，字面量，表达式，语句，模块等等。将代码形成抽象语法树AST之后，还可以通过这棵树还原成代码。在AST的形成过程中会丢弃注释和空白符等无意义的内容。

将代码抽象成AST需要两个步骤：1.词法分析，是扫描代码并将其中的内容标识为token数组。2.语法分析，是将词法分析的token数组转化为树状的形式，也就形成了抽象语法树。下面我们分别看一下每个步骤。

词法分析

词法分析是生成AST的第一个步骤，它将代码的内容转换为一个一个的标识token，忽略空白符号，识别标识符的类型，最终形成一个tokens数组。这里使用Esprima，一个ECMAScript解析器来生成tokens。本来想用babel，但是babel没有抛出独立生成tokens的方法。

js 复制代码 
const esprima = require("esprima");
const code = "const a = 2 + 1;";
const tokens = esprima.tokenize(code);
console.log(tokens);

/* 生成的tokens
[
  { type: 'Keyword', value: 'const' },
  { type: 'Identifier', value: 'a' },
  { type: 'Punctuator', value: '=' },
  { type: 'Numeric', value: '2' },
  { type: 'Punctuator', value: '+' },
  { type: 'Numeric', value: '1' },
  { type: 'Punctuator', value: ';' }
]
*/

在Node.js中执行这段代码，命令行中就打印出了生成的tokens，放在上面的注释中了。可以看到，代码中除了空白之外，全都被生成token了，value为实际的内容，type为这个内容的类型，其中Keyword为JavaScript的关键字，Numeric为数字，Punctuator是符号，Identifier指的是标识符，例如变量名等。

我们再看一个代码中包含多行与函数的场景，与上面的代码相比，只有code不一样，因此其它代码就省略了：

js 复制代码 
// 准备解析的代码
const fun = function (a) {
  const b = 2;
  return a + b;
}

/* 生成的tokens
[
  { type: 'Keyword', value: 'const' },
  { type: 'Identifier', value: 'fun' },
  { type: 'Punctuator', value: '=' },
  { type: 'Keyword', value: 'function' },
  { type: 'Punctuator', value: '(' },
  { type: 'Identifier', value: 'a' },
  { type: 'Punctuator', value: ')' },
  { type: 'Punctuator', value: '{' },
  { type: 'Keyword', value: 'const' },
  { type: 'Identifier', value: 'b' },
  { type: 'Punctuator', value: '=' },
  { type: 'Numeric', value: '2' },
  { type: 'Punctuator', value: ';' },
  { type: 'Keyword', value: 'return' },
  { type: 'Identifier', value: 'a' },
  { type: 'Punctuator', value: '+' },
  { type: 'Identifier', value: 'b' },
  { type: 'Punctuator', value: ';' },
  { type: 'Punctuator', value: '}' }
]
*/

这个例子复杂很多，通过结果可以看到函数虽然作为一个整体，但是被拆分成了多个token。而且这个例子中虽然有多行，但生成的tokens是没有换行标志的。事实上对于Esprima，可以配置保留注释和以及展示每个token在源码中的位置（从而可以判断是否有换行）。更多配置可以看Esprima文档。

js 复制代码 
const esprima = require("esprima");
// 准备解析的代码
const code = `// 打印输出
console.log(value);`;
const tokens = esprima.tokenize(code, { loc: true, comment: true });
console.log(JSON.stringify(tokens));

/* 生成的tokens
[
  {
    type: "LineComment",
    value: " 打印输出",
    loc: { start: { line: 1, column: 0 }, end: { line: 1, column: 7 } },
  },
  {
    type: "Identifier",
    value: "console",
    loc: { start: { line: 2, column: 0 }, end: { line: 2, column: 7 } },
  },
  {
    type: "Punctuator",
    value: ".",
    loc: { start: { line: 2, column: 7 }, end: { line: 2, column: 8 } },
  },
  {
    type: "Identifier",
    value: "log",
    loc: { start: { line: 2, column: 8 }, end: { line: 2, column: 11 } },
  },
  {
    type: "Punctuator",
    value: "(",
    loc: { start: { line: 2, column: 11 }, end: { line: 2, column: 12 } },
  },
  {
    type: "Identifier",
    value: "value",
    loc: { start: { line: 2, column: 12 }, end: { line: 2, column: 17 } },
  },
  {
    type: "Punctuator",
    value: ")",
    loc: { start: { line: 2, column: 17 }, end: { line: 2, column: 18 } },
  },
  {
    type: "Punctuator",
    value: ";",
    loc: { start: { line: 2, column: 18 }, end: { line: 2, column: 19 } },
  },
];
*/

可以看到结果中打印了每一个token的起始位置和最终位置，注释也保留了，使用LineComment类型。另外注意看console.log这个对象方法，在数组中被分解为了标识符+符号+标识符三个。另外这个被解析的代码我故意放了一个错误（value未定义就被使用值），但这里仅仅是识别token，代码是否可以被执行与生成tokens无关。

语法分析

词法分析结束之后，对生成tokens进一步分析，最后形成一个语法树，就是抽象语法树AST了。这里我们还是使用Esprima生成。（本想尝试利用词法分析结果来生成AST，但暂时没有找到相关的API，因此只能从代码直接生成AST了）。

js 复制代码 
const esprima = require("esprima");
// 准备生成的代码
const code = "const a = 2 + 1;";
const ast = esprima.parse(code);
console.log(JSON.stringify(ast));

/* 生成的AST
{
  type: "Program",
  body: [
    {
      type: "VariableDeclaration",
      declarations: [
        {
          type: "VariableDeclarator",
          id: { type: "Identifier", name: "a" },
          init: {
            type: "BinaryExpression",
            operator: "+",
            left: { type: "Literal", value: 2, raw: "2" },
            right: { type: "Literal", value: 1, raw: "1" },
          },
        },
      ],
      kind: "const",
    },
  ],
  sourceType: "script",
}
*/

可以看到代码被解析成了一个JSON结构，这个JSON结构即描述了代码本身。我们从外向内试着分析一下这个结构：

  • Program 表示一个程序
  • VariableDeclaration 表示变量声明，kind表示了是const
  • VariableDeclarator 表示变量声明的标识符，是名称为a的Identifier标识符
  • BinaryExpression 二元运算符表达式，其中操作符是+号
  • Literal 加号的左右都是字面量，值为数字1和2

因此，一段代码就被分析成了这样一颗AST树。这里我们再看一个例子：

js 复制代码 
// 准备解析的代码
const fun = function (a) {
  const b = 2;
  return a + b;
}

/* 生成的AST
{
  type: "Program",
  body: [
    {
      type: "VariableDeclaration",
      declarations: [
        {
          type: "VariableDeclarator",
          id: { type: "Identifier", name: "fun" },
          init: {
            type: "FunctionExpression",
            id: null,
            params: [{ type: "Identifier", name: "a" }],
            body: {
              type: "BlockStatement",
              body: [
                {
                  type: "VariableDeclaration",
                  declarations: [
                    {
                      type: "VariableDeclarator",
                      id: { type: "Identifier", name: "b" },
                      init: { type: "Literal", value: 2, raw: "2" },
                    },
                  ],
                  kind: "const",
                },
                {
                  type: "ReturnStatement",
                  argument: {
                    type: "BinaryExpression",
                    operator: "+",
                    left: { type: "Identifier", name: "a" },
                    right: { type: "Identifier", name: "b" },
                  },
                },
              ],
            },
            generator: false,
            expression: false,
            async: false,
          },
        },
      ],
      kind: "const",
    },
  ],
  sourceType: "script",
}
*/

这个例子增加了FunctionExpression，表示函数；BlockStatement表示块级语句；ReturnStatement表示return语句等。与前面词法分析将函数拆分成多个token不一样，这次函数是一个整体，且内部包含了params，BlockStatement和ReturnStatement等，确实是做到了对语法本身的分析。

与tokenize方法一样，语法分析的parse方法也有很多选项，例如解析注释，列出在代码中的位置等等，这里就不描述了。除了通过代码之外，还有AST explorer网站可以将代码在线转换为AST，并且可以在线标黄AST结点对应的代码。

抽象语法树规范ESTree

前面生成的AST树的结构中，我们看到了很多AST结点，这些节点有type表示结点类型，以及其他属性。Javascript有这么多语法规则，而且在不停的更新，如何知道这些语法规则的类型和属性定义呢？

ESTree就提供了Javascript语法到AST结点的属性定义的规则。ESTree并不是AST转换工具，它是一份文档，提供了ECMAScript标准中的语法到AST结点定义的规则。生成AST的工具，需要遵守这个规则，这样不同工具生成的抽象语法树就是通用的，我们也只需要写一套代码来解析即可。ESTree维护在GitHub，通过查看ESTree的目录结构和规则示例，可以看到不仅包含了每年的最新语法，甚至还包含了一些还在stage中的语法。

js 复制代码 
// 目录结构(部分)
├── experimental/
├── extensions/
├── stage3/
├── deprecated.md
├── es2015.md
├── es2016.md
├── es2017.md
├── es2018.md
├── es2019.md
├── es2020.md
├── es2021.md
├── es2022.md
├── es2025.md
├── es2026.md
├── es5.md
└── ...

// 规则实例
interface Function <: Node {
    id: Identifier | null;
    params: [ Pattern ];
    body: FunctionBody;
}
A function declaration or expression.

ESTree最早是由Mozilla工程师在开发Javascript引擎SpiderMonkey时定义的，后来被大家接受并形成了事实的标准，现在由Babel，ESlint和Acorn维护。ESTree并不是一个强制规则，因此也有部分AST转换工具没有使用这个标准。下面的工具介绍中会提到这一点。

AST工具列表

首先列举一下目前社区中流行的AST生成工具，以及它们是否支持ESTree和输出Tokens。

工具名称 支持ESTree 支持输出Tokens 简介
Esprima 是 是 很早的AST工具，支持最新语法的进度较慢
Acorn 是 是 流行的AST工具，支持插件
Espree 是 是 ESLint(JS语法检查工具)的AST工具，最初基于Esprima开发，后来基于Acorn
@babel/parser 是 否 Babel(JS编译器)的AST工具，fork于Acorn
UglifyJS 否 否 UglifyJS(JS压缩工具)中提供的AST工具，独立格式不支持ESTree

其中Esprima是非常早的AST工具，也很好用，但由于ES6开始，ECMAScript标准中语法的数量增多速度变快，导致Esprima无法即使更新，因此出现了更多AST生成工具。其中Acorn是流行的工具之一，具有插件机制，现在很多JavaScript工具都采用了Acorn或者在它的基础上继续开发。下面我们简单列举下这些工具的代码使用方式示例：

js 复制代码 
/*
  code    被解析的代码
  tokens  词法分析结果
  ast     生成的抽象语法树
*/
const code = "const a = 2 + 1;";

// --- Esprima ---
const esprima = require("esprima");
const tokens = esprima.tokenize(code);
const ast = esprima.parse(code);

// --- Acorn ---
const acorn = require("acorn");
// it是个js遍历器
const it = acorn.tokenizer(code);
const tokens = [...it]；
const ast = acorn.parse(code, { ecmaVersion: "latest" });

// --- Espree ---
const espree = require("espree");
const tokens = espree.tokenize(code);
const ast = espree.parse(code, { ecmaVersion: "latest" });

// --- @babel/parser ---
const babelParser = require("@babel/parser");
const ast = babelParser.parse(code);

// --- UglifyJS ---
const UglifyJS = require("uglify-js");
const ast = UglifyJS.minify(code, {
    parse: {}, compress: false, mangle: false,
    output: { ast: true, code: false }
});

通过代码示例可以看到，虽然API细节个别有区别，但使用方式是基本一致的。还有一些社区工具虽然有解析AST的能力，但却没有抛出API，比如Terser；还有一些工具是直接集成了上面的工具作为解析AST的方法，例如recast。这些工具我们就不在表格中列出了。

AST的应用Demo

AST在Javascript的工具中应用非常广泛：代码编译构建，混淆压缩，语法高亮，错误检查，格式修改，ES版本兼容等等，应用实在是太多了。可以说在前端工程化领域中绝大部分工具都需要AST的能力。但其中大部分工具都不仅只是生成语法树，它们还会对AST进行修改，最后再生成代码。我们再用一个流程图来表示：

从图中可以看到，大部分工具利用AST的方式是，先把代码生成AST，然后再对AST进行遍历和修改，生成一颗新的AST。最后将AST生成代码作为输出结果。这里我们尝试一个最简单的例子，其中遍历AST使用的是Estraverse，从AST生成代码使用的是Escodegen。

js 复制代码 
const esprima = require("esprima");
const estraverse = require("estraverse");
const escodegen = require("escodegen");

const code = `
let fun = function (letter) {
  let b = 2;
  console.log(" let letter");
  return b + letter;
};
`;
// 生成AST
const ast = esprima.parse(code);
// 遍历
estraverse.traverse(ast, {
  enter: (node) => {
    if (node.type === "VariableDeclaration" && node.kind === 'let') {
      // 修改AST
      node.kind = "const";
    }
  },
});
// 生成新代码
const newCode = escodegen.generate(ast);
console.log(newCode);

/* 生成结果
const fun = function (letter) {
    const b = 2;
    console.log(' let letter');
    return b + letter;
};
*/

上面代码的作用是，将输入代码中的let变量声明修改为const。这仅仅是个最简单的Demo，没有考虑变量存在修改不能使用const的场景。有些人可能对于AST的作用有疑惑，认为对代码为用字符串替换或者正则的方式也能实现。但当代码内容复杂时，例如变量名和字符串常量中都可能包含let，这时使用常规的正则方式难度是比较高的。

CST具体语法树

前面我们介绍的都是AST抽象语法树，它是忽略注释，分号等无意义内容之后的组成的一颗树。那么有没有一种语法树可以保留这些内容呢？有的，它就是具体语法树CST(Concrete Syntax Tree)。具体语法树是代码的完整表示，在代码高亮，代码格式化等方面非常有用。这里我们使用Tree-sitter工具，尝试对代码生成具体语法树。

js 复制代码 
const Parser = require('tree-sitter');
const JavaScript = require('tree-sitter-javascript');

const parser = new Parser();
parser.setLanguage(JavaScript);
const sourceCode = 'let x = 2;';
const tree = parser.parse(sourceCode);

console.log(tree.rootNode.toString());
console.log(tree.rootNode.children[0].toString());
console.log(tree.rootNode.children[0].children);
console.log(tree.rootNode.children[0].children[1].toString());
console.log(tree.rootNode.children[0].children[1]);

/*  输出
(program (lexical_declaration (variable_declarator name: (identifier) value: (number))))
(lexical_declaration (variable_declarator name: (identifier) value: (number)))
[
  SyntaxNode {
    type: let,
    startPosition: {row: 0, column: 0},
    endPosition: {row: 0, column: 3},
    childCount: 0,
  },
  VariableDeclaratorNode {
    type: variable_declarator,
    startPosition: {row: 0, column: 4},
    endPosition: {row: 0, column: 9},
    childCount: 3,
  },
  SyntaxNode {
    type: ;,
    startPosition: {row: 0, column: 9},
    endPosition: {row: 0, column: 10},
    childCount: 0,
  }
]
(variable_declarator name: (identifier) value: (number))
VariableDeclaratorNode {
  type: variable_declarator,
  startPosition: {row: 0, column: 4},
  endPosition: {row: 0, column: 9},
  childCount: 3,
}
*/

Tree-sitter本身是用C语言编写的，但提供了JavaScript语言的npm包供使用。同时它也支持解析多种语言，不同的语言引入不同的解析器即可。Tree-sitter并不使用ESTree作为解析格式，而是使用S表达式，如我们输出的第一行tree.rootNode.toString()。S表达式(S-Expression)类似于前缀表达式，在Lisp语言中使用较多。这里举一个简单的例子：

  • 原表达式: 1 * (2 + 3)
  • S表达式: (* 1 (+ 2 3))

从例子中可以简单理解为，在中间的操作符需要提到最前面。然后我们再来看输出的第一行，其中每个节点的含义如下：

  • program 程序根节点
  • lexical_declaration 声明语句
  • variable_declarator 声明器
  • name(identifier) 变量名
  • value:(number) 数字值

然后将它们组合起来：

  • (program (lexical_declaration (variable_declarator name: (identifier) value: (number))))
  • (程序根节点 (声明语句 (声明器 变量名 数字值)))

详细含义和解析方法可以查看Tree-sitter文档。不过细心看虽然用了S表达式的形式，但这依然是一颗AST而不是CST，因为树中并没有分号等无意义符号。我们仔细看输出的子节点中，发现了分号的存在，这一类无意义结点被称作匿名节点，在S表达式中并不会展示，但是遍历子节点时，是可以遍历到的。另外Tree-sitter也能解析存在错误的语法：

js 复制代码 
const sourceCode = 'let x = 2qwe;';
/*
(program (lexical_declaration (variable_declarator name: (identifier) (ERROR (number)) value: (identifier))))
*/

在代码有错误的情况下，依然生成了S表达式，且表达式中可以看到ERROR结点。这种能力对语法错误提示等功能有帮助。

总结

这篇文章仅仅是对语法树(AST CST)做了一个简单的介绍，并没有对原理和细节做深入的了解。事实上，解析与生成代码是计算机学科中一个专门的领域，也是一门大学的课程，叫做编译原理。像是龙书《编译原理》中就有讲到词法分析，语法分析，语法树生成等等，其中的复杂程度远远超过了一篇博客的内容。

对于语法树的生成工具来说，AST和CST的界限也并不是完全区分的（一般默认是AST模式），很多工具就可以在语法树中保留注释等无意义内容，有些也可以解析包含错误的代码。具体用AST还是CST还是自定义的树，要看使用场景。

前端除了JavaScript之外，还有JSX代码，TS代码，CSS代码等等，都有工具可以做到解析语法树。

有一个前端非常常用的编译器，叫做babel，包含了很多编译相关的工具。关于babel相关的内容，会在后面单独文章介绍。同时也将会尝试关于AST更复杂一点的应用。

参考

相关推荐
烛阴1 小时前
掌握 TypeScript 的边界：any, unknown, void, never 的正确用法与陷阱
前端·javascript·typescript
Jerry1 小时前
迁移到 Jetpack Compose
前端
FFF-X2 小时前
前端无感刷新 Token 的 Axios 封装方案
前端
qq_589568102 小时前
javaweb开发笔记—— 前端工程化
java·前端
gnip2 小时前
包管理工具的发展
前端
前端工作日常3 小时前
H5 实时摄像头 + 麦克风：完整可运行 Demo 与深度拆解
前端·javascript
韩沛晓3 小时前
uniapp跨域怎么解决
前端·javascript·uni-app
前端工作日常3 小时前
以 Vue 项目为例串联eslint整个流程
前端·eslint
程序员鱼皮3 小时前
太香了！我连夜给项目加上了这套 Java 监控系统
java·前端·程序员
Rubin933 小时前
TS 相关
javascript
热门推荐
01UV安装并设置国内源02KGG转MP3工具|非KGM文件|解密音频03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04DeepSeek更新！速览DeepSeek V3.1新特性05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06Claude Code VSCode集成开发指南：AI编程助手完整配置07【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）082025最新国内服务器可用docker源仓库地址大全（2025年8月更新）09Spring 调试终于不再痛苦了10NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南