Код не працює в IE 11, прекрасно працює в Chrome

Наступний код можна без проблем запустити в Chrome, але в Internet Explorer 11 виникла така помилка.

Об'єкт не підтримує властивість або метод "startWith"

Я зберігаю ідентифікатор елемента у змінній. У чому питання?

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.

Переглядаючи таблицю сумісності нижче, ми бачимо, що вона підтримується на всіх поточних основних платформах, крім версій Internet Explorer.

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

Вам потрібно буде реалізувати .startsWithсебе. Ось поліфіл :

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

text.indexOf("newString") найкращий метод замість startsWith .

Приклад:

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

Якщо це відбувається в застосуванні Angular 2+, ви можете просто відміняти рядок polyfills у polyfills.ts :

import 'core-js/es6/string';

Замініть функцію startWith:

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

Це підтримуватиме всі браузери, включаючи IE

Позицію можна встановити на 0 для відповідності рядків із початкового значення 0-го положення.

Як вже говорили інші, запускиWith і EndWith є частиною ES6 і не доступні в IE11. Наша компанія завжди використовує бібліотеку lodash як рішення для заповнення IE11. https://lodash.com/docs/4.17.4

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

Хоча посада Оки працює чудово, вона може бути трохи застарілою. Я зрозумів, що ломаш може вирішити це однією єдиною функцією. Якщо ви встановили lodash, це може заощадити кілька рядків.

Просто спробуйте:

import { startsWith } from lodash;

. . .

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

Я також нещодавно зіткнувся з проблемою. Я вирішив за допомогою ^, що схоже на startwith в jquery. Сказати,

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

ми можемо використовувати

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

Тут str - це ідентифікатор елемента.

Дотримуйтесь цього методу, якщо виникає проблема під час роботи з проектами angular2 +

Коли я отримав цю помилку, я шукав рішення, і воно мене тут. Але це питання видається специфічним, але помилка - це не загальна помилка. Це поширена помилка для кутових розробників, які працюють із Internet Explorer.

У мене була та сама проблема під час роботи з кутовим 2+, і це було вирішено лише декількома простими кроками.

В останніх версіях Angular є коди, що коментуються у polyfills.ts показує всі поліполи, необхідні для безперебійної роботи у версіях Internet Explorer IE09, IE10 та 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';

Відкиньте коди, і це буде чудово працювати в браузерах 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';

Але ви можете побачити зниження продуктивності в браузерах IE порівняно з іншими :(