JS 结构树

怎么用

1. 把 JavaScript 粘贴进输入框 —— 一个函数、一个模块，或从 devtools 里拷出来的片段都行。
2. 点切分。计数面板会显示每一类各有多少个 token。
3. 视图切到 token 列表，看带编号的平铺表格：序号、嵌套深度、类别、文本。
4. 切到嵌套树，括号会变成容器，一个块读起来是一组，而不是一串平铺的行。
5. 先点示例看看输出长什么样，再粘贴自己的代码。

常见用法

• 读一段陌生代码 —— 分类计数一眼告诉你这个文件主要是字符串、注释还是运算符。
• 找没配对的括号 —— 嵌套树标出每个括号的深度，始终没闭合的那一组会很明显。
• 看压缩后的文件 —— 看看压缩脚本到底有多少 token，深度大的地方在哪。
• 讲清分词器在做什么 —— token 列表就是 parser 的原料，一行一个地摊开给你看。

常见问题

问：这是 Esprima 或 Babel 那种完整 AST 吗？ 答：不是。这是 token 级的结构视图：token 被分类，并按括号深度嵌套，但没有作用域、绑定与类型分析，也没有语法树节点。

问：为什么我的正则表达式被判成了运算符？ 答：正则字面量不会被单独识别成一类，里面的字符会被逐个切开。这个限制在页面上写明了，没有藏着。

问：模板字符串里的 ${} 会怎么处理？ 答：整个模板字符串是一个字符串 token，里面的插值按普通文本处理，不会被当作表达式解析。