什么是 JavaScript AST，如何使用它？

Posted 2023-03-08

【中文标题】什么是 JavaScript AST，如何使用它？

【英文标题】：What is JavaScript AST, how to play with it?

【发布时间】：2013-04-14 05:25:31

【问题描述】：

抽象语法树.. 我总是听说在 Github 上编译成 SpiderMonkey AST。 那么，这是 JS 语法树的实际标准吗？还有 V8，V8 使用的是同一种 AST 吗？

我该怎么玩呢？

【问题讨论】：

这是一个方便的 javascript AST 执行可视化：int3.github.io/metajs

【参考方案1】：

抽象语法树 (AST)，是程序源代码的树形表示。

有几个 JavaScript AST 标准：

estree - EcmaScript AST 标准； shift - 设计时考虑到了转型，not compatible with estree; babel - 支持尚未成为标准但有 proposal 的语言功能。

以下是 JavaScript 解析器列表：

esprima 第一个 acorn 非常流行，快速稳定 espree 基于acorn，用于eslint； @babel/parser 基于 acorn，支持所有新的语言功能 shfit-ast parser 产生 Shift AST typescript 可以解析 JavaScript 和 TypeScript，为此生成它自己的 AST 格式

您可以在astexplorer.net 上找到更多解析器，其中大多数与estree 兼容。

虽然大多数支持estree 的解析器可以很容易地相互替换，但babel 具有与AST 舒适工作所需的非常广泛的基础设施。 它有：

handbook 描述所有工具及其使用方法。 @babel/traverse - 维护整体树状态，负责替换、移除、添加节点； @babel/template - 从字符串创建 AST-node 的最简单方法。 @babel/types - 包含 AST-nodes 的构建器和检查器。

使用AST 的最简单方法之一是使用putout，它基于babel 并支持在plugins API 的帮助下转换JavaScript 代码的简化方式。

这里是删除DebuggerStatement节点的例子：

module.exports.replace = () => (
    'debugger': '',
);

如果你想切换变量的位置，改变声明方式：

module.exports.replace = () => (
    'let __a = __b': 'const __b = __a'
);

如果您想将此代码转换为return x[0]：

for (const x of y) 
    return x;

你可以使用：

module.exports.replace = () => (
    'for (const __a of __b) return __a': 'return __a[0]',
);

借助putout，您可以对JavaScript 代码进行最简单的转换，而无需直接使用AST。

【参考方案2】：

我只知道一种 Javascript AST 规范：https://github.com/estree/estree

它起源于 Mozilla 的 Dave Herman 的出版物，并从那时起演变为社区标准。所以它应该在某种程度上与 SpiderMonkey 匹配，但我不确定 V8 和 JSC。

如果有人能提供有关此事的更多信息，我们将不胜感激。

【参考方案3】：

如果您想试用 Marijnh 教授的 acron 解析器 https://github.com/marijnh 试试这个链接：https://astexplorer.net/

这是一个小巧、快速的 JavaScript 解析器，完全用 JavaScript 编写。

上面提到的JavaScript AST visualizer使用了Esprima引擎，也是用JavaScrpt编写的。

JavaScript 在解析 AST 方面占主导地位，因为当今的 JavaScript 引擎已经超级优化。 https://en.wikipedia.org/wiki/JavaScript_engine

JS语法树的SpiderMonkey AST标准？ V8 使用的是同一种 AST 吗？

这两个 Web 浏览器引擎在内部都有用 C++ 编写的 AST 处理。这就是为什么除了eval 之外，JavaScrpt 代码在大多数情况下都能快速运行的原因。

【讨论】：

视频链接无效

感谢@JuanPicado，我删除了链接。

【参考方案4】：

1.你可以看看AST explorer。一个在线工具，用于探索由 10 多个解析器生成的 AST。是学习语言AST树的好工具。AST explorer source at Github.com.

---

2.您也可以将您的js代码粘贴到JavaScript AST visualizer并点击“显示ast”按钮，您将看到AST。

演示js代码：

function foo(d) 
  d += 3;
    return d+999

function bar(d) 
    return d*100

【讨论】：

这张图片有什么好处？有用吗？

【参考方案5】：

SpiderMonkey 提供parser api。这可能是掌握语法对象的最简单方法。

还有开放的 js-js 解析器，例如 Esprima（确实是 ECMAScript，但它就在小巷里）