Code, der nicht in IE 11 ausgeführt wird, funktioniert in Chrome einwandfrei

Der folgende Code kann problemlos in Chrome ausgeführt werden, löst jedoch in Internet Explorer 11 den folgenden Fehler aus.

Das Objekt unterstützt keine Eigenschaft oder Methode 'StartsWith'.

Ich speichere die ID des Elements in einer Variablen. Was ist das Problem?

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 ist eine Standardmethode in der neuesten Version von JavaScript, ES6.

In der folgenden Kompatibilitätstabelle sehen wir, dass sie auf allen aktuellen Hauptplattformen mit Ausnahme der Versionen von Internet Explorer unterstützt wird.

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

Sie müssen sich .startsWithselbst implementieren . Hier ist die Polyfüllung :

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

text.indexOf("newString")ist die beste Methode anstelle von startsWith.

Beispiel:

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

Wenn dies geschieht in Angular 2+ Anwendung können Sie nur uncomment String polyfills in polyfills.ts :

import 'core-js/es6/string';

Ersetzen Sie die Funktion startWith durch:

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

Dies unterstützt alle Browser einschließlich IE

Die Position kann für den String-Abgleich von Anfang an auf 0 gesetzt werden, was die 0. Position bedeutet.

Wie andere bereits gesagt haben, sind StartsWith und EndesWith Teil von ES6 und in IE11 nicht verfügbar. Unser Unternehmen verwendet die lodash-Bibliothek immer als Polyfill-Lösung für IE11. https://lodash.com/docs/4.17.4

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

Während der Beitrag von Oka großartig funktioniert, könnte er etwas veraltet sein. Ich fand heraus, dass lodash es mit einer einzigen Funktion angehen kann. Wenn Sie lodash installiert haben, können Sie möglicherweise einige Zeilen sparen.

Probier's einfach:

import { startsWith } from lodash;

. . .

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

Ich habe mich auch kürzlich dem Problem gestellt. Ich habe mit ^ gelöst, was ähnlich wie bei startwith in ist jquery. Sagen,

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

wir können benutzen

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

Hier ist str die ID des Elements.

Befolgen Sie diese Methode, wenn bei der Arbeit mit Angular2 + -Projekten Probleme auftreten

Ich habe nach einer Lösung gesucht, als ich diesen Fehler bekam, und er hat mich hierher gebracht. Aber diese Frage scheint spezifisch zu sein, aber der Fehler ist nicht, es ist ein generischer Fehler. Dies ist ein häufiger Fehler für Winkelentwickler, die mit Internet Explorer arbeiten.

Ich hatte das gleiche Problem bei der Arbeit mit Angular 2+ und es wurde nur durch wenige einfache Schritte behoben.

In Angular neuesten Versionen gibt es in den kommentierten Codes kommen polyfills.ts zeigt alle erforderlichen polyfills für glätten die IE09, IE10 und IE11 in Internet Explorer - Versionen laufen

/** 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';

Kommentieren Sie die Codes aus und es würde perfekt in IE-Browsern funktionieren

/** 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';

In IE-Browsern kann es jedoch zu Leistungseinbußen im Vergleich zu anderen Browsern kommen :(