AST抽象语法树

什么是AST

AST（Abstract Syntax Tree），中文叫做抽象语法树，是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。之所以说语法"抽象"的，是因为这里的语法并不会表示出真实语法中出现的每个细节。比如，嵌套括号被隐含在树的结构中，并没有以节点的形式呈现；而类似于if-condition-then这样的条件跳转语句，可以使用带有三个分支的节点来表示。（以上概念来自维基百科）。

JavaScript AST转换工具

对于JavaScript而言，可以通过JS Parser将JS代码转换成AST。目前比较常见的JS Parser如下：

• esprima（流行库）
• Babylon（babel中使用）
• acorn（webpack中使用）
• espree（在acorn基础上衍生而来，eslint中使用）
• astexplorer（在线生成工具，可选不同的JS Parser实时查看）

本文中的例子均是使用esprima来实现。

如何将代码转换成AST

在将代码转换成AST的过程中，有两个重要的阶段：词法分析（Lexical Analysis）和语法分析（Syntax Analysis）。

词法分析

也称为分词，是将字符串形式的代码转换为标记（token）序列的过程。这里的token是一个字符串，是构成源代码的最小单位，类似于英语中单词。词法分析也可以理解成将英文字母组合成单词的过程。词法分析过程中不会关心单词之间的关系。比如：词法分析过程中能够将括号标记成token，但并不会校验括号是否匹配。

JavaScript中的token主要包含以下几种：

关键字：var、let、const等

标识符：没有被引号括起来的连续字符，可能是一个变量，也可能是 if、else 这些关键字，又或者是 true、false 这些内置常量

运算符： +、-、 *、/ 等

数字：像十六进制，十进制，八进制以及科学表达式等

字符串：变量的值等

空格：连续的空格，换行，缩进等

注释：行注释或块注释都是一个不可拆分的最小语法单元

标点：大括号、小括号、分号、冒号等

以下是const a = 'hello world'经过esprima词法分析后生成的tokens。

[
    {
        "type": "Keyword",
        "value": "const"
    },
    {
        "type": "Identifier",
        "value": "a"
    },
    {
        "type": "Punctuator",
        "value": "="
    },
    {
        "type": "String",
        "value": "'hello world'"
    }
]

语法分析

也称为解析器，是将词法分析产生的token按照某种给定的形式文法转换成AST的过程。也就是把单词组合成句子的过程。在转换过程中会验证语法，语法如果有错的话，会抛出语法错误。

上述const a = 'hello world'经过语法分析后生成的AST如下：

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "a"
          },
          "init": {
            "type": "Literal",
            "value": "hello world",
            "raw": "'hello world'"
          }
        }
      ],
      "kind": "const"
    }
  ],
  "sourceType": "script"
}

在拿到了AST后，我们就可以分析AST，在此基础上做一些自己的事情。比如最简单的将代码中的某一变量都替换成另一个名字。