如何在不使用eval的情况下获取JS代码片段最后表达式的结果

核心方案：沙箱iframe + 混合执行逻辑 #

既然你已经在用iframe沙箱，那可以基于此优化，不用代码解析库也能实现类似浏览器控制台的效果，核心思路是结合Function构造函数和eval的特性，在沙箱内安全执行代码并捕获最后表达式结果：

1. 沙箱配置（安全隔离）

先创建配置严格的沙箱iframe，限制其权限避免恶意代码影响主页面：

const sandboxIframe = document.createElement('iframe');
// 仅允许执行脚本，禁止跨域、DOM访问等权限
sandboxIframe.sandbox = 'allow-scripts';
sandboxIframe.src = 'about:blank';
document.body.appendChild(sandboxIframe);

2. 沙箱内的执行逻辑

在iframe中注入脚本，实现代码执行的核心逻辑，通过try-catch区分表达式和语句块，自动捕获最后结果：

// 注入到iframe的脚本内容
const sandboxScript = `
window.addEventListener('message', (e) => {
  if (e.data.type === 'execute') {
    let result;
    try {
      // 先清理代码：移除注释、空行
      let cleanedCode = e.data.code
        .replace(/\/\/.*/g, '')
        .replace(/\/\*[\\s\\S]*?\*\//g, '')
        .trim();
      
      if (!cleanedCode) {
        result = undefined;
      } else {
        // 优先尝试把代码当作表达式执行（性能更好）
        try {
          result = new Function('return (' + cleanedCode + ')')();
        } catch (exprErr) {
          // 表达式执行失败，说明是语句块，用eval捕获最后表达式结果
          result = new Function('return eval(' + JSON.stringify(cleanedCode) + ')')();
        }
      }
    } catch (err) {
      // 捕获执行错误，返回错误信息
      result = err;
    }
    // 把结果发回主页面
    e.source.postMessage({
      type: 'result',
      value: result
    }, e.origin);
  }
});
`;

// 注入脚本到iframe
const scriptEl = sandboxIframe.contentWindow.document.createElement('script');
scriptEl.textContent = sandboxScript;
sandboxIframe.contentWindow.document.body.appendChild(scriptEl);

3. 主页面通信逻辑

主页面通过postMessage向沙箱发送代码，并接收执行结果：

function executeUserCode(code) {
  return new Promise((resolve) => {
    const messageHandler = (e) => {
      if (e.source === sandboxIframe.contentWindow && e.data.type === 'result') {
        window.removeEventListener('message', messageHandler);
        resolve(e.data.value);
      }
    };
    window.addEventListener('message', messageHandler);
    
    // 向沙箱发送执行请求
    sandboxIframe.contentWindow.postMessage({
      type: 'execute',
      code: code
    }, '*');
  });
}

// 测试：执行示例代码
executeUserCode('var x = 0; x++; x;').then(res => {
  console.log(res); // 输出 1
});

关键优势说明 #

1. 安全隔离：iframe的sandbox属性限制了代码权限，无法访问主页面DOM、Cookie或发起跨域请求，彻底解决eval的安全隐患。
2. 自动捕获结果：通过try-catch先尝试表达式执行（性能更优），失败则用eval处理语句块，利用eval能返回语句块最后表达式结果的特性，无需大规模修改用户代码。
3. 无依赖：全程无需第三方代码解析库，仅用字符串清理和基础JS API实现。
4. 性能可控：Function构造函数的性能优于直接eval，且沙箱运行在独立进程（现代浏览器特性），不会阻塞主页面。

内容的提问来源于stack exchange，提问作者Ood