รหัสไม่ทำงานใน IE 11 ทำงานได้ดีใน Chrome

156

รหัสต่อไปนี้สามารถทำงานได้โดยไม่มีปัญหาใน 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>

ขยายตัวอย่างข้อมูล

javascript html

— Bhushan Dhamdhere
แหล่งที่มา

9

คุณอาจต้องใช้str.indexOf("REP") == 0IE แทน

— โทมัส

1

ES6 ยังไม่เป็นมาตรฐานkangax.github.io/compat-table/es6มีไลบรารี shim ES6 ที่จะช่วยให้การเปลี่ยนแปลงgithub.com/paulmillr/es6-shimเหมือนกับ ES5 (รวมถึงทุกอย่างที่ไม่สามารถเปลี่ยนได้)

— Xotic750

320

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

— Oka
แหล่งที่มา

3

มีการนำไปใช้งานอื่นที่MDN เอกสารเว็บ

String.prototype.startsWith = function(search, pos) {          return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search;     };

— oCcSking

1

ฉันมักจะใช้งานครั้งแรกตามที่ @Oka มอบให้ เช่นเดียวกับการปรับแต่งเพิ่มเติมที่หนึ่งอาจทดสอบสำหรับ "ตำแหน่ง" เป็นตัวเลขจริง ๆ : ตำแหน่ง =! isNaN (parseInt (ตำแหน่ง))? ตำแหน่ง: 0;

— ErnestV

36

text.indexOf("newString")startsWithเป็นวิธีที่ดีที่สุดแทน

ตัวอย่าง:

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

— Jona
แหล่งที่มา

ทำไมจึงเป็นวิธีที่ดีที่สุด

— TylerH

1

วิธีการ indexOf ไม่ได้แทนที่สำหรับ startsWith, indexOf จะคืนค่าถ้าตรงกับที่ใดในสตริงที่กำหนดฉันไม่แนะนำให้ใช้ indexOf

— RajKumar Samala

12

indexOfไม่ค่าตอบแทน แต่ @Jona มีการตรวจสอบว่าค่าตอบแทนเป็นศูนย์ (เช่นสตริงเป็นที่จุดเริ่มต้น) ความหมายก็คือการเปลี่ยนที่ดีสำหรับstartsWith!

— SharpC

นี่คือฟังก์ชั่นเดียวกับ polyfill โดยไม่ต้องเพิ่ม polyfill หรือนำไลบรารีเพิ่มเติมเข้ามา มันเป็นทางออกที่ยอดเยี่ยม - ข้อเสียเพียงอย่างเดียวที่ฉันเห็นก็คือบางทีการอ่านโค้ดได้ - ความตั้งใจชัดเจนมากขึ้นเมื่อฟังก์ชั่นชื่อเริ่มต้นด้วย

— John T

13

หากสิ่งนี้เกิดขึ้นในแอปพลิเคชัน Angular 2+ คุณสามารถยกเลิกการคอมเม้นต์สตริง polyfills ในpolyfills.ts :

import 'core-js/es6/string';

— Vitaliy Ulantikov
แหล่งที่มา

ฉันได้เพิ่มการแก้ไขโพลีฟิลของ Oka แต่มันไม่ได้ผลสำหรับแอปพลิเคชัน Angular 5 ของฉัน แต่import 'core-js/es6/string';แก้ไขได้ ขอบคุณมาก!

— หลอกลวง

5

แทนที่ฟังก์ชัน startsWith ด้วย:

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

สิ่งนี้จะรองรับเบราว์เซอร์ทั้งหมดรวมถึง IE

ตำแหน่งสามารถตั้งค่าเป็น 0 สำหรับการจับคู่สตริงจากจุดเริ่มต้นหมายถึงตำแหน่งที่ 0

— หอบ Harshit
แหล่งที่มา

โซลูชันที่มีประโยชน์โดยไม่ต้องเขียนต้นแบบใหม่หรือใช้โพลีฟิล นอกจากนี้ยังสามารถใช้งานได้กับเบราว์เซอร์ +1

— Sergio A.

2

ตามที่คนอื่น ๆ ได้บอกว่าเริ่มต้นด้วยและจบลงด้วยเป็นส่วนหนึ่งของ ES6 และไม่สามารถใช้ได้ใน IE11 บริษัท ของเราใช้ห้องสมุด Lodash เป็นโซลูชั่น polyfill สำหรับ IE11 เสมอ https://lodash.com/docs/4.17.4

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

— mbokil
แหล่งที่มา

0

ในขณะที่โพสต์ของ Oka ทำงานได้ดีมันอาจจะล้าสมัยไปนิด ฉันพบว่าlodashสามารถจัดการมันได้ด้วยฟังก์ชั่นเดียว หากคุณติดตั้ง lodash ไว้อาจทำให้คุณไม่กี่บรรทัด

เพียงแค่พยายามที่:

import { startsWith } from lodash;

. . .

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

— TheGabornator
แหล่งที่มา

0

ฉันเพิ่งเผชิญปัญหา ฉันแก้ไขการใช้ ^ ซึ่งคล้ายกับ startwith jqueryค่ะ พูด,

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

เราสามารถใช้

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

ที่นี่ str คือ id ขององค์ประกอบ

— การเรียนรู้ของผู้ใช้
แหล่งที่มา

0

ทำตามวิธีนี้หากมีปัญหาเกิดขึ้นเมื่อทำงานกับ angular2 + projects

ฉันกำลังหาวิธีแก้ปัญหาเมื่อฉันได้รับข้อผิดพลาดนี้และทำให้ฉันมาที่นี่ แต่คำถามนี้ดูเหมือนจะเจาะจง แต่ข้อผิดพลาดไม่ใช่ข้อผิดพลาดทั่วไป นี่เป็นข้อผิดพลาดทั่วไปสำหรับผู้พัฒนาเชิงมุมที่เกี่ยวข้องกับ Internet Explorer

ฉันมีปัญหาเดียวกันในขณะที่ทำงานกับ angular 2+ และได้รับการแก้ไขเพียงไม่กี่ขั้นตอน

ใน Angular เวอร์ชันล่าสุดมีรหัสความคิดเห็นมาใน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 เมื่อเทียบกับที่อื่น :(

— jithin john
แหล่งที่มา