如何检查浏览器是否支持“let”？

Question

let检查浏览器是否支持声明仅对当前代码块有效的变量的命令的最佳方法是什么？

这不是问题“目前哪些浏览器支持 JavaScript 的‘let’关键字？”的重复。因为问题涉及FF中的非标准语法扩展，并且eval/Function解决方案没有发布。

我需要执行此检查以将使用旧浏览器的用户重定向到建议他们更新浏览器的网站。

Answer 1

对新语法或关键字进行功能检测的唯一方法是eval（或者将其传递给不是更好的Function构造函数）：

function detectLet(){
  try{
    return !!new Function('let x=true;return x')()
  }catch(e){
    return false
  }
}

console.log(detectLet())

但还要注意，您不能有条件地使用新语法，或尝试捕获语法错误，因为语法错误发生在代码开始运行之前！

所以，要有条件地使用这样的功能，你还需要eval，这更糟糕......

if(detectLet()){
  let foo = 'bar';
}
//SyntaxError if `let` isn't supported

if(detectLet()){
  eval("let foo = 'bar';") //Wait... really?!
}
//No errors

结论：

如果您需要支持（那些非常旧的）平台，但不支持let，则不要使用let。

或者，您可以使用Babel等工具转译代码

但截至 2022 年，所有主要浏览器都支持let（甚至 IE！！！），因此您可以安全地使用它，并放弃对真正旧版浏览器的支持。

Answer 2

尽管它很邪恶，但你可以使用eval()尽管它很邪恶，但只要您不评估任何用户输入，将其包装在 try/catch 语句中，您可以检查它是否引发语法错误。

语法错误本身是不可捕获的，因此您不能简单地在 let 语句周围添加 try/catch 语句。

为了演示目的，我添加了一个使用虚构的“foobar”关键字的示例：

var canLet = false;
try {
  eval('let foobar = "baz";');
  canLet = true;
} catch (e) {}

console.log("this browser does" + (canLet ? '' : ' not') + " support the let keyword");

var canFoobar = false;
try {
  eval('foobar baz = "bar";');
  canLet = true;
} catch (e) {}

console.log("this browser does" + (canFoobar ? '' : ' not') + " support the foobar keyword");