如何检查浏览器是否支持"let"?

Question

如何检查我的浏览器是否支持使用 let 命令来声明一个只在当前代码块有效的变量？

这个问题不是重复的 What browsers currently support JavaScript's 'let' keyword?，因为那个问题涉及到了 FF 中的非标准语法扩展，并且没有发布 eval/Function 的解决方案。

我需要进行这个检查，以便将使用旧浏览器的用户重定向到一个网站，提示他们更新浏览器。

- zomega

---

https://dev59.com/mF4b5IYBdhLWcg3wfxxI - Taki

可能是重复问题 现在有哪些浏览器支持JavaScript的'let'关键字？ - Blue

@FrankerZ 我不认为那回答了问题。OP似乎正在尝试找到一种方法（在代码/即时）来确定他是否可以使用let。 - Tyler Roper

是的，我需要一个代码片段来检测是否支持 let。 - zomega

它会报错，显示“意外标识符”。 - Siddharth Chauhan

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！），因此您可以安全地使用它，并停止支持真正的遗留浏览器。

- FZs

---

当您完全掌控自己在做什么时，使用eval并不是坏事，这就是这种情况。 - Máxima Alekz

@MáximaAlekz 这是真的，但 eval 很慢，而且你必须将代码放到一个字符串中，这很难维护（没有语法高亮，运行代码时语法错误不会立即报告，linter 通常不检查字符串中的代码，你必须转义某些字符，ES5 中也没有适当的多行字符串）。所以它在这里并不是邪恶，只是简单地糟糕。 - FZs

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");

- Constantin Groß

---

好的回答！ - Patrick Hund

eval并不总是邪恶的，如果你控制着你放入eval中的所有内容，那么eval就不是邪恶的。 - Máxima Alekz

Answer 3

EcmaScript标准ES2015（“ES6”）引入了let语句，所有主要的浏览器都支持它。除非你的目标浏览器比较老旧，不然你就不需要担心它。

注意：在IE 11中，for循环内部的let语句的行为类似于一个var变量（即它不会在每个迭代中具有作用域，而是在整个for循环中具有作用域）。

- Shameel

---

没错，但是OP要求编程检测...请参考这条评论。 - FZs

Answer 4

如果你真的需要检测浏览器是否支持let，你可以编写一个简单的功能检测代码片段，如下所示。

为了不引起语法错误，你可以使用eval（在这里并不是邪恶的）。

function testLet() {
  try {
    eval("let test;");
    return true;
  } catch (e) {
    return false;
  }
}

console.info(testLet())

- Joschi