无需登录 数据私有 本地保存

JavaScript AST 在线浏览器 - 抽象语法树可视化解析

10
0
0
0
🌳 JavaScript AST 浏览器
节点: 0 深度: 0
JavaScript 代码 行: 0 | 字符: 0
抽象语法树 (AST) 

        

      

    

  


  
  

    

      

        
常见问题与知识点

        

          

            

            
AST（Abstract Syntax Tree，抽象语法树）是源代码的树状结构表示。每个节点代表代码中的一个语法结构（如变量声明、函数调用、表达式等）。JavaScript 引擎在解析代码时首先会生成 AST，然后将其编译或解释执行。AST 广泛应用于代码分析、编译器、语法检查、代码格式化、混淆/反混淆等工具中。

          

          

            

            
本工具使用 Acorn 解析器——一个用 JavaScript 编写的轻量级、高性能的 JavaScript 解析器。Acorn 广泛应用于 Webpack、Rollup、ESLint 等知名工具中，支持 ES2024 及更早的 ECMAScript 标准。解析在浏览器本地完成，代码不会上传到任何服务器。

          

          

            

            
根节点通常是 Program，其 body 属性包含所有顶层语句。每个节点都有一个 type 字段标识其类型（如 VariableDeclaration、FunctionDeclaration、ExpressionStatement 等）。点击节点可查看详细信息，包含位置（行列号）和字符偏移量。树中不同颜色的标签帮助区分节点类别：蓝色=声明、绿色=表达式、紫色=语句、橙色=字面量、红色=标识符。

          

          

            

            
AST 的应用非常广泛：① 代码转译（如 Babel 将新版 JS 转为旧版）、② 代码压缩（如 UglifyJS、Terser）、③ 语法检查（如 ESLint 的规则引擎）、④ 代码格式化（如 Prettier）、⑤ 代码覆盖率（如 Istanbul 插桩）、⑥ 死代码检测（Tree Shaking）、⑦ 代码重构工具、⑧ 安全审计等。理解 AST 是深入掌握前端工程化的关键一步。

          

          

            

            
三者都是流行的 JavaScript 解析器：Acorn 最轻量且速度最快，适合生产环境打包工具使用；Esprima 是最早的标准兼容解析器，AST 格式成为 ESTree 规范的基础；Babel parser（原 Babylon）支持实验性语法和 TypeScript/JSX，适合需要解析非标准语法的场景。本工具使用的 Acorn 输出遵循 ESTree 规范，与其他工具兼容性良好。

          

          

            

            
loc（location）包含行列号信息（line 和 column，从 1 开始），方便开发者定位源代码位置；range 是字符偏移量数组 [start, end]（从 0 开始），适合程序化处理。本工具同时提供两种信息，点击树节点时会高亮对应源代码位置。

          

        

      

    

  










 🔧 相关工具