Kode tidak berjalan di IE 11, berfungsi dengan baik di Chrome

Kode berikut dapat dijalankan tanpa masalah di Chrome, tetapi melempar kesalahan berikut di Internet Explorer 11.

Objek tidak mendukung properti atau metode 'dimulai dengan'

Saya menyimpan ID elemen dalam sebuah variabel. Apa masalahnya?

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 adalah metode standar dalam versi terbaru JavaScript, ES6.

Melihat tabel kompatibilitas di bawah ini, kita dapat melihat bahwa itu didukung pada semua platform utama saat ini, kecuali versi Internet Explorer.

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

Anda harus menerapkan .startsWithsendiri. Ini adalah polyfill :

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

text.indexOf("newString")adalah metode terbaik, bukan startsWith.

Contoh:

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

Jika ini terjadi di aplikasi Angular 2+, Anda bisa saja menghapus komentar string polyfills di polyfills.ts :

import 'core-js/es6/string';

Ganti fungsi beginWith dengan:

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

Ini akan mendukung semua browser termasuk IE

Posisi dapat diatur ke 0 untuk pencocokan string dari posisi awal yang berarti posisi ke-0.

Seperti yang orang lain katakan beginWith dan endsWith adalah bagian dari ES6 dan tidak tersedia di IE11. Perusahaan kami selalu menggunakan perpustakaan lodash sebagai solusi polyfill untuk IE11. https://lodash.com/docs/4.17.4

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

Meskipun pos Oka berfungsi dengan baik, posisinya mungkin agak ketinggalan jaman. Saya menemukan pondok itu dapat mengatasinya dengan satu fungsi tunggal. Jika Anda telah menginstal lodash, ini mungkin menghemat beberapa baris.

Coba saja:

import { startsWith } from lodash;

. . .

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

Saya juga baru-baru ini menghadapi masalah. Saya diselesaikan menggunakan ^ yang mirip dengan startwith di jquery. Mengatakan,

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

kita bisa menggunakan

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

Di sini, str adalah id elemen.

Ikuti metode ini jika ada masalah saat bekerja dengan proyek angular2 +

Saya sedang mencari solusi ketika saya mendapatkan kesalahan ini, dan itu membuat saya di sini. Tetapi pertanyaan ini tampaknya spesifik tetapi kesalahannya tidak, itu adalah kesalahan umum. Ini adalah kesalahan umum untuk pengembang sudut yang berurusan dengan Internet Explorer.

Saya memiliki masalah yang sama ketika bekerja dengan angular 2+, dan itu diselesaikan hanya dengan beberapa langkah sederhana.

Di versi terbaru Angular, ada kode komentar di polyfills.ts menunjukkan semua polyfill yang diperlukan untuk kelancaran dalam versi Internet Explorer IE09, IE10 dan 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';

Batalkan komentar kode dan itu akan bekerja dengan sempurna di browser 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';

Tapi Anda mungkin melihat penurunan kinerja di browser IE dibandingkan dengan yang lain :(