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

Question

我有一大堆JS库,我应该重写,因为它已经过时了.所以,我决定提出一个解决方案,我会使用大多数ES2015功能,如休息参数.

问题是,我相信所有的客户都不会让他们的浏览器更新,我很困惑我是否会面临任何关于他们的浏览器兼容我的新JS库的问题.

所以,我想知道我是否可以检测客户端浏览器是否与ES2015兼容.如果没有,我会只包括我的旧JS库.

我正在寻找像条件评论这样的解决方案,但我无处可寻.

任何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，因为其余的参数不支持那里。