JavaScript Playground 沙箱在獨特來源且封鎖網路的環境中執行短程式碼片段：每次執行都會在專屬的 iframe 內啟動全新的 Web Worker，執行 1,500 毫秒後自動終止，且接受的原始碼最多 30,000 個字元。此沙箱是專為自給自足的程式碼片段所打造——陣列操作、字串解析、數學運算、演算法，以及快速的語言實驗——而非瀏覽器 UI 或伺服器端程式碼。每次執行都會清除先前的沙箱、擷取控制台訊息與最終運算式，並在將結果回傳至編輯器前，用專屬的權杖驗證回應。由於 Worker 無法存取 DOM、document、window、localStorage、cookie 或網路，因此失控的迴圈無法凍結你的瀏覽器分頁，格式錯誤的輸出也無法洩漏到上層頁面。實際時間限制是 Playground 可量測的上限，並不保證任何特定的非同步工作負載都能在該時間內完成。這種隔離機制讓 Playground 成為一份值得信賴的速查表，讓你在不需要建立專案、建置步驟或測試執行器的情況下，就能進行日常的語言檢查。
JavaScript Playground 實際執行的內容
Playground 會在從 Blob URL 衍生的 Web Worker 中執行你的程式碼片段，該 Worker 託管於獨特來源的 iframe 內，允許執行腳本，但拒絕同源存取。iframe 採用預設拒絕的內容安全政策 (Content Security Policy)，僅允許內嵌啟動程式與 Blob Worker，並明確設定 connect-src 'none'，使任何 HTTP、WebSocket 或 fetch 請求都無法離開頁面。每次執行都會產生全新的加密隨機通道權杖，以 JSON 格式編碼你的原始碼並逸出破壞腳本的字元，且只有當 iframe window、固定標記與當前權杖全部相符時，才接受結果訊息。
這樣的架構產生三個值得記住的特性:上層頁面的 UI 執行緒與程式碼片段相互隔離、由於原始碼在插入前已編碼，格式錯誤的傳回值無法從 iframe 中逃逸，以及由於每次點擊執行按鈕時沙箱都會從頭重建，因此單次執行無法讀取前次執行留下的狀態。根據 MDN Web Workers API 參考資料，Worker 無法存取 DOM 或主執行緒的全域變數，而這正是此 Playground 用於隔離的界線。
一覽限制
Playground 公開一組少量的硬性限制。在開始輸入前，請熟記這份速查表，這樣就不會在沙箱無法執行的項目上浪費一次執行機會。
| 設定 | 功能 |
|---|---|
| 編輯器原始碼大小 | 每個片段最多 30,000 個字元 |
| 實際時間逾時 | 每次執行 1,500 毫秒 |
| 執行階段環境 | Web Worker，無 document、window 或 DOM |
| 每次執行的來源 | 獨特，且拒絕同源存取 |
| 網路存取 | 由 CSP 封鎖 (connect-src 'none') |
| 持續性 | 無，每次執行都會取代先前的沙箱 |
| 原始碼編碼 | JSON 編碼，< 會逸出以阻擋腳本逃逸 |
| 輸出格式 | 盡可能使用 JSON，循環結構則退回字串格式 |
| Promise | 會等待至完成或逾時觸發 |
| 套件與匯入 | 未提供 |
| TypeScript 與 JSX | 不會編譯 |
| 除錯 | 沒有除錯中斷點 |
1,500 毫秒的上限是安全防護機制，而非效能基準。瀏覽器排程並不穩定，因此即使非同步工作負載在全速執行下能完成，仍可能在中途被終止。
沙箱內可做與不可做的事項
Playground 非常適合用於語言檢查，但對於需要瀏覽器的所有功能都顯得力不從心。請參考下表，快速判斷某個片段適合放在這裡，還是該放在真正的專案中。
| 適合使用 Playground 的情境 | 跳過 Playground 的情境 |
|---|---|
| 陣列、字串與物件的轉換 | 任何涉及 document、window 或 DOM 的操作 |
| 演算法、排序、搜尋、遞� | 使用 fetch、XHR 或 WebSocket 的請求 |
| 算術、BigInt 與數值精確度檢查 | 讀寫 localStorage、sessionStorage 或 cookie |
| 解析 JSON、CSV 與使用 RegExp 的正則表達式 | 匯入 npm 套件或外部腳本 |
| async/await 與 Promise 組合 | 編� TypeScript、JSX 或其他需要轉�的方言 |
| try/catch 錯誤處理測試 | 設定中斷點或逐步執行程式碼 |
| Map、Set、Date 與 Math 的快速參考 | 檔案系統存取、下載、表單、頁面導覽 |
| 透過 console.log 與 console.error 記錄 | Node.js 專屬的全域變數，如 require、process 或 Buffer |
針對正則表達式的工作，請搭配 正則表達式速查表:JavaScript 符號的 API 替代方案 一同使用，讓你在不混用 POSIX 類別的情況下，仍能掌握 JavaScript RegExp 語法。
在 JavaScript Playground 中執行片段
開啟 JavaScript Playground，並依照下列步驟操作。
- 在編輯器中輸入一個有界限的 JavaScript 片段。請控制在 30,000 個字元以內，並避免使用任何需要 document、window、fetch 或 Node.js 全域變數的功能。
- 按下「執行 JavaScript」。Playground 會產生全新的加密隨機權杖，以 JSON 格式編碼你的原始碼並逸出破壞腳本的字元，接著啟動獨特來源的 iframe 與專屬的 Web Worker。
- 讀取輸出面板。面板會顯示執行期間擷取到的所有 console.log 或 console.error 呼叫、最終運算式 (盡可能格式化為 JSON，否則格式化為字串)，以及任何擲回的錯誤或逾時訊息。
- 編輯你的片段後再次執行。每次執行都會取代先前的沙箱，因此在下次執行前，舊的狀態、記錄與權杖都會被丟棄。
值得一試的快速範例
這些短片段展示了沙箱的強項，以及其輸出的樣貌。
加總小型陣列
運算式 [1, 2, 3, 4, 5].reduce((a, n) => a + n, 0) 會以初始值 0 從左側摺疊陣列。逐步來看:從 0 開始，加 1 得 1，加 2 得 3，加 3 得 6，加 4 得 10，加 5 得 15。Playground 會將最終運算式回報為 JSON 值 15。
標準化字串
執行 " Hello, World ".trim().toLowerCase().replaceAll("world", "JavaScript") 以查看鏈式字串方法的組合方式。除非你額外加入 console.log，否則 Worker 不會輸出任何記錄，最終運算式會成為 JSON 字串 "hello, JavaScript"。
依鍵分組
使用 Object.groupBy([{t:"a",v:1},{t:"b",v:2},{t:"a",v:3}], x => x.t) 依屬性將記錄分桶。Playground 會將產生的對應表 JSON 格式化為 {"a":[{"t":"a","v":1},{"t":"a","v":3}],"b":[{"t":"b","v":2}]}。
等待已解決的 Promise
執行 await Promise.resolve("ready"),Playground 會等待該 Promise 完成。若 Worker 的計時器先觸發，則會看到逾時訊息而非該值。
絕不該貼入的內容
沙箱能隔離 Playground 與你的機器，但這是防護界線，並非邀請。編輯器接受你所提供的任何內容，因此請將其視為任何其他線上編輯器。絕對不要將密碼、API 金鑰、工作階段權杖、私密客戶資料或專有原始碼貼入片段輸入框。若想針對真實記錄行測試正則表達式，或對真實資料執行字串轉換，請複製去識別化的範例而非原始資料。
對於真正的工作而言，Playground 只是塊草稿紙。生產環境的程式碼應放在版本控制下的本機專案中，使用實際會執行該程式碼的執行階段，並搭配測試、程式碼檢查與相依套件審查。Playground 不會儲存專案，因此任何想保留的片段都必須在離開頁面前複製出來。請將上述限制與功能視為其本質——一份速查表，並為任何需要持續性、套件或 DOM 的工作，保留真正的編輯器開啟使用。