-Code nicht in IE läuft 11 funktioniert in Chrome

Question

Der folgende Code kann ohne Probleme in Chrome ausgeführt werden, sondern führt den folgenden Fehler in Internet Explorer 11.

Objekt nicht Eigenschaft oder diese Methode nicht unterstützt '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>

Answer 1

String.prototype.startsWith ist eine Standardmethode in der neuesten Version von JavaScript, ES6.

Mit Blick auf die Kompatibilitätstabelle unten können wir sehen, dass es auf allen aktuellen großen Plattformen unterstützt wird, außer Versionen von Internet Explorer.

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

Sie müssen .startsWith selbst implementieren. Hier ist die polyfill:

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

Answer 2

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

Beispiel:

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

Answer 3

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

import 'core-js/es6/string'; 

Answer 4

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

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

Answer 5

den Code unten zu JS-Datei Hinzufügen arbeitete für mich:

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

Answer 6

Während die Post von Oka großen arbeitet, könnte es ein bisschen veraltet sein. Ich fand heraus, dass lodash es mit einer einzigen Funktion angehen kann. Wenn Sie lodash installiert haben, können Sie sich ein paar Zeilen sparen.

Versuche mal:

import { startsWith } from lodash; 

. . .

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