JavaScript 美化的運作原理
美化器逐字元讀取程式碼，追蹤每條敘述的巢狀深度，然後以一致的間距重新輸出。它不會改變程式碼的任何行為——只改變程式碼的外觀。
- 詞法分析. 函式庫將輸入掃描為一串 token：關鍵字、識別碼、字串、運算子和標點符號。字串字面值、樣板字面值和正規表示式字面值都被識別為單一單元，因此字串內的花括號不會被誤判為區塊分隔符。
- 追蹤巢狀. 在走訪 token 串流時，美化器維護一個即時縮排層級。每遇到左花括號、方括號或圓括號，層級加深；每遇到對應的右括號，層級退回。這個深度決定了輸出中每行前方的縮排單位數量。
- 套用選項. 縮排選擇（2 個空格、4 個空格或 Tab）確定一個縮排層級的寬度。花括號風格決定左花括號是緊接在敘述後面，還是獨占一行。空行上限將連續多行空行折疊至您設定的數量。
- 重新輸出. 最後，格式化器依照計算好的縮排和換行規則列印 token，並可選擇性地補全自動分號插入（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 可以恢復原始名稱；美化器本身只能處理檔案中現有的內容。
美化會改變程式碼的行為嗎？
不會。美化只增減空白和換行；程式的執行效果完全相同。唯一涉及 token 的選項是「補全缺少的分號」，它會插入自動分號插入（ASI）在執行時本就會添加的敘述結束符，讓程式碼之後再次壓縮時更加安全。
花括號風格選項是什麼意思？
「收緊」將左花括號保留在敘述同一行（if (x) {），這是常見的 JavaScript 慣例。「展開」將每個左花括號放到獨占的新行（Allman 風格）。「尾部展開」保持左花括號附在敘述後，但將 else 和 catch 放到右花括號之後的新行上。
瀏覽器端 JavaScript 美化讓你無需構建步驟或上傳就能獲得可讀的程式碼。貼上壓縮或雜亂的腳本，選擇縮排和花括號風格，然後複製或下載結果。程式碼不離開你的裝置，無需帳號，函式庫只在你需要時才載入——開啟本頁面只花費幾千位元組，而不是幾兆位元組。