String Methods

charAt() — เข้าถึงตัวอักษรด้วย index

charAt() คือ method สำหรับเข้าถึงตัวอักษรใน string ตามตำแหน่ง index ที่ระบุ syntax: str.charAt(index) index เริ่มนับจาก 0 — เหมือนที่เราเคยใช้กับ array มาแล้ว charAt() จะคืนค่าเป็น string ความยาว 1 ตัวอักษรที่ตำแหน่งนั้น แต่ถ้า index ที่ระบุเกินขอบเขตของ string (เช่น น้อยกว่า 0 หรือมากกว่าความยาว string) — charAt() จะคืนค่าเป็น empty string "" (string ว่าง) อย่างปลอดภัย โดยไม่เกิด error

console.log("Hello".charAt(0));   // "H" — ตัวแรก
console.log("Hello".charAt(1));   // "e"
console.log("Hello".charAt(4));   // "o" — ตัวสุดท้าย
console.log("Hello".charAt(99));  // "" — เกินขอบเขต
console.log("Hello".charAt(-1));  // "" — ติดลบก็คืนค่าว่าง
console.log("Hello".charAt(-5));  // "" — คืนค่าว่างเช่นกัน

• index เริ่มนับจาก 0 — charAt(0) คือตัวอักษรตัวแรก
• ถ้า index เกินขอบเขต (มากเกินหรือติดลบ) — คืนค่า "" (empty string) โดยไม่ error
• charAt() ใช้ได้กับทุกเบราว์เซอร์ — เป็น method ที่มีมานานตั้งแต่ JavaScript ยุคแรก

at() — ดึงตัวอักษรด้วย negative index

at() คือ method ที่เพิ่มเข้ามาใน ES2022 สำหรับเข้าถึงตัวอักษรใน string ด้วย index เช่นเดียวกับ charAt() syntax: str.at(index) จุดเด่นของ at() คือ รองรับ negative index — เมื่อใส่ค่าติดลบ จะนับถอยหลังจากท้าย string โดย at(-1) คือตัวสุดท้าย, at(-2) คือตัวรองสุดท้าย ไปเรื่อย ๆ นอกจากนี้ at() ยังคืนค่าเป็น undefined เมื่อ index เกินขอบเขต (ต่างจาก charAt() ที่คืน "")

console.log("Hello".at(0));    // "H" — ตัวแรก (เหมือน charAt)
console.log("Hello".at(1));    // "e"
console.log("Hello".at(4));    // "o" — ตัวสุดท้าย
console.log("Hello".at(-1));   // "o" — ตัวสุดท้าย (นับจากท้าย)
console.log("Hello".at(-2));   // "l" — ตัวรองสุดท้าย
console.log("Hello".at(-5));   // "H" — ตัวแรก (นับจากท้าย)
console.log("Hello".at(99));   // undefined — เกินขอบเขต
console.log("Hello".at(-99));  // undefined — เกินขอบเขตเช่นกัน

• positive index (0, 1, 2, ...): ทำงานเหมือน charAt() — นับจากซ้าย
• negative index (-1, -2, -3, ...): นับจากขวา — at(-1) คือตัวสุดท้าย ทำให้โค้ดสั้นลงเมื่อต้องการตัวอักษรจากท้าย
• ถ้า index เกินขอบเขต — คืนค่า undefined (ต่างจาก charAt() ที่คืน "")
• at() เป็น method ใหม่ — เพิ่มใน ES2022 รองรับใน Node.js 16.6+ และเบราว์เซอร์รุ่นใหม่

เหตุผลที่ index เริ่มนับจาก 0

เราเคยใช้ index เริ่มจาก 0 กับ array มาแล้ว — string ก็ใช้หลักการเดียวกัน การนับจาก 0 ไม่ใช่เรื่องบังเอิญ — ในภาษาโปรแกรมส่วนใหญ่ (JavaScript, Python, Java, C) ใช้วิธีนี้เพราะ index แทนค่า offset (ระยะห่างจากจุดเริ่มต้น) charAt(0) หมายถึง "ตัวอักษรที่ offset = 0 จากจุดเริ่มต้น" — ก็คือตัวแรกนั่นเอง at() ก็ใช้หลักการเดียวกันกับ positive index แต่เพิ่มความสามารถในการนับจากท้ายด้วย negative index

let str = "Hello";

// ตำแหน่งของแต่ละตัวอักษร:
//   H   e   l   l   o
//   0   1   2   3   4   ← positive index (charAt, at)
//  -5  -4  -3  -2  -1   ← negative index (at เท่านั้น)

console.log(str.charAt(0));   // "H"
console.log(str.at(-1));      // "o"
console.log(str.charAt(4));   // "o" — เหมือน at(-1)
console.log(str.at(-5));      // "H" — เหมือน charAt(0)

ความแตกต่างระหว่าง charAt() และ at()

แม้ว่าทั้ง charAt() และ at() จะใช้เข้าถึงตัวอักษรใน string ได้ แต่มีข้อแตกต่างสำคัญที่ควรรู้ เพื่อเลือกใช้ให้ถูกกับสถานการณ์:

let str = "JavaScript";

// --- Positive index (ในขอบเขต): เหมือนกัน ---
console.log(str.charAt(0));  // "J"
console.log(str.at(0));      // "J"

// --- Negative index: ต่างกัน ---
console.log(str.charAt(-1)); // "" — charAt ไม่เข้าใจค่า negative
console.log(str.at(-1));     // "t" — at เข้าใจ มันคือตัวสุดท้าย

// --- Index เกินขอบเขต: ต่างกัน ---
console.log(str.charAt(99)); // ""
console.log(str.at(99));     // undefined

// --- ใช้งานจริง: ดึงตัวสุดท้าย ---
console.log(str.at(-1));           // "t" — สั้นสุด
console.log(str.charAt(str.length - 1)); // "t" — ยาวกว่าแต่ใช้ได้ทุกที่

การใช้งานจริง

charAt() และ at() ใช้บ่อยในงานจริงเมื่อต้องการเข้าถึงตัวอักษรที่ตำแหน่งเฉพาะใน string — เช่น ดึงตัวแรก ดึงตัวสุดท้าย วนลูปอ่านทีละตัว หรือสร้างชื่อย่อ มาดูตัวอย่างการใช้งานที่พบบ่อย:

let word = "Programming";

// 1) ดึงตัวแรก — ใช้ charAt(0)
let first = word.charAt(0);
console.log(first);  // "P"

// 2) ดึงตัวสุดท้าย — ใช้ at(-1) สะดวกที่สุด
let last = word.at(-1);
console.log(last);   // "g"

// 3) วนลูปอ่านทีละตัวด้วย charAt()
for (let i = 0; i < word.length; i++) {
  console.log(word.charAt(i));
}
// P  r  o  g  r  a  m  m  i  n  g  (ทีละบรรทัด)

// 4) สร้างชื่อย่อ (initials)
let firstName = "Arraya";
let lastName = "Wongsaita";
let initials = firstName.charAt(0) + lastName.charAt(0);
console.log(initials);  // "AW"

ข้อผิดพลาดที่พบบ่อย

มือใหม่มักเจอข้อผิดพลาดเหล่านี้เมื่อใช้ charAt() และ at():

• ใช้ charAt(-1) แล้วคาดหวังจะได้ตัวสุดท้าย — แต่ได้ "" เพราะ charAt ไม่รองรับ negative index — ให้ใช้ at(-1) หรือ str.charAt(str.length - 1) แทน
• ลืมว่า index เริ่มจาก 0 — ใช้ charAt(1) แล้วคิดว่าได้ตัวแรก แต่จริง ๆ ได้ตัวที่สอง — ตัวแรกคือ charAt(0) เสมอ
• สับสนค่า return ตอน index เกินขอบเขต — charAt() คืน "" (string ว่าง) ส่วน at() คืน undefined — เวลาเอาไปเทียบกับค่าอื่นต้องระวัง type ต่างกัน
• ใช้ at() ในสภาพแวดล้อมเก่าที่ไม่รองรับ — at() ใช้ได้ใน Node.js 16.6+ และเบราว์เซอร์รุ่นใหม่เท่านั้น ถ้าต้องการให้รองรับทุกที่ ให้ใช้ charAt() ร่วมกับ length

let str = "Hello";

// ❌ ผิด: ใช้ charAt(-1) เพื่อเอาตัวสุดท้าย
console.log(str.charAt(-1));  // "" — ไม่ใช่ "o"!

// ✅ ถูก: ใช้ at(-1) หรือ length - 1
console.log(str.at(-1));               // "o"
console.log(str.charAt(str.length - 1)); // "o"

// ❌ ผิด: นับ index ผิด
console.log(str.charAt(1));  // "e" — นี่คือตัวที่สอง ไม่ใช่ตัวแรก

// ✅ ถูก: ตัวแรกคือ index 0
console.log(str.charAt(0));  // "H"

สรุป

• charAt(index) — เข้าถึงตัวอักษรด้วย index ตั้งแต่ 0 คืนค่า "" เมื่อ index เกินขอบเขต (รวม index ติดลบ) รองรับทุกเบราว์เซอร์
• at(index) — เข้าถึงตัวอักษรด้วย index ตั้งแต่ 0 รองรับ negative index (นับจากท้าย) คืนค่า undefined เมื่อ index เกินขอบเขต เพิ่มใน ES2022
• index เริ่มนับจาก 0 เสมอ — charAt(0) และ at(0) คือตัวอักษรตัวแรก
• at(-1) คือวิธีที่สั้นที่สุดในการดึงตัวอักษรตัวสุดท้ายของ string
• ถ้าต้องการความเข้ากันได้กับเบราว์เซอร์เก่า — ใช้ charAt() ถ้าต้องการความสะดวกและรองรับ negative index — ใช้ at()
• ระวังค่า return ต่างกันเมื่อ index เกินขอบเขต: charAt() → "", at() → undefined
• ใช้ charAt() ใน for loop เพื่อวนอ่านตัวอักษรทีละตัว — for (let i = 0; i < str.length; i++) { str.charAt(i); }

Lab 1: ดึงตัวอักษรตัวแรกด้วย charAt(0)

Lab 2: ดึงตัวอักษรตัวสุดท้ายด้วย at(-1)

Lab 3: วนลูปอ่านตัวอักษรทีละตัวด้วย charAt()

Lab 4: ใช้ at() negative index ดึง 3 ตัวสุดท้าย

Lab 5: สร้างชื่อย่อด้วย charAt(0)