JavaScript 美化的工作原理
美化器逐字符读取代码，追踪每条语句的嵌套深度，然后以一致的间距重新输出。它不会改变代码的任何行为——只改变代码的外观。
- 词法分析. 库将输入扫描为一系列词元（token）：关键字、标识符、字符串、运算符和标点符号。字符串字面量、模板字面量和正则表达式字面量被识别为单一单元，因此字符串内部的花括号不会被误判为块分隔符。
- 追踪嵌套. 在遍历词元流时，美化器维护一个实时缩进级别。每遇到左花括号、方括号或圆括号，级别加深一层；每遇到对应的右括号，级别退回。这个深度决定了输出中每行前方的缩进单位数量。
- 应用选项. 缩进选择（2 个空格、4 个空格或 Tab）确定一个缩进层级的宽度。花括号风格决定左花括号是紧跟在语句后面，还是独占一行。空行上限将连续多行空行折叠至您设定的数量。
- 重新输出. 最后，格式化器按照计算好的缩进和换行规则打印词元，还可选择性地补全自动分号插入（ASI）在运行时会自动添加的分号。结果是相同的程序，以人类可读的方式呈现。
为什么要美化 JavaScript
- 阅读压缩代码. 生产包以单行形式发布，变量名只有一个字母。美化可以恢复换行和缩进，让您真正能够追踪 bug 到引发问题的语句，即使没有 source map 也能做到。
- 整理格式不一致的文件. 多人协作的代码往往出现混合缩进和花括号风格。一次美化能将整个文件统一为单一布局，使下一次 diff 只显示真正的逻辑变更，而不是空白噪音。
- 本工具不拖累页面. 大多数在线格式化工具在您打开页面时就加载整个库。本工具只在您点击「美化」或开启实时模式时才延迟加载 js-beautify，因此打开页面只消耗几千字节而非几百千字节，初始渲染保持快速。
- 代码不离开您的浏览器. 美化器完全在您的设备上运行。您的代码从不上传到服务器——当您审查的脚本属于客户、包含内部 API 路径或受保密协议约束时，这一点尤为重要。
常见应用场景
凡是需要阅读并非为了可读性而编写的代码时，美化 JavaScript 就派上用场。
- 调试生产环境：从 Network 面板复制压缩包，粘贴到这里，找出错误堆栈背后无法直接解读的函数。
- 代码审查准备：在提交 PR 前，将贡献者缩进不一致的文件重新格式化，让审查者看到逻辑而非布局杂乱。
- 安全与合规审查：展开第三方分析或广告脚本，在其上线前确认其实际行为。
一个实际示例
取一个压缩的单行代码：function f(a){if(a){return a*2}else{return 0}}。将缩进设为 2 个空格、花括号风格设为收紧，粘贴到上方并点击美化。您将得到一个可读的代码块：function f(a) {，然后是缩进的 if (a) {，再深一层的 return a * 2; 语句，以及对齐在下方的花括号。将花括号风格切换为展开，每个左花括号将独占一行。缩进改为 Tab，每个层级从两个空格变为 Tab 字符。结构完全一致，只有布局不同。
FAQ
这在我的浏览器中运行吗？
是的。js-beautify 库在您第一次点击「美化」或启用实时模式时延迟加载，然后缓存。您的代码不会离开页面——没有服务器往返，也没有上传。
美化与反压缩是同一回事吗？
它可以恢复可读的格式——缩进、换行和间距——但无法找回压缩时删除的原始变量名或注释。如果存在 source map，浏览器 DevTools 可以恢复原始名称；美化器本身只能处理文件中现有的内容。
美化会改变代码的行为吗？
不会。美化只增减空白和换行；程序的运行效果完全相同。唯一涉及词元的选项是「补全缺失分号」，它会插入自动分号插入（ASI）在运行时本就会添加的语句结束符，让代码之后再次压缩时更加安全。
花括号风格选项是什么意思？
「收紧」将左花括号保留在语句同一行（if (x) {），这是常见的 JavaScript 约定。「展开」将每个左花括号放到独占的新行（Allman 风格）。「尾部展开」保持左花括号附在语句后，但将 else 和 catch 放到右花括号之后的新行上。
浏览器端 JavaScript 美化让您无需构建步骤或上传就能获得可读的代码。粘贴压缩或混乱的脚本，选择缩进和花括号风格，然后复制或下载结果。代码不离开您的设备，无需账户，库只在您需要时才加载——打开本页面只花费几千字节，而不是几兆字节。