代碼不在 IE 11 中運行，在 Chrome 中運行良好

Question

以下代碼可以在 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>

Answer 1

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

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 中取消注釋字符串polyfill ：

import 'core-js/es6/string';

Answer 4

將 startsWith 函數替換為：

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

這將支持包括 IE 在內的所有瀏覽器

位置可以設置為 0 從開始的字符串匹配，意思是第 0 個位置。

Answer 5

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

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

Answer 6

將以下代碼添加到JS文件對我有用：

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

Answer 7

雖然 Oka 的帖子效果很好，但它可能有點過時了。 我發現lodash可以用一個函數來解決它。 如果您安裝了 lodash，它可能會為您節省幾行代碼。

你試一試：

import { startsWith } from lodash;

. . .

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

Answer 8

我最近也遇到了這個問題。 我使用 ^ 解決了，它類似於jquery startwith 。 說，

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

我們可以用

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

這里，str 是元素的 id。

Answer 9

如果在使用 angular2+ 項目時出現問題，請遵循此方法

當我遇到這個錯誤時，我正在尋找解決方案，它讓我來到了這里。 但是這個問題似乎很具體，但錯誤不是，它是一個通用錯誤。 這是 Angular 開發人員處理 Internet Explorer 的常見錯誤。

我在使用 angular 2+ 時遇到了同樣的問題，只需幾個簡單的步驟就可以解決。

在角最新版本，也有在polyfills.ts節目來評論代碼為所有需要的polyfills順利在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 瀏覽器的性能下降:(