Mã không chạy trong trình duyệt IE 11, hoạt động tốt trong Chrome

Question

Các mã sau đây có thể chạy mà không có một vấn đề trong Chrome, nhưng ném các lỗi sau trong Internet Explorer 11.

Object không hỗ trợ tài sản hoặc phương pháp 'startsWith'

Tôi đang lưu trữ ID của phần tử trong một biến. Vấn đề là gì?

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 là một phương pháp tiêu chuẩn trong các phiên bản gần đây nhất của JavaScript, ES6.

Nhìn vào bảng tương thích bên dưới, chúng ta có thể thấy rằng nó được hỗ trợ trên tất cả các nền tảng chính hiện tại, ngoại trừ phiên bản của Internet Explorer.

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

Bạn sẽ cần phải thực hiện .startsWith mình. Đây là 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") là phương pháp tốt nhất thay vì startsWith.

Ví dụ:

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

Answer 3

Nếu điều này xảy ra trong ứng dụng 2+ kiễu góc, bạn có thể chỉ bỏ ghi chú chuỗi polyfills trong polyfills.ts:

import 'core-js/es6/string'; 

Answer 4

Như những người khác đã nói startsWith và endsWith là một phần của ES6 và không có sẵn trong IE11. Công ty chúng tôi luôn sử dụng thư viện lodash như một giải pháp polyfill cho IE11. https://lodash.com/docs/4.17.4

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

Answer 5

Thêm mã dưới đây để tập tin JS làm việc cho tôi:

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

Answer 6

Trong khi các bài viết của Oka đang làm việc rất tốt, nó có thể là một chút lỗi thời. Tôi đã tìm ra rằng lodash có thể giải quyết nó với một chức năng duy nhất. Nếu bạn đã cài đặt lodash, nó có thể giúp bạn tiết kiệm một vài dòng.

Chỉ cần cố gắng:

import { startsWith } from lodash; 

. . .

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