communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > Problème commun > le corps du texte

Tous les navigateurs prennent-ils désormais en charge Es6 ?

青灯夜游
Libérer： 2022-10-20 14:20:20
original
5090 Les gens l'ont consulté

Non ; ES6 offre de nombreuses nouvelles fonctionnalités, mais tous les navigateurs ne peuvent pas parfaitement les prendre en charge. Par exemple, les versions IE7~11 ne prennent pas en charge ES6, tandis qu'Edge12-14 ne prend en charge que certaines des nouvelles fonctionnalités d'ES6 ; aux nouvelles fonctionnalités d'ES6 Les seuls navigateurs sont Chrome et Firefox. Chrome peut prendre en charge 97 % des nouvelles fonctionnalités d'ES6 à partir de la version 51, et Firefox peut prendre en charge 97 % des nouvelles fonctionnalités d'ES6 à partir de la version 53.

Tous les navigateurs prennent-ils désormais en charge Es6 ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

ES6 offre de nombreuses nouvelles fonctionnalités, mais tous les navigateurs ne peuvent pas les prendre entièrement en charge. Heureusement, les principaux navigateurs accélèrent désormais leur compatibilité avec les nouvelles fonctionnalités d'ES6. Parmi eux, les navigateurs les plus conviviaux pour les nouvelles fonctionnalités d'ES6 sont Chrome et Firefox.

Introduction à la compatibilité des navigateurs avec la syntaxe ES6

Navigateur Version non prise en charge Version partiellement prise en charge Version prise en charge
IE 6-10 11
Edge
12-14 15-18,79-87
Firefox 2-5 6-53 54-86
Chrome 4-20 21-50 51-90
Safari 3.1-7 7.1-9.1 10-13.1, 14, TP
Opéra 10- 12.1 15-37 38-72
iOS Safari 3.2-6.1 7-9.3 10-13.7, 14.2
Op era Mini tous

Navigateur Android 2.1-4.3 4.4-4.4.4 81
Opera Mobile 12-12.1
59
Chrome pour Android

87
Firefox pour Android

83
Navigateur UC pour Android

12.12
Samsung Internet
4 5-13.0
Navigateur QQ

10.4
Navigateur Baidu
7.12
Navigateur KaiOS
2.5

Pour plus de détails sur la prise en charge de ES6 par chaque navigateur, veuillez consulter https://caniuse.com/?search=es6

Si vous souhaitez savoir si votre navigateur prend en charge ES6, veuillez consulter http://ruanyf.github.io/ es -checker/index.cn.html

Support du navigateur de bureau pour ES2015

  • Chrome : à partir de la version 51, il peut prendre en charge 97 % des nouvelles fonctionnalités de ES6.

  • Firefox : prend en charge 97 % des nouvelles fonctionnalités d'ES6 à partir de la version 53.

  • Safari : prend en charge 99 % des nouvelles fonctionnalités d'ES6 à partir de la version 10.

  • IE : Edge 15 peut prendre en charge 96 % des nouvelles fonctionnalités de l'ES6.

  • Edge 14 peut prendre en charge 93 % des nouvelles fonctionnalités de l'ES6. (IE7 ~ 11 ne prend fondamentalement pas en charge ES6)

On peut voir qu'IE11 traîne à nouveau les pieds, abandonnant complètement ES6, et Edge soutiendra son avenir.

IE11 est effectivement compatible avec ES6

Alors, comment faire fonctionner des scripts ES6 purs sous IE11 Babel fournit une solution efficace

Présentation de deux scripts :

https://bootcss.com/babel. -core/5.8.35/browser.min.js

Ce script convertit les instructions au niveau de la syntaxe es6

https://cdn.bootcss.com/babel-core/5.8.35 /browser-polyfill.min. js

Ce script convertit la nouvelle API de syntaxe, telle que Set Map Promise, etc.

Marquez le type = "text/babel" du bloc de scripttype = "text/babel"

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IE11 With ES6</title>
    <script src="./browser-polyfill.min.js"></script>
    <script src="./browser.min.js"></script>
    <script type="text/babel">
        const list = [&#39;one&#39;, &#39;two&#39;, &#39;three&#39;];
        list.forEach((item, index) => {
            alert(item + (index + 1));
        });


        let promise = new Promise(function (resolve, reject) {
            alert(&#39;Promise&#39;);
            resolve();
        });

        promise.then(function () {
            alert(&#39;resolved.&#39;);
        });


        const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
        alert(items.size)


        const map = new Map();

        const k1 = [&#39;a&#39;];
        const k2 = [&#39;a&#39;];

        map.set(k1, 111).set(k2, 222);

        alert(map.get(k2))

    </script>
</head>

<body>

</body>

</html>
Copier après la connexion

那么这里有两个困惑：

第一：<script type="text/babel"> 和我们平时用的<script type="text/javascript">

//页面加载后，执行runScripts方法
if (global.addEventListener) {
  global.addEventListener("DOMContentLoaded", runScripts, false);
} else if (global.attachEvent) {
  global.attachEvent("onload", runScripts);
}
Copier après la connexion

Il y a donc deux confusions ici :

Premièrement : le <script type="text/babel"> et le

Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal