IE 11에서 실행되지 않는 코드, Chrome에서 제대로 작동

다음 코드는 Chrome에서 문제없이 실행될 수 있지만 Internet Explorer 11에서는 다음 오류가 발생합니다.

객체가 속성 또는 메소드 'startsWith'를 지원하지 않습니다

요소의 ID를 변수에 저장하고 있습니다. 이슈가 뭐야?

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자신 을 구현해야합니다 . 다음은 polyfill입니다 .

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

이 경우 각도 2+ 응용 프로그램에서 어떤 일이 일어나고을 수행 할 수 있습니다 단지 주석 의 문자열 polyfills polyfills.ts :

import 'core-js/es6/string';

startsWith 기능을 다음과 같이 바꾸십시오.

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

이것은 IE를 포함한 모든 브라우저를 지원합니다

시작 위치 0부터 문자열 일치를 위해 위치를 0으로 설정할 수 있습니다.

다른 사람들이 말했듯이 startsWith와 endsWith는 ES6의 일부이며 IE11에서는 사용할 수 없습니다. 우리 회사는 항상 lodash 라이브러리를 IE11의 폴리 필 솔루션으로 사용합니다. https://lodash.com/docs/4.17.4

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

오카의 게시물은 훌륭하게 작동하지만 약간 구식 일 수 있습니다. lodash 가 하나의 단일 기능으로 해결할 수 있다는 것을 알았 습니다. lodash를 설치 한 경우 몇 줄을 절약 할 수 있습니다.

단지 시도:

import { startsWith } from lodash;

. . .

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

나는 또한 최근 조사에 직면했다. 에서 시작하는 것과 비슷한 ^를 사용하여 해결했습니다 jquery. 말하다,

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

우리는 사용할 수 있습니다

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

여기서 str은 요소의 id입니다.

angular2 + 프로젝트로 작업 할 때 문제가 발생하면이 방법을 따르십시오

이 오류가 발생했을 때 해결책을 찾고 있었고 여기에 도착했습니다. 그러나이 질문은 구체적 인 것처럼 보이지만 오류는 일반적인 오류가 아닙니다. Internet Explorer를 다루는 각도 개발자에게는 일반적인 오류입니다.

각도 2 이상으로 작업하는 동안 동일한 문제가 발생했으며 몇 가지 간단한 단계만으로 해결되었습니다.

Angular 최신 버전에는 polyfills.ts에 주석이 달린 코드가 있습니다. Internet Explorer 버전 IE09, IE10 및 IE11에서 원활하게 실행하는 데 필요한 모든 polyfill이 표시됩니다

/** 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 브라우저의 성능이 저하 될 수 있습니다.