Le code ne fonctionne pas dans IE 11, fonctionne bien dans Chrome

Le code suivant peut être exécuté sans problème dans Chrome, mais génère l'erreur suivante dans Internet Explorer 11.

L'objet ne prend pas en charge la propriété ou la méthode 'startsWith'

Je stocke l'ID de l'élément dans une variable. Quelle est la solution?

function changeClass(elId) {
  var array = document.getElementsByTagName('td');
  
  for (var a = 0; a < array.length; a++) {
    var str = array[a].id;
    
    if (str.startsWith('REP')) {
      if (str == elId) {
        array[a].style.backgroundColor = "Blue";
        array[a].style.color = "white";
      } else {
        array[a].style.backgroundColor = "";
        array[a].style.color = "";
      }
    } else if (str.startsWith('D')) {
      if (str == elId) {
        array[a].style.backgroundColor = "Blue";
        array[a].style.color = "white";
      } else {
        array[a].style.backgroundColor = "";
        array[a].style.color = "";
      }
    }
  }
}

<table>
  <tr>
    <td id="REP1" onclick="changeClass('REP1');">REPS</td>
    <td id="td1">&nbsp;</td>
  </tr>
  <tr>
    <td id="td1">&nbsp;</td>
    <td id="D1" onclick="changeClass('D1');">Doors</td>
  </tr>
  <tr>
    <td id="td1">&nbsp;</td>
    <td id="D12" onclick="changeClass('D12');">Doors</td>
  </tr>
</table>

String.prototype.startsWith est une méthode standard de la version la plus récente de JavaScript, ES6.

En regardant le tableau de compatibilité ci-dessous, nous pouvons voir qu'il est pris en charge sur toutes les principales plates-formes actuelles, à l' exception des versions d'Internet Explorer.

╔═══════════════╦════════╦═════════╦═══════╦═══════════════════╦═══════╦════════╗
║    Feature    ║ Chrome ║ Firefox ║ Edge  ║ Internet Explorer ║ Opera ║ Safari ║
╠═══════════════╬════════╬═════════╬═══════╬═══════════════════╬═══════╬════════╣
║ Basic Support ║    41+ ║     17+ ║ (Yes) ║ No Support        ║    28 ║      9 ║
╚═══════════════╩════════╩═════════╩═══════╩═══════════════════╩═══════╩════════╝

Vous devrez .startsWithvous mettre en œuvre . Voici le polyfill :

if (!String.prototype.startsWith) {
  String.prototype.startsWith = function(searchString, position) {
    position = position || 0;
    return this.indexOf(searchString, position) === position;
  };
}

text.indexOf("newString")est la meilleure méthode au lieu de startsWith.

Exemple:

var text = "Format";
if(text.indexOf("Format") == 0) {
    alert(text + " = Format");
} else {
    alert(text + " != Format");
}

Si cela se produit dans l'application Angular 2+, vous pouvez simplement décommenter les polyfills de chaîne dans polyfills.ts :

import 'core-js/es6/string';

Remplacez la fonction startsWith par:

yourString.indexOf(searchString, position) // where position can be set to 0

Cela prendra en charge tous les navigateurs, y compris IE

La position peut être définie sur 0 pour la correspondance de chaîne à partir du début signifiant la position 0.

Comme d'autres l'ont dit, beginWith et endsWith font partie de ES6 et ne sont pas disponibles dans IE11. Notre société utilise toujours la bibliothèque lodash comme solution polyfill pour IE11. https://lodash.com/docs/4.17.4

_.startsWith([string=''], [target], [position=0])

Bien que le poste d'Oka fonctionne très bien, il est peut-être un peu obsolète. J'ai compris que lodash pouvait y faire face avec une seule fonction. Si vous avez installé lodash, cela pourrait vous faire gagner quelques lignes.

Essayez simplement:

import { startsWith } from lodash;

. . .

    if (startsWith(yourVariable, 'REP')) {
         return yourVariable;        
    return yourVariable;
       }      
     }

J'ai aussi récemment fait face au problème. J'ai résolu en utilisant ^ qui est similaire à startwith in jquery. Dire,

var str = array[a].id;
if (str.startsWith('REP')) {..........}

on peut utiliser

if($("[id^=str]").length){..........}

Ici, str est l'identifiant de l'élément.

Suivez cette méthode si un problème survient lorsque vous travaillez avec des projets angular2 +

Je cherchais une solution quand j'ai eu cette erreur, et cela m'a amené ici. Mais cette question semble être spécifique mais l'erreur ne l'est pas, c'est une erreur générique. Il s'agit d'une erreur courante pour les développeurs angulaires traitant d'Internet Explorer.

J'ai eu le même problème en travaillant avec angular 2+, et il a été résolu en quelques étapes simples.

Dans les dernières versions Angular, il y a des codes commentés dans le polyfills.ts montre tous les polyfills requis pour le bon fonctionnement des versions d'Internet Explorer IE09, IE10 et IE11

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
//import 'core-js/es6/symbol';
//import 'core-js/es6/object';
//import 'core-js/es6/function';
//import 'core-js/es6/parse-int';
//import 'core-js/es6/parse-float';
//import 'core-js/es6/number';
//import 'core-js/es6/math';
//import 'core-js/es6/string';
//import 'core-js/es6/date';
//import 'core-js/es6/array';
//import 'core-js/es6/regexp';
//import 'core-js/es6/map';
//import 'core-js/es6/weak-map';
//import 'core-js/es6/set';

Décommentez les codes et cela fonctionnerait parfaitement dans les navigateurs IE

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Mais vous pourriez voir une baisse des performances dans les navigateurs IE par rapport aux autres :(