IE 11'de kod çalışmıyor, Chrome'da iyi çalışıyor

Aşağıdaki kod, Chrome'da sorunsuz bir şekilde çalıştırılabilir, ancak Internet Explorer 11'de aşağıdaki hatayı atar.

Nesne özelliği veya 'startsWith' yöntemini desteklemiyor

Öğenin kimliğini bir değişkende saklıyorum. Sorun nedir?

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 JavaScript, ES6'nın en son sürümünde standart bir yöntemdir.

Aşağıdaki uyumluluk tablosuna baktığımızda, Internet Explorer'ın sürümleri hariç , mevcut tüm büyük platformlarda desteklendiğini görebiliriz .

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

.startsWithKendinizi uygulamanız gerekecek . İşte çoklu dolgu :

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

text.indexOf("newString")yerine en iyi yöntemdir startsWith.

Misal:

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

Bu ise açısal 2+ uygulamada oluyor yapabilirsiniz sadece yorumsuz dize polyfills polyfills.ts :

import 'core-js/es6/string';

StartsWith işlevini aşağıdakilerle değiştirin:

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

Bu, IE dahil tüm tarayıcıları destekleyecektir

Başlangıç ​​konumundan 0. konum anlamına gelen dize eşleşmesi için konum 0 olarak ayarlanabilir.

Diğerlerinin söylediği gibi startsWith ve endWith, ES6'nın bir parçasıdır ve IE11'de mevcut değildir. Firmamız her zaman IE11 için çoklu dolgu çözümü olarak lodash kütüphanesini kullanmaktadır. https://lodash.com/docs/4.17.4

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

Oka'nın görevi harika çalışırken, biraz modası geçmiş olabilir. Lodash'ın tek bir işlevle başa çıkabileceğini anladım . Yüklü lodash varsa, size birkaç satır kazandırabilir.

Sadece dene:

import { startsWith } from lodash;

. . .

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

Ayrıca son zamanlarda prob ile karşı karşıya kaldım. Ben startwith içinde benzer ^ kullanarak çözüldü jquery. Söyle,

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

kullanabiliriz

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

Burada str, elementin kimliğidir.

Angular2 + projeleriyle çalışırken sorun gelirse bu yöntemi uygulayın

Bu hatayı aldığımda bir çözüm arıyordum ve beni buraya getirdi. Ama bu soru belirli gibi görünüyor ama hata değil, bu genel bir hata. Bu, Internet Explorer ile uğraşan açısal geliştiriciler için yaygın bir hatadır.

Açısal 2+ ile çalışırken aynı sorunu yaşadım ve sadece birkaç basit adımla çözüldü.

Açısal en son sürümlerde, polyfills.ts içinde yorumlanmış kodlar bulunur.ts Internet Explorer IE09, IE10 ve IE11 sürümlerinde sorunsuz çalışması için gereken tüm çoklu dolguları gösterir

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

Kodları açtığınızda IE tarayıcılarında mükemmel çalışır

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

Ancak IE tarayıcılarında diğerlerine göre bir performans düşüşü görebilirsiniz :(