代码在 IE 11 中不是运行，在 Chrome 中工作正常

Question

以下代码可以运行在Chrome中没有问题，但在Internet Explorer 11中会抛出以下错误。

Object doesn't support property or method '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>

Answer 1

String.prototype.startsWith是ES6最新版本JavaScript中的标准方法。

查看下面的兼容性 table，我们可以看到它在当前所有主要平台上都受支持，除了版本的 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;
  };
}

Answer 2

text.indexOf("newString") 是最好的方法，而不是 startsWith。

示例：

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

Answer 3

如果这种情况发生在 Angular 2+ 应用程序中，您可以 取消注释 polyfills.ts[=15= 中的字符串 polyfills ]:

import 'core-js/es6/string';

Answer 4

正如其他人所说，startsWith 和 endsWith 是 ES6 的一部分，在 IE11 中不可用。我们公司一直使用 lodash 库作为 IE11 的 polyfill 解决方案。 https://lodash.com/docs/4.17.4

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

Answer 5

虽然 Oka 的 post 运行良好，但它可能有点过时了。我发现 lodash 可以用一个函数解决它。如果您安装了 lodash，它可能会为您节省几行。

试一试：

import { startsWith } from lodash;

。 . .

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

Answer 6

我最近也遇到了这个问题。我解决了使用 ^ 类似于 startwith 的问题 jquery。说，

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

我们可以使用

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

这里str是元素的id

Answer 7

将 startsWith 函数替换为：

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

这将支持包括 IE 在内的所有浏览器

Position 可以设置为 0 表示从第 0 个位置开始匹配字符串。

Answer 8

如果在处理 angular2+ 个项目时出现问题，请遵循此方法

当我遇到这个错误时，我正在寻找解决方案，它把我带到了这里。但是这个问题似乎是特定的但错误不是，它是一个通用错误。这是 angular 处理 Internet Explorer 的开发人员的常见错误。

I had the same issue while working with angular 2+, and it got resolved just by few simple steps.

在Angular最新版本中，polyfills.ts中有注释代码，显示了平滑运行中所需的所有polyfill 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 浏览器的性能下降:(

代码在 IE 11 中不是运行，在 Chrome 中工作正常

Code not running in IE 11, works fine in Chrome

javascript

html

startswith

代码在 IE 11 中不是 运行，在 Chrome 中工作正常

Code not running in IE 11, works fine in Chrome

javascript

html

startswith

代码在 IE 11 中不是运行，在 Chrome 中工作正常