如何检测JavaScript中对Top-level await（TLA）的支持？

要检测浏览器是否支持ECMAScript 2022引入的顶层await，直接在try/catch里用eval行不通——因为eval的上下文不是模块顶层，await在这里会直接触发语法错误。可以通过动态加载模块的方式实现检测：

• 创建包含顶层await的动态模块，尝试加载它
• 加载成功则说明支持TLA；加载失败（抛出语法错误）则说明不支持

具体实现代码如下：

async function supportsTopLevelAwait() {
  try {
    // 创建含顶层await的模块Blob
    const moduleBlob = new Blob(['await 1;'], { type: 'text/javascript' });
    const moduleUrl = URL.createObjectURL(moduleBlob);
    // 动态导入模块
    await import(moduleUrl);
    URL.revokeObjectURL(moduleUrl);
    return true;
  } catch (err) {
    // 捕获语法错误，判定为不支持
    return false;
  }
}

// 使用示例
supportsTopLevelAwait().then((supported) => {
  if (supported) {
    console.log('浏览器支持顶层await，执行原生逻辑');
  } else {
    console.log('浏览器不支持顶层await，启用兼容方案');
  }
});

原理说明 #

• 用Blob生成仅包含await 1;的模块内容，模块的顶层允许使用await语法
• import()会返回Promise，若浏览器支持TLA，模块正常加载后Promise resolve；若不支持，加载时会抛出语法错误，进入catch分支返回false

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