String Methods

startsWith() — ตรวจสอบว่า string ขึ้นต้นด้วยข้อความที่กำหนดหรือไม่

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

let text = "JavaScript";

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

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

การใช้งานพื้นฐาน

startsWith() มีประโยชน์เมื่อเราต้องการตรวจสอบ prefix — ข้อความส่วนหน้าของ string — เช่น ตรวจสอบว่า filename ขึ้นต้นด้วยคำที่กำหนด, URL ใช้ https หรือไม่, หรือรหัสสินค้าขึ้นต้นด้วยหมวดที่ถูกต้อง เรามาลองใช้ startsWith() ในสถานการณ์ที่หลากหลายขึ้น:

// ตรวจสอบ filename prefix
let filename = "report-2024.pdf";
console.log(filename.startsWith("report"));   // true — ขึ้นต้นด้วย "report"
console.log(filename.startsWith("image"));    // false — ขึ้นต้นด้วย "report" ไม่ใช่ "image"

// ตรวจสอบ URL protocol
let url = "https://example.com";
console.log(url.startsWith("https"));         // true — URL ใช้ HTTPS
console.log(url.startsWith("http"));          // true — "https" ขึ้นต้นด้วย "http"
console.log(url.startsWith("ftp"));           // false — ไม่ได้ใช้ FTP

// ตรวจสอบรหัสสินค้า
let productCode = "TH-001";
console.log(productCode.startsWith("TH-"));   // true — สินค้าจากประเทศไทย

// ตรวจสอบคำนำหน้าชื่อ
let name = "Mr. Smith";
console.log(name.startsWith("Mr."));          // true
console.log(name.startsWith("Ms."));          // false

• ใช้ startsWith() เมื่อต้องการรู้ว่า string ขึ้นต้นด้วย prefix ที่กำหนดหรือไม่
• ใช้บ่อยในการตรวจสอบ filename, URL protocol, รหัสสินค้า, คำนำหน้า
• prefix ยาวแค่ไหนก็ได้ — ตรวจสอบทีละหลายตัวอักษรได้
• return value เป็น boolean — ใช้ใน if statement ได้ตรง ๆ

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

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

let greeting = "Hello World";

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

// --- แบบ case-insensitive (แปลงเป็น lowercase ก่อน) ---
console.log(greeting.toLowerCase().startsWith("hello"));  // true — "hello world" ขึ้นต้นด้วย "hello"
console.log(greeting.toLowerCase().startsWith("world"));  // false — "world" อยู่ท้าย ไม่ใช่ต้น

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

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

position Parameter — ระบุตำแหน่งเริ่มตรวจสอบ

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

let url = "https://example.com/page";

// ไม่ระบุ position — เริ่มจาก index 0
console.log(url.startsWith("https"));          // true — "https://..." ขึ้นต้นด้วย "https"

// position = 8 — เริ่มตรวจสอบจาก index 8 (ตัว "e" ใน "example")
// "https://" มี 8 ตัวอักษร → index 8 คือจุดเริ่มของ domain
console.log(url.startsWith("example", 8));     // true — ที่ index 8 ขึ้นต้นด้วย "example"

// ไม่ระบุ position — ตรวจสอบจากต้น string
console.log(url.startsWith("example"));        // false — ต้น string คือ "https" ไม่ใช่ "example"

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

// position >= length — false เสมอ
console.log(url.startsWith("page", 100));      // false — url.length = 28, 100 >= 28

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

console.log(url);  // "https://example.com/page" — ไม่เปลี่ยน

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

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

startsWith() ใช้บ่อยมากในงานจริงเมื่อต้องการตรวจสอบ prefix — ข้อความส่วนหน้าของ string เช่น ตรวจสอบ URL ว่าใช้ HTTPS หรือไม่, ตรวจสอบชื่อไฟล์, ตรวจสอบประเภทคำสั่ง, หรือกรองข้อมูลตาม prefix มาดูตัวอย่างการใช้งานที่พบบ่อย:

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

// 2) ตรวจสอบรูปแบบไฟล์ — ดู prefix ของชื่อไฟล์
let filename = "report-q4-2024.pdf";
let isQuarterlyReport = filename.startsWith("report-q");
console.log(isQuarterlyReport);  // true

// 3) ตรวจสอบรหัสสินค้าตามหมวด
let productCode = "ELC-001";
let isElectronic = productCode.startsWith("ELC-");
console.log(isElectronic);  // true

// 4) ตรวจสอบประเภทคำสั่งในระบบ
let command = "admin:delete";
let isAdminCommand = command.startsWith("admin:");
console.log(isAdminCommand);  // true

// 5) ตรวจสอบว่าเบอร์โทรขึ้นต้นด้วยรหัสประเทศ
let phone = "+66812345678";
let isThaiNumber = phone.startsWith("+66");
console.log(isThaiNumber);  // true

• ตรวจสอบ URL — ใช้ startsWith('https://') หรือ startsWith('http://') เพื่อรู้ protocol
• ตรวจสอบชื่อไฟล์ — ดูว่าไฟล์ขึ้นต้นด้วย prefix ที่กำหนดหรือไม่
• ตรวจสอบรหัสสินค้า — แยกหมวดหมู่สินค้าด้วย prefix เช่น 'ELC-' สำหรับอิเล็กทรอนิกส์
• ตรวจสอบประเภทคำสั่ง — แยกระหว่าง admin command กับ user command
• ตรวจสอบเบอร์โทร — ดูรหัสประเทศจาก prefix

ข้อควรระวัง และเปรียบเทียบกับ includes()

startsWith() มีจุดที่มือใหม่มักเข้าใจผิด — โดยเฉพาะเรื่อง case-sensitivity, empty string, และความแตกต่างจาก includes() นอกจากนี้ ยังมี endsWith() (ซึ่งเราจะเรียนในบทถัดไป) ที่ตรวจสอบส่วนท้ายของ string — ทั้งสาม method ทำงานคล้ายกันแต่ตรวจสอบคนละตำแหน่ง:

• ลืมว่า startsWith() เป็น case-sensitive — "Hello".startsWith("hello") → false — ต้องใช้ toLowerCase() ช่วยถ้าต้องการ case-insensitive
• สับสนกับ includes() — startsWith() ตรวจสอบเฉพาะต้น string, includes() ตรวจสอบทุกตำแหน่ง — "JavaScript".startsWith("Script") → false แต่ "JavaScript".includes("Script") → true
• ลืมว่า string ว่าง ("") คืนค่า true เสมอ — "Hello".startsWith("") → true — อาจทำให้เกิด bug ถ้าไม่ทันระวัง
• position ≥ str.length — คืนค่า false เสมอ แม้ว่า searchString จะมีอยู่จริงใน string ก็ตาม
• position ระบุเป็น index ตัวอักษร — ต้องนับ index ให้ถูก — อย่าลืมว่าการนับเริ่มจาก 0
• startsWith() ตรวจสอบ prefix (ต้น), includes() ตรวจสอบทุกตำแหน่ง, endsWith() ตรวจสอบ suffix (ท้าย) — เลือกใช้ให้ถูกตามโจทย์
• ไม่สามารถใช้ startsWith() ตรวจสอบหลาย prefix พร้อมกันได้ — ต้องใช้ || (OR) หรือ loop — เช่น str.startsWith('A') || str.startsWith('B')

let text = "JavaScript";

// ❌ ผิด: คิดว่า startsWith() จะหา "Script" เจอ
console.log(text.startsWith("Script"));   // false — "Script" ไม่ได้อยู่ต้น string

// ✅ ถูก: ถ้าต้องการตรวจสอบ substring ทั่วไป ใช้ includes()
console.log(text.includes("Script"));     // true — "Script" มีอยู่จริง

// ❌ ผิด: ลืมว่า case-sensitive
console.log(text.startsWith("java"));     // false — J ตัวใหญ่

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

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

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

// ❌ ผิด: ส่งหลายค่าให้ startsWith() โดยตรง
// console.log(text.startsWith("Java", "Script"));  // ไม่ได้!

// ✅ ถูก: ใช้ || (OR) เพื่อตรวจสอบหลาย prefix
console.log(text.startsWith("Java") || text.startsWith("Type"));  // true

สังเกตว่า startsWith() กับ includes() ใช้ position (index) เป็น parameter ตัวที่สอง — แต่ endsWith() ใช้ length (ความยาวของ string) แทน endsWith() เราจะเรียนในบทถัดไป — แต่แค่รู้ไว้ก่อนว่า parameter ตัวที่สองของแต่ละ method ทำงานต่างกัน: - startsWith(str, position) — เริ่มตรวจสอบจาก index position - includes(str, position) — เริ่มค้นหาจาก index position - endsWith(str, length) — เปรียบเทียบภายในความยาว length ตัวแรกของ string

สรุป

• startsWith(searchString, position?) — ตรวจสอบว่า string ขึ้นต้นด้วย searchString หรือไม่ คืนค่า boolean (true/false)
• ตรวจสอบเฉพาะต้น string เท่านั้น — ต่างจาก includes() ที่ตรวจสอบทุกตำแหน่ง — ใช้ตามโจทย์: ต้องการตรวจสอบ prefix → startsWith(), ต้องการตรวจสอบ substring ทั่วไป → includes()
• case-sensitive — "Hello" กับ "hello" ถือว่าไม่เหมือนกัน ใช้ toLowerCase() หรือ toUpperCase() เพื่อทำ case-insensitive check
• position parameter — ระบุตำแหน่งเริ่มตรวจสอบ (default = 0) ถ้า position ≥ str.length จะคืน false เสมอ
• string เดิมไม่เปลี่ยน — immutable — startsWith() คืนค่า boolean ไม่ใช่ string ใหม่
• ใช้ startsWith() ใน if statement ได้ตรง ๆ เพราะคืนค่า boolean — if (str.startsWith(x)) { ... } — ไม่ต้องเทียบกับ true/false
• ระวัง: string ว่าง ("") จะคืนค่า true เสมอ — "Hello".startsWith("") → true
• ใช้ startsWith() ในงานจริงเพื่อตรวจสอบ URL protocol, filename prefix, รหัสสินค้า, ประเภทคำสั่ง, และรหัสประเทศของเบอร์โทร

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

Lab 2: Case-sensitivity — startsWith() + toLowerCase()

Lab 3: position parameter — เริ่มตรวจสอบจากตำแหน่งที่กำหนด

Lab 4: startsWith() + if/else — ตรวจสอบคำสั่ง admin

Lab 5: ประยุกต์ใช้ — นับลิงก์ HTTPS ด้วย startsWith()