String Methods

`includes()`, `startsWith()`, `endsWith()` — สาม method เช็ค substring ใน string

JavaScript มี method บน string 3 ตัวที่ใช้ตรวจสอบว่า string มี substring ที่ต้องการหรือไม่ — ทั้ง 3 ตัวคืนค่าเป็น boolean (true/false) และเป็น case-sensitive เหมือนกันทั้งหมด • `includes()` — ตรวจสอบว่า substring ปรากฏอยู่ตรงไหนก็ได้ใน string • `startsWith()` — ตรวจสอบว่า string เริ่มต้นด้วย substring ที่กำหนด • `endsWith()` — ตรวจสอบว่า string ลงท้ายด้วย substring ที่กำหนด ทั้ง 3 method ใช้สำหรับตัดสินใจแบบใช่/ไม่ใช่ — ไม่ได้คืน index หรือ substring — ทำให้อ่านง่ายและใช้ใน if ได้โดยตรง

const text = "JavaScript สนุกมาก";

// includes() — เช็คว่ามี substring อยู่ตรงไหนก็ได้
console.log(text.includes("สนุก"));   // true — "สนุก" อยู่กลาง text
console.log(text.includes("Python")); // false — ไม่มี "Python" ใน text

// startsWith() — เช็คว่าเริ่มต้นด้วย substring
console.log(text.startsWith("Java")); // true — text ขึ้นต้นด้วย "Java"
console.log(text.startsWith("สนุก")); // false — ไม่ได้เริ่มด้วย "สนุก"

// endsWith() — เช็คว่าลงท้ายด้วย substring
console.log(text.endsWith("มาก"));    // true — text ลงท้ายด้วย "มาก"
console.log(text.endsWith("Java"));   // false — ไม่ได้ลงท้ายด้วย "Java"

สังเกตว่าโค้ดอ่านง่าย — `text.includes('สนุก')` แปลตรงตัวว่า "text มีคำว่า 'สนุก' หรือเปล่า" — ต่างจากการใช้ indexOf() ที่ต้องเช็ก !== -1 กฎพื้นฐานที่ทั้ง 3 method ใช้ร่วมกัน: • case-sensitive — ตัวพิมพ์เล็ก/ใหญ่ต้องตรงกัน • return boolean — true (เจอ) หรือ false (ไม่เจอ) • รับ parameter แรกเป็น searchString (string ที่ต้องการค้น) • รับ parameter ที่สองเป็น position (ควบคุมจุดเริ่มค้น — แต่ความหมายต่างกันใน endsWith)

`includes()` — เช็คว่ามี substring อยู่ตรงไหนก็ได้

includes() เป็น method ที่ใช้บ่อยที่สุดใน 3 ตัว — ใช้เมื่ออยากรู้ว่า string มีคำหรือข้อความที่ต้องการหรือไม่ โดยไม่สนว่าอยู่ตำแหน่งไหน syntax: `string.includes(searchString, position)` • searchString — substring ที่ต้องการค้นหา (จำเป็น) • position — เริ่มค้นจาก index นี้ (ไม่จำเป็น, default = 0) • return true ถ้าเจอ searchString ที่ index >= position, false ถ้าไม่เจอ

const description = "เรียนรู้ JavaScript string methods วันนี้";

// เช็คว่ามีคำว่า "JavaScript" หรือไม่
console.log(description.includes("JavaScript")); // true

// เช็คว่ามีคำว่า "python" หรือไม่ (case-sensitive!)
console.log(description.includes("python"));     // false

// ใช้ใน if เพื่อควบคุมโปรแกรม
if (description.includes("JavaScript")) {
  console.log("บทความเกี่ยวกับ JavaScript ✓");
}

// === use case: ตรวจสอบ URL
const url = "/learn/javascript/string-methods";
console.log(url.includes("/javascript/"));  // true — อยู่ในหมวด javascript
console.log(url.includes("/css/"));         // false — ไม่อยู่ในหมวด css

// === use case: กรองข้อความที่มี keyword
const messages = ["ซื้อของสำเร็จ", "ข้อผิดพลาด: 404", "ซื้อของไม่สำเร็จ"];
for (const msg of messages) {
  if (msg.includes("ข้อผิดพลาด")) {
    console.log("🔴", msg);
  } else {
    console.log("🟢", msg);
  }
}

จุดแข็งของ includes(): อ่านง่ายที่สุดใน 3 method — แค่ `str.includes('keyword')` ก็ตอบคำถาม "มี keyword ไหม" ได้ทันที ข้อสังเกต: includes() จะ return true แม้ searchString อยู่ตรงกลาง ต้น หรือท้าย string — ถ้าอยากระบุตำแหน่งแบบเป๊ะ ๆ ให้ใช้ startsWith() หรือ endsWith() แทน

`startsWith()` / `endsWith()` — เช็ค prefix และ suffix แบบตรงจุด

startsWith() และ endsWith() ใช้เมื่ออยากรู้ว่า string เริ่มต้นหรือลงท้ายด้วย substring ที่กำหนด — แคบกว่า includes() แต่ตอบโจทย์งานเฉพาะทางได้ดีกว่า syntax: • `string.startsWith(searchString, position)` — เช็คว่าที่ index position ขึ้นต้นด้วย searchString หรือไม่ • `string.endsWith(searchString, length)` — เช็คว่าในความยาว length ตัวแรก ลงท้ายด้วย searchString หรือไม่ ⚠️ จุดต่างสำคัญ: parameter ตัวที่ 2 ของ endsWith คือ **ความยาวของ string ที่จะตรวจสอบ** (length) — ไม่ใช่ index เริ่มต้นเหมือน includes กับ startsWith

const filename = "report-2024.pdf";
const apiUrl = "https://api.example.com/data";
const productCode = "TH-001-2024";

// === startsWith() — เช็ค prefix
console.log(filename.startsWith("report")); // true — ขึ้นต้นด้วย "report"

// เช็ค protocol
console.log(apiUrl.startsWith("https://"));  // true — ใช้ HTTPS
console.log(apiUrl.startsWith("http://"));   // false — ไม่ใช่ HTTP

// เช็ครหัสประเทศ
console.log(productCode.startsWith("TH-"));  // true — สินค้าจากไทย
console.log(productCode.startsWith("JP-"));  // false

// startsWith ใช้กับ if ได้โดยตรง
if (apiUrl.startsWith("https://")) {
  console.log("เชื่อมต่อแบบปลอดภัย ✓");
}

const filename = "report-2024.pdf";
const email = "user@example.com";

// === endsWith() — เช็ค suffix
console.log(filename.endsWith(".pdf"));  // true — เป็นไฟล์ PDF
console.log(filename.endsWith(".jpg"));  // false — ไม่ใช่รูปภาพ

// เช็คโดเมนอีเมล
console.log(email.endsWith("@example.com")); // true — อีเมลองค์กร

// === use case: ตรวจสอบประเภทไฟล์ก่อนอัปโหลด
const allowedExtensions = [".pdf", ".jpg", ".png"];
const uploadFile = "avatar.jpg";

const isAllowed = allowedExtensions.some((ext) =>
  uploadFile.endsWith(ext)
);
console.log("อัปโหลดได้:", isAllowed); // true

ใช้ `position` parameter — ควบคุมช่วงที่ค้นหา

ทั้ง 3 method รับ parameter ตัวที่ 2 — แต่ความหมายแตกต่างกันระหว่าง includes/startsWith กับ endsWith • `includes(searchString, position)` — เริ่มค้นตั้งแต่ index position เป็นต้นไป • `startsWith(searchString, position)` — ตรวจสอบว่าที่ index position ขึ้นต้นด้วย searchString หรือไม่ • `endsWith(searchString, length)` — ใช้เฉพาะ length ตัวอักษรแรกของ string มาตรวจสอบว่าลงท้ายด้วย searchString หรือไม่ ⚠️ จุดที่คนมักสับสน: `endsWith(x, 10)` ไม่ได้แปลว่า "เริ่มค้นจากท้าย 10 ตัว" — แต่มันแปลว่า "ตัด string ให้เหลือ 10 ตัวแรก แล้วเช็คว่าลงท้ายด้วย x หรือไม่"

const text = "JavaScript เป็นภาษาที่สนุกมาก";

// === includes(position) — เริ่มค้นจาก index นี้
console.log(text.includes("Java"));       // true — "Java" อยู่ที่ index 0
console.log(text.includes("Java", 0));    // true — เริ่มจาก index 0 → เจอ
console.log(text.includes("Java", 1));    // false — เริ่มจาก index 1 → ไม่เจอ
console.log(text.includes("สนุก"));       // true — "สนุก" อยู่ท้าย string
console.log(text.includes("สนุก", 20));   // true — เริ่มจาก index 20 → เจอ

// === startsWith(position) — เช็คว่า ที่ index นี้ขึ้นต้นด้วยอะไร
console.log(text.startsWith("Java"));     // true — index 0 ขึ้นต้นด้วย "Java"
console.log(text.startsWith("Script", 4)); // true — index 4 ขึ้นต้นด้วย "Script"
console.log(text.startsWith("สนุก", 0));  // false — index 0 ขึ้นต้นด้วย "Java" ไม่ใช่ "สนุก"

const text = "JavaScript เป็นภาษาที่สนุกมาก";
// จำนวนตัวอักษรทั้งหมด: 34 ตัว (รวมช่องว่าง)

// === endsWith(length) — length = ตัด string ให้เหลือกี่ตัว แล้วเช็ค suffix
console.log(text.endsWith("มาก"));     // true — "มาก" อยู่ท้าย string
console.log(text.endsWith("มาก", 34)); // true — 34 ตัวแรก (= ทั้งหมด) → ลงท้ายด้วย "มาก"
console.log(text.endsWith("มาก", 10)); // false — 10 ตัวแรก = "JavaScript" → ลงท้ายด้วย "t"

// === use case: endsWith กับ length
const filename = "report-2024-final.pdf";
// เช็คว่า 7 ตัวแรก (report-) ตามด้วยปี 4 หลักหรือไม่
// "report-" = 7 ตัว + "2024" = 4 ตัว → length = 11
console.log(filename.endsWith("2024", 11)); // true

// เช็ค domain ว่าเป็น .com โดยดูแค่ส่วนก่อน query string
const url = "example.com?page=1";
console.log(url.endsWith(".com"));        // false — ลงท้ายด้วย "?page=1"
console.log(url.endsWith(".com", 11));    // true — 11 ตัวแรก = "example.com"

สรุป position parameter: • `includes(str, pos)` และ `startsWith(str, pos)` — pos คือ index เริ่มต้น (default = 0) • `endsWith(str, length)` — length คือจำนวนตัวอักษรจากต้น string ที่ใช้ตรวจสอบ (default = string.length) • ถ้า pos >= string.length — includes() return false ทันที (ไม่มีอะไรให้ค้น) • `startsWith('', pos)` return true เสมอ — empty string อยู่ทุกตำแหน่ง

เปรียบเทียบ `String.includes()` กับ `Array.includes()` — เหมือนทางแนวคิด ต่างที่ input

คุณเรียน Array.includes() มาแล้ว — String.includes() ทำงานด้วยหลักการเดียวกัน คือเช็คว่า "มีสิ่งนี้อยู่หรือไม่" และคืน boolean ความต่างที่สำคัญ:

const tags = ["javascript", "array", "string"];
const description = "เรียนรู้ JavaScript string methods";

// === Array.includes — เช็คว่า array มี element นี้หรือไม่
if (tags.includes("javascript")) {
  console.log("มี tag javascript ✓");
}

// === String.includes — เช็คว่า string มี substring นี้หรือไม่
if (description.includes("JavaScript")) {
  console.log("เป็นบทความ JavaScript ✓");
}

// === ใช้ร่วมกัน — ตรวจสอบว่า description มี tag ไหนบ้าง
for (const tag of tags) {
  if (description.toLowerCase().includes(tag)) {
    console.log("description พูดถึง:", tag);
  }
}
// output: "description พูดถึง: javascript"

กฎง่าย ๆ ในการเลือกใช้: • มี array → ใช้ Array.includes() • มี string → ใช้ String.includes() • อยากรู้แค่มีหรือไม่ → includes() ทั้งคู่ • อยากรู้ prefix/suffix → startsWith() / endsWith() เฉพาะ string ⚠️ ข้อระวัง: `'hello'.includes('')` return true เสมอ — empty string ถือว่าเป็น substring ของทุก string

จุดที่มือใหม่มักพลาด

• case-sensitive — `'Hello'.includes('hello')` = false — ทั้ง 3 method มองว่าตัวพิมพ์เล็ก/ใหญ่เป็นคนละตัว ถ้าอยากค้นแบบไม่สน case ให้ใช้ `str.toLowerCase().includes(keyword.toLowerCase())`
• endsWith(position) ไม่ใช่ index เริ่ม — `str.endsWith('x', 5)` แปลว่า "ตัด str ให้เหลือ 5 ตัวแรก แล้วเช็คว่าลงท้ายด้วย x" — ไม่ใช่ "เริ่มค้นจากตำแหน่งที่ 5"
• startsWith(position) เช็คแค่ index เดียว — `str.startsWith('x', 3)` ไม่ได้แปลว่า "มี x ตั้งแต่ index 3 เป็นต้นไป" — มันแปลว่า "ที่ index 3 พอดีคือ x หรือไม่" — ถ้าอยากรู้ว่ามี x ตั้งแต่ index 3 → ใช้ includes('x', 3)
• empty string — `str.includes('')`, `str.startsWith('')`, `str.endsWith('')` return true เสมอ — อย่าใช้เช็ค string ว่างด้วยวิธีนี้
• ไม่มี type coercion — `'123'.includes(123)` = false — JavaScript ไม่แปลง number → string ให้อัตโนมัติ (ต่างจาก `==`) — ต้องส่ง string เท่านั้น
• includes vs indexOf — `str.includes('x')` อ่านง่ายกว่า `str.indexOf('x') !== -1` แต่ indexOf ยังจำเป็นเมื่อต้องการรู้ตำแหน่ง — เลือกใช้ตามความต้องการ

Lab 1: ใช้ `includes()` ตรวจสอบ substring ใน string

Lab 2: ใช้ `startsWith()` และ `endsWith()` ตรวจสอบ prefix/suffix

Lab 3: ใช้ `position` parameter กับ `includes()` และ `endsWith()`

Lab 4: รวมใช้จริง — ตรวจสอบความถูกต้องของ input