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

156

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>

Erweitern Sie das Snippet

javascript html

— Bhushan Dhamdhere
quelle

9

Sie müssen wahrscheinlich str.indexOf("REP") == 0stattdessen für IE verwenden.

— Grant Thomas

1

ES6 ist noch kein Standard kangax.github.io/compat-table/es6 es eine Bibliothek Shim ES6 ist , den Übergang zu helfen github.com/paulmillr/es6-shim Genau wie für ES5 (einschließlich nicht alles shimmable)

— Xotic750

320

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;
  };
}

— Oka
quelle

3

Es gibt eine weitere Implementierung bei MDN Web Docs

String.prototype.startsWith = function(search, pos) {          return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search;     };

— OCCSking

1

Ich tendiere zur ersten Implementierung von @Oka. Nur als zusätzliche Verfeinerung könnte man testen, ob "Position" wirklich numerisch ist: Position =! IsNaN (parseInt (Position))? Position: 0;

— ErnestV

36

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");
}

— Jona
quelle

Warum ist es die beste Methode?

— TylerH

1

indexOf Die Methode ersetzt nicht die Starts. Mit indexOf wird ein Wert zurückgegeben, wenn er mit einer Stelle in einer bestimmten Zeichenfolge übereinstimmt. Ich empfehle nicht, indexOf zu verwenden.

— RajKumar Samala

12

indexOftut Rückgabewert, aber @Jona hat überprüft , dass der Rückgabewert Null (dh am Anfang der Zeichenfolge ist), was bedeutet , es ist ein guter Ersatz für startsWith!

— SharpC

Dies ist die gleiche Funktionalität wie bei der Polyfüllung, ohne dass eine Polyfüllung hinzugefügt oder eine zusätzliche Bibliothek hinzugefügt werden muss. Es ist eine ausgezeichnete Lösung - der einzige Nachteil, den ich sehen kann, ist vielleicht die Lesbarkeit des Codes - die Absicht ist klarer, wenn die Funktion startWith heißt.

— John T

13

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

import 'core-js/es6/string';

— Vitaliy Ulantikov
quelle

Ich habe das Polyfill-Update des Oka hinzugefügt, aber es hat bei meiner Angular 5-Anwendung nicht funktioniert, aber es wurde import 'core-js/es6/string';behoben. Danke vielmals!

— Decebal

5

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.

— Harshit Pant
quelle

Nützliche Lösung, ohne dass Prototypen neu geschrieben oder Polyfills verwendet werden müssen. Außerdem ist es weitgehend kompatibel mit Browsern. +1

— Sergio A.

2

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])

— mbokil
quelle

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;
       }      
     }

— TheGabornator
quelle

0

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.

— Benutzerlernen
quelle

0

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 :(

— Jithin John
quelle