String Methods

includes() — ตรวจสอบ substring ใน string

includes() คือ method สำหรับตรวจสอบว่า string มี substring (ข้อความย่อย) ที่เราต้องการหาอยู่ข้างในหรือไม่ syntax: str.includes(searchString, position?) includes() จะคืนค่าเป็น boolean: true ถ้าพบ substring นั้นใน string, false ถ้าไม่พบ ไม่มีบอกตำแหน่งให้ — แค่บอกว่า "มีหรือไม่มี" เท่านั้น และเหมือนกับ string method ทุกตัว — includes() จะไม่เปลี่ยน string เดิม (string เป็น immutable) แต่คืนค่า boolean เป็นผลลัพธ์

let text = "JavaScript";

console.log(text.includes("Script"));     // true — "Script" อยู่ใน "JavaScript"
console.log(text.includes("Java"));       // true — "Java" อยู่ใน "JavaScript"
console.log(text.includes("script"));     // false — ตัวพิมพ์เล็ก-ใหญ่ต่างกัน
console.log(text.includes("Python"));     // false — ไม่มี "Python" เลย
console.log(text.includes(""));           // true — string ว่าง "อยู่" ในทุก string
console.log(text);                        // "JavaScript" — ตัวเดิมไม่เปลี่ยน

• includes() คืนค่า boolean — true ถ้าพบ, false ถ้าไม่พบ
• รับ parameter ได้ 2 ตัว: searchString (จำเป็น) และ position (ไม่จำเป็น, default = 0)
• string เดิมไม่ถูกเปลี่ยนแปลง — immutable
• searchString เป็น string ว่าง ("") จะคืนค่า true เสมอ — เพราะ "ไม่มีอะไร" อยู่ในทุก string ทางเทคนิค

Case-Sensitivity — includes() คำนึงถึงตัวพิมพ์เล็ก-ใหญ่

includes() แยกแยะตัวพิมพ์เล็ก (a-z) และตัวพิมพ์ใหญ่ (A-Z) — กล่าวคือมันเป็น case-sensitive "Hello".includes("hello") จะคืนค่า false เพราะ "H" ตัวใหญ่ ไม่ตรงกับ "h" ตัวเล็ก ถ้าต้องการตรวจสอบแบบไม่สนใจ case (case-insensitive) — ให้แปลงทั้ง string ตั้งต้นและ searchString ให้เป็น case เดียวกันก่อนเรียก includes() โดยใช้ toLowerCase() หรือ toUpperCase() ที่เราเรียนไปแล้ว

let phrase = "Hello World";

// --- แบบ case-sensitive (ปกติ) ---
console.log(phrase.includes("Hello"));    // true — ตรงทั้ง case
console.log(phrase.includes("hello"));    // false — h ตัวเล็ก ไม่ตรงกับ H ตัวใหญ่
console.log(phrase.includes("world"));    // false — w ตัวเล็ก ไม่ตรงกับ W ตัวใหญ่

// --- แบบ case-insensitive (แปลงเป็น lowercase ก่อน) ---
console.log(phrase.toLowerCase().includes("hello"));  // true — "hello world" มี "hello"
console.log(phrase.toLowerCase().includes("world"));  // true — "hello world" มี "world"

// ตัวแปรต้นฉบับไม่เปลี่ยน
console.log(phrase);  // "Hello World"

• includes() เป็น case-sensitive — "A" กับ "a" ถือว่าไม่เหมือนกัน
• วิธีทำ case-insensitive search: แปลงทั้งสองด้านเป็น case เดียวกันก่อนด้วย toLowerCase() หรือ toUpperCase()
• รูปแบบที่ใช้บ่อย: str.toLowerCase().includes(search.toLowerCase())

position Parameter — ระบุตำแหน่งเริ่มค้นหา

includes() รับ parameter ตัวที่สองคือ position — ระบุว่าต้องการเริ่มค้นหาจาก index ไหน (default = 0 คือเริ่มจากตัวแรก) syntax: str.includes(searchString, position) กฎสำคัญ: - ถ้าไม่ระบุ position — เริ่มค้นหาจาก index 0 (ต้น string) - ถ้า position >= str.length — คืนค่า false เสมอ เพราะไม่มีอะไรให้ค้นหาตั้งแต่ตำแหน่งนั้น - ถ้า position เป็นค่าติดลบ — จะถูกปรับเป็น 0 (เริ่มจากต้น string) เพราะไม่มีตำแหน่งติดลบ - มีประโยชน์เมื่อต้องการค้นหาหลังจากตำแหน่งที่รู้แล้ว — เช่น ข้าม prefix ที่รู้ว่าอยู่ต้น string

let email = "user@example.com";

// ไม่ระบุ position — เริ่มจาก index 0
console.log(email.includes("@"));          // true — พบ @ ที่ index 4

// ระบุ position = 0 — เหมือนไม่ระบุ
console.log(email.includes("@", 0));       // true

// position = 5 — เริ่มค้นหาจาก index 5 (ตัว "e" ใน "example")
console.log(email.includes("@", 5));       // false — @ อยู่ index 4, เริ่มค้นหาจาก 5 เลยไม่เจอ

// position >= length — false เสมอ
console.log(email.includes("@", 100));     // false — email.length = 17, 100 >= 17

// position ติดลบ — ถูกปรับเป็น 0
console.log(email.includes("user", -5));   // true — -5 ถูกปรับเป็น 0, เริ่มจากต้น

console.log(email);  // "user@example.com" — ไม่เปลี่ยน

• position = 0: เริ่มค้นหาจากตัวแรกของ string (default)
• position >= str.length: คืนค่า false เสมอ — ไม่มีอะไรให้ค้นหา
• position ติดลบ: ถูกปรับเป็น 0 — เริ่มจากต้น string
• ใช้ position เมื่อต้องการค้นหาหลังจากจุดที่รู้แล้ว — เช่น ตรวจสอบว่ามี @ มากกว่าหนึ่งตัวไหม

กรณีพิเศษ — empty string, position เกินขอบเขต และอักขระพิเศษ

includes() มีพฤติกรรมพิเศษบางอย่างที่ควรรู้ — เพื่อไม่ให้แปลกใจเมื่อเจอในโค้ดจริง: 1) searchString เป็น string ว่าง ("") — คืนค่า true เสมอ เพราะ "ไม่มีอะไร" ถือว่าอยู่ในทุก string ในทางเทคนิค 2) position ≥ str.length — คืนค่า false เสมอ เพราะเริ่มค้นหาจากตำแหน่งที่เกินความยาว string — ไม่มีอะไรให้ค้นหา 3) position เป็นค่าติดลบ — จะถูกปรับเป็น 0 (เริ่มจากต้น string) 4) includes() ไม่รองรับ regular expression (RegExp) — ถ้าส่ง regex เข้าไป จะเกิด TypeError — ใช้ได้เฉพาะ string ธรรมดาเท่านั้น

let text = "Hello";

// --- 1) empty string ---
console.log(text.includes(""));           // true — มี "" อยู่ทุกที่

// --- 2) position >= length ---
console.log(text.includes("H", 5));       // false — text.length = 5, เริ่มที่ 5 ไม่มีอะไร
console.log(text.includes("H", 100));     // false — เหมือนกัน

// --- 3) position ติดลบ ---
console.log(text.includes("H", -10));     // true — -10 ถูกปรับเป็น 0, เจอ "H"

// --- 4) includes() ใช้กับ regex ไม่ได้ ---
// text.includes(/ell/);  // ❌ TypeError!
console.log(text.includes("ell"));        // true — ใช้ string ปกติ

• empty string ("") → true เสมอ — ต้องระวังถ้า searchString อาจเป็นค่าว่างจาก user input
• position >= str.length → false เสมอ — ไม่มีข้อยกเว้น
• position ติดลบ → ถูกปรับเป็น 0 — เริ่มค้นหาจากต้น string
• includes() ไม่รองรับ regex — ใช้ string ธรรมดาเท่านั้น — ถ้าต้องการค้นหาด้วย pattern ที่ซับซ้อน ต้องใช้เครื่องมืออื่นในบทต่อ ๆ ไป

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

includes() ใช้บ่อยมากในงานจริงเมื่อต้องการตรวจสอบว่า string มีข้อความที่ต้องการหรือไม่ — เช่น ตรวจสอบ URL, ตรวจสอบ email, ค้นหาคำต้องห้าม, กรองข้อมูล, หรือตรวจสอบ feature มาดูตัวอย่างการใช้งานที่พบบ่อย:

// 1) ตรวจสอบว่า URL ใช้ HTTPS หรือไม่
let url = "https://example.com";
let isSecure = url.includes("https");
console.log(isSecure);  // true

// 2) ตรวจสอบรูปแบบ email แบบง่าย — ต้องมี @
let email = "user@example.com";
let isValidEmail = email.includes("@");
console.log(isValidEmail);  // true

// 3) ค้นหาคำต้องห้าม (content moderation)
let comment = "This is a nice post";
let hasBadWord = comment.includes("badword");
console.log(hasBadWord);  // false

// 4) ตรวจสอบ file extension
let filename = "document.pdf";
let isPdf = filename.includes(".pdf");
console.log(isPdf);  // true

// 5) ค้นหาคำสำคัญ (keyword search)
let article = "JavaScript is a versatile programming language";
let isAboutJS = article.includes("JavaScript");
let isAboutPython = article.includes("Python");
console.log(isAboutJS);      // true
console.log(isAboutPython);  // false

• ตรวจสอบ URL (https, http, domain) — ใช้ includes() เพื่อรู้ว่า URL มีคำที่ต้องการไหม
• ตรวจสอบ email — ใช้ includes('@') ตรวจสอบว่ามี @ หรือไม่ (ขั้นพื้นฐาน)
• Content moderation / กรองคำต้องห้าม — ตรวจสอบว่า comment มีคำที่ไม่เหมาะสมหรือไม่
• ตรวจสอบ file extension — ใช้ includes('.pdf') หรือ includes('.jpg')
• Keyword search — ตรวจสอบว่าเนื้อหามี keyword ที่ต้องการหรือไม่

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

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

• ลืมว่า includes() เป็น case-sensitive — "Hello".includes("hello") → false — ต้องใช้ toLowerCase() ช่วยถ้าต้องการ case-insensitive
• คาดหวังว่า includes() จะนับจำนวนครั้งที่พบ — includes() บอกแค่ว่ามีหรือไม่มี (true/false) ไม่ได้บอกจำนวนครั้งหรือตำแหน่ง — ถ้าต้องการนับหรือหาตำแหน่ง ต้องใช้วิธีอื่นในบทถัด ๆ ไป
• ลืมวงเล็บ () — includes เป็น method ต้องมี () ต่อท้ายเสมอ — str.includes("x") ไม่ใช่ str.includes"x"
• ระบุ position >= str.length — คืนค่า false เสมอ แม้ว่า substring จะมีอยู่จริงใน string ก็ตาม — เพราะเริ่มค้นหาจากตำแหน่งที่เกินขอบเขต
• ลืมว่า string ว่าง ("") คืนค่า true เสมอ — "Hello".includes("") → true — อาจทำให้เกิด bug ถ้าไม่ทันระวัง

let text = "Hello World";

// ❌ ผิด: ลืมว่า case-sensitive
console.log(text.includes("hello"));  // false — ไม่ใช่สิ่งที่คิด!

// ✅ ถูก: ใช้ toLowerCase() เพื่อ case-insensitive
console.log(text.toLowerCase().includes("hello"));  // true

// ❌ ผิด: position >= length — ไม่เจอแม้จะมีอยู่จริง
console.log(text.includes("Hello", 100));  // false

// ✅ ถูก: ใช้ position ในขอบเขต
console.log(text.includes("Hello", 0));    // true

// ❌ ผิด: ส่ง regex เข้าไปใน includes()
// text.includes(/hello/i);  // TypeError!

// ✅ ถูก: ใช้ string ธรรมดา หรือแปลงเป็น lowercase ก่อน
console.log(text.toLowerCase().includes("hello"));  // true

สรุป

• includes(searchString, position?) — ตรวจสอบว่า string มี substring ที่ระบุหรือไม่ คืนค่า boolean (true/false)
• case-sensitive — "Hello" กับ "hello" ถือว่าไม่เหมือนกัน ใช้ toLowerCase() หรือ toUpperCase() เพื่อทำ case-insensitive search
• position parameter — ระบุตำแหน่งเริ่มค้นหา (default = 0) ถ้า position >= str.length จะคืน false เสมอ
• string เดิมไม่เปลี่ยน — immutable — includes() คืนค่า boolean ไม่ใช่ string ใหม่
• ใช้ includes() ใน if statement ได้ตรง ๆ เพราะคืนค่า boolean — if (str.includes(x)) { ... } — ไม่ต้องเทียบกับ true/false
• includes() ไม่รองรับ regular expression — ถ้าส่ง regex เข้าไปจะเกิด TypeError — ใช้ได้เฉพาะ string ธรรมดาเท่านั้น
• ระวัง: string ว่าง ("") จะคืนค่า true เสมอ — "Hello".includes("") → true
• ใช้ includes() ในงานจริงเพื่อตรวจสอบ URL, email, ค้นหา keyword, กรองข้อมูล และ content moderation

Lab 1: includes() พื้นฐาน — ตรวจสอบ substring

Lab 2: Case-Sensitive — includes() แยกแยะตัวพิมพ์เล็ก-ใหญ่

Lab 3: position parameter — เริ่มค้นหาจากตำแหน่งที่กำหนด

Lab 4: includes() + if/else — ตรวจสอบเงื่อนไข

Lab 5: Multi-Keyword — ตรวจสอบหลายคำพร้อมกัน