如何检测浏览器是否与 ES2015 兼容 [重复]

Question

我有一大堆 JS 库需要重写，因为它真的很旧而且过时了。因此，我决定提出一个解决方案，我将只使用大部分 ES2015 功能，例如 rest parameters。

问题是，我确信所有客户的浏览器都不会是最新的，我很困惑是否会面临有关他们的浏览器与我的新 JS 库兼容的任何问题。

所以，我想知道是否可以检测客户端浏览器是否与 ES2015 兼容。如果没有，我将只包含我的旧 JS 库。

我正在寻找像 Conditional comments 这样的解决方案，但我无处可去。

感谢您对 HTML、JS 或 PHP 的任何帮助。请提出您的建议。

Answer 1

我想知道我是否可以检测客户端浏览器是否 与 ES2015 兼容。如果没有，我只会包括我的旧 JS 图书馆。

你不能这样做，仅仅因为 AFAIK 没有完全支持 ES2015 的浏览器。此外，您并不想维护两个不同版本的代码，因为这很痛苦，而且很快就会变得混乱。

现在的方法是使用 transpiler，这是一种将 ES2015 代码编译为 ES5（每个浏览器都知道的 JavaScript）的编译器。它仍然有点乱，但至少你只能编写一个版本的代码，那就是 ES2015。

我认为Babel（以前的 6to5）是最流行的转译器。您可以查看他们的网站以开始使用。

---

至于回答您的实际问题，

如何检测浏览器是否兼容 ES2015

您可以通过多种方式做到这一点。我不确定什么是最可靠的，但例如，您可以简单地在浏览器的控制台上尝试：

'Promise' in window

如果这条语句返回true，那么当前浏览器支持promises，这是ES2015的一个新特性，所以你可以假设它支持ES2015的大部分特性。

但这对于大多数情况来说是不够的；您可能希望 100% 确定您使用的内容不会在任何旧浏览器中抛出 SyntaxError。

一种解决方案可能是手动检查您要使用的每个功能。例如，如果您需要 Fetch API，您可以创建一个函数来告诉您当前浏览器是否支持它：

function isFetchAPISupported() {
    return 'fetch' in window;
}

您可以为所需的任何新 API 执行此操作。但是，如果您需要 语法 不同的东西，我认为您唯一的选择是 eval()（如 Katana314 建议的那样）。例如，为了检查对剩余参数的支持，您可以这样做：

function isRestSupported() {
    try {
        eval('function foo(bar, ...rest) { return 1; };');
    } catch (error) {
        return false;
    }
    return true;
}

这在 Firefox 中效果很好，因为支持其余参数。 它在 Safari 上也能正常工作，返回 false 因为那里还不支持其余参数。