2015-06-16 26 views
99

下面的代碼可以在沒有在Chrome瀏覽器的問題上運行正常,但投在Internet Explorer中出現以下錯誤11代碼,在Chrome

對象不支持屬性或方法'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>

+8

您可能需要使用'str.indexOf(「REP」)== 0'來代替IE。 –

+0

ES6還不是一個標準的https://kangax.github.io/compat-table/es6/有一個ES6 shim庫來幫助轉換https://github.com/paulmillr/es6-shim/就像ES5(包括不是一切都是shimmable) – Xotic750

回答

211

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

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

例子:

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

爲什麼它是最好的方法? – TylerH

+0

indexOf在不替換startsWith的方法中,如果indexOf與給定字符串中的任何位置匹配,它將返回值,我不建議使用indexOf。 –

+0

'indexOf'確實返回值,但是@Jona檢查過返回值爲零(即字符串在開頭),這意味着它*代替'startsWith'! – SharpC

3

如果這是在角2+應用情況發生,可以在polyfills.ts只是取消註釋串polyfills:

import 'core-js/es6/string'; 
1

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

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

添加下面的代碼,JS文件爲我工作:

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

雖然歐卡的職位是偉大的工作,它可能是一個有點過時。我發現lodash可以解決它與一個單一的功能。如果你安裝了lodash,它可能會爲你節省幾行。

試試看:

import { startsWith } from lodash; 

。 。 。

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