string.charAt (x) หรือสตริง [x]?

มีเหตุผลใดบ้างที่ฉันควรใช้string.charAt(x)แทนเครื่องหมายวงเล็บstring[x]?

เครื่องหมายวงเล็บตอนนี้ทำงานบนเบราว์เซอร์หลักทั้งหมดยกเว้น IE7 และด้านล่าง

// Bracket Notation
"Test String1"[6]

// charAt Implementation
"Test String1".charAt(6)

มันเคยเป็นความคิดที่ดีที่จะใช้วงเล็บด้วยเหตุผลเหล่านี้ ( ที่มา ):

สัญกรณ์นี้ไม่ทำงานใน IE7 ข้อมูลโค้ดแรกจะส่งคืนไม่ได้กำหนดใน IE7 หากคุณใช้เครื่องหมายวงเล็บสำหรับสตริงที่อยู่เหนือรหัสของคุณและคุณต้องการย้ายไปที่.charAt(pos)นี่เป็นความเจ็บปวดที่แท้จริง: วงเล็บจะใช้กับรหัสของคุณและไม่มีวิธีที่ง่ายในการตรวจสอบว่าเป็นสตริงหรืออาร์เรย์ / วัตถุ.

คุณไม่สามารถตั้งค่าตัวละครโดยใช้สัญลักษณ์นี้ เนื่องจากไม่มีการเตือนใด ๆ สิ่งนี้ทำให้สับสนและหงุดหงิดจริงๆ หากคุณใช้ .charAt(pos)ฟังก์ชั่นคุณจะไม่ถูกล่อลวงให้ทำเช่นนั้น

จากMDN :

มีสองวิธีในการเข้าถึงอักขระแต่ละตัวในสตริง แรกคือcharAtวิธีการเป็นส่วนหนึ่งของ ECMAScript 3:

return 'cat'.charAt(1); // returns "a"

อีกวิธีหนึ่งคือการใช้สตริงเป็นวัตถุคล้ายอาร์เรย์ซึ่งอักขระแต่ละตัวตรงกับดัชนีตัวเลข เบราว์เซอร์ส่วนใหญ่ได้รับการสนับสนุนตั้งแต่เวอร์ชันแรกยกเว้น IE มันเป็นมาตรฐานใน ECMAScript 5:

return 'cat'[1]; // returns "a"

วิธีที่สองต้องการการสนับสนุน ECMAScript 5 (และไม่รองรับในเบราว์เซอร์รุ่นเก่าบางรุ่น)

ในทั้งสองกรณีความพยายามที่จะเปลี่ยนอักขระแต่ละตัวจะไม่ทำงานเนื่องจากสตริงนั้นไม่เปลี่ยนรูปนั่นคือคุณสมบัติของพวกมันไม่ใช่ทั้ง "เขียนได้" หรือ "กำหนดค่าได้"

• str.charAt(i) จะดีกว่าจากมุมมองความเข้ากันได้ถ้าต้องการความเข้ากันได้ IE6 / IE7
• str[i] ทันสมัยกว่าและใช้งานได้ใน IE8 + และเบราว์เซอร์อื่น ๆ ทั้งหมด (Edge / Firefox / Chrome, Safari 2+, iOS / Android ทั้งหมด)

พวกเขาสามารถให้ผลลัพธ์ที่แตกต่างในกรณีขอบ

'hello'[NaN] // undefined
'hello'.charAt(NaN) // 'h'

'hello'[true] //undefined
'hello'.charAt(true) // 'e'

ฟังก์ชั่นจรัสขึ้นอยู่กับว่าดัชนีจะถูกแปลงเป็นจำนวนในสเปค

String.charAt () เป็นมาตรฐานดั้งเดิมและใช้ได้กับเบราว์เซอร์ทั้งหมด ใน IE 8+ และเบราว์เซอร์อื่นคุณสามารถใช้เครื่องหมายวงเล็บเพื่อเข้าถึงตัวละคร แต่ IE 7 และด้านล่างไม่รองรับ

หากใครต้องการใช้เครื่องหมายวงเล็บใน IE 7 จริง ๆ ก็ควรแปลงสตริงเป็นอาร์เรย์ที่ใช้str.split('')แล้วใช้เป็นอาร์เรย์เข้ากันได้กับเบราว์เซอร์ใด ๆ

var testString = "Hello"; 
var charArr = testString.split("");
charArr[1]; // "e"

ผลลัพธ์ที่น่าสนใจมากเมื่อคุณทดสอบการเข้าถึงดัชนีสตริงเทียบกับcharAt()วิธีการ ดูเหมือนว่า Chrome เป็นเบราว์เซอร์เดียวที่ถูกใจcharAtมากขึ้น

CharAt กับดัชนี 1

ChartAt กับดัชนี 2

ChartAt กับดัชนี 3

มีความแตกต่างเมื่อคุณพยายามเข้าถึงดัชนีซึ่งอยู่นอกขอบเขตหรือไม่ใช่จำนวนเต็ม

string[x]ส่งคืนอักขระที่xตำแหน่ง th stringหากxเป็นจำนวนเต็มระหว่าง 0 ถึงstring.length-1และจะส่งกลับเป็นundefinedอย่างอื่น

string.charAt(x)แปลงxเป็นจำนวนเต็มโดยใช้กระบวนการที่อธิบายไว้ที่นี่ (ซึ่งโดยทั่วไปจะปัดเศษxลงถ้าxไม่ใช่ตัวเลขจำนวนเต็มและส่งคืน 0 ถ้าparseInt(x)มีNaN) จากนั้นส่งคืนอักขระที่ตำแหน่งนั้นถ้าจำนวนเต็มอยู่ระหว่าง 0 ถึงstring.length-1และคืนสตริงว่างเปล่า .

นี่คือตัวอย่างบางส่วน:

"Hello"[313]    //undefined
"Hello".charAt(313)    //"", 313 is out of bounds

"Hello"[3.14]    //undefined
"Hello".charAt(3.14)    //'l', rounds 3.14 down to 3

"Hello"[true]    //undefined
"Hello".charAt(true)    //'e', converts true to the integer 1

"Hello"["World"]    //undefined
"Hello".charAt("World")    //'H', "World" evaluates to NaN, which gets converted to 0

"Hello"[Infinity]    //undefined
"Hello".charAt(Infinity)    //"", Infinity is out of bounds

ความแตกต่างอีกอย่างก็คือการมอบหมายให้string[x]ทำอะไร (ซึ่งอาจทำให้สับสน) และการมอบหมายให้string.charAt(x)เป็นข้อผิดพลาด (ตามที่คาดไว้):

var str = "Hello";
str[0] = 'Y';
console.log(str);    //Still "Hello", the above assignment did nothing
str.charAt(0) = 'Y';    //Error, invalid left-hand side in assignment

เหตุผลที่มอบหมายให้string[x]ไม่ทำงานเป็นเพราะสาย Javascript จะไม่เปลี่ยนรูป