JavaScript 演练场：在线运行 JS 代码

为什么要用在线 JavaScript 演练场？

在线 JavaScript 演练场让你无需任何配置即可直接在浏览器中编写和运行 JavaScript 代码。你无需新建项目、安装 Node.js 或配置构建工具。输入代码、点击运行，立刻就能看到输出。因此它非常适合快速实验、学习新 API 以及调试孤立的逻辑。

当你想在把某个小想法投入真实项目之前先测试一下时，演练场尤为好用。你无需在应用中添加 console.log、切换到终端、再重启开发服务器，而是可以在隔离环境中几秒钟内验证自己的逻辑。

沙箱的工作原理

演练场在一个与主页面隔离的沙箱 iframe 中执行你的代码。这种架构既保证了安全，又提供了干净的执行环境。

• iframe 隔离——你的代码运行在独立的浏览上下文中，无法访问宿主页面、Cookie 或主应用的 localStorage
• 控制台捕获——对 console.log、console.error、console.warn 和 console.table 的调用会被拦截并显示在输出面板中，而不是浏览器开发者工具里
• 错误处理——运行时错误和语法错误会被捕获，并连同堆栈跟踪一起显示，让你无需打开开发者工具即可调试

你可以做什么

演练场支持浏览器引擎所实现的完整 JavaScript 语言，包括现代的 ES2024 特性。

• 测试算法和数据结构——实现排序、查找或树遍历，并用示例输入验证其正确性
• 学习 JavaScript API——尝试数组方法、Promise 链、async/await 模式，以及 Map、Set 等内置对象
• 原型逻辑验证——编写工具函数、数据转换或解析器，在集成进代码库之前先行测试
• 调试正则表达式——针对示例字符串测试正则表达式，并交互式地查看匹配分组

常见问题

在演练场中运行代码安全吗？

安全。代码运行在权限受限的沙箱 iframe 中。它无法访问父页面、无法在标准浏览器规则之外发起跨源请求，也无法读取你的文件。该沙箱相当于打开一个空白 HTML 页面并在其控制台中运行代码。

它支持 async/await 和 Promise 吗？

支持。演练场完全支持 async/await、Promise、setTimeout、setInterval 以及其他异步模式。异步操作的控制台输出会在其解析时显示在输出面板中。你可以使用顶层 await 来编写异步代码，而无需将其包裹在函数里。

我可以使用 fetch 或 DOM 操作等浏览器 API 吗？

你可以使用 fetch 发起 HTTP 请求（须遵守 CORS 规则）。DOM 操作在沙箱 iframe 中可用，但默认情况下没有可见的 HTML 文档。演练场的设计目标是逻辑测试和控制台输出，而非可视化的 DOM 渲染。

与 Node.js 相比有哪些限制？

演练场运行在浏览器中，而非 Node.js 中。你无法使用 fs、path、http 等 Node 专属模块，也无法安装 npm 包。不过，浏览器中可用的所有标准 JavaScript API 都能正常工作，包括 fetch、crypto.subtle、structuredClone 以及现代的 ES2024 特性。