String Methods

toUpperCase() และ toLowerCase() คืออะไร

toUpperCase() และ toLowerCase() คือ method สำหรับเปลี่ยนตัวอักษรใน string ให้เป็นตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กทั้งหมด ทั้งสอง method ไม่รับ parameter ใด ๆ และคืนค่าเป็น string ใหม่เสมอ — string เดิมจะไม่ถูกเปลี่ยนแปลง (เพราะ string ใน JavaScript เป็น immutable) วิธีใช้: เรียก .toUpperCase() หรือ .toLowerCase() ต่อท้ายตัวแปร string หรือ string literal ก็ได้

let text = "Hello World";

let upper = text.toUpperCase();   // "HELLO WORLD"
let lower = text.toLowerCase();   // "hello world"

console.log(upper);               // "HELLO WORLD"
console.log(lower);               // "hello world"
console.log(text);                // "Hello World" — ตัวเดิมไม่เปลี่ยน

กฎสำคัญ: String เป็น immutable

String ใน JavaScript เป็น immutable — หมายความว่าเมื่อสร้าง string ขึ้นมาแล้ว จะไม่สามารถเปลี่ยนค่าใน string นั้นได้โดยตรง ดังนั้น toUpperCase() และ toLowerCase() จะไม่เปลี่ยน string เดิม แต่จะคืน string ใหม่ที่มีการเปลี่ยน case แล้ว เราจึงต้องเก็บผลลัพธ์ไว้ในตัวแปรใหม่เสมอ — ถ้าเรียก method เฉย ๆ โดยไม่เก็บค่า ผลลัพธ์จะหายไป

let name = "JavaScript";

// ❌ ผิด: เรียก method แต่ไม่เก็บผลลัพธ์ — ไม่มีอะไรเปลี่ยน
name.toUpperCase();
console.log(name);              // "JavaScript" — ยังเหมือนเดิม!

// ✅ ถูก: เก็บผลลัพธ์ไว้ในตัวแปรใหม่
let upperName = name.toUpperCase();
console.log(upperName);         // "JAVASCRIPT"

// ✅ ถูก: reassign กลับไปที่ตัวแปรเดิม
name = name.toUpperCase();
console.log(name);              // "JAVASCRIPT"

toUpperCase() เจาะลึก

toUpperCase() จะเปลี่ยนเฉพาะตัวอักษร a-z (ตัวพิมพ์เล็ก) ให้เป็น A-Z (ตัวพิมพ์ใหญ่) เท่านั้น ตัวอักษรที่ไม่ใช่ a-z เช่น ตัวเลข, เครื่องหมาย, สัญลักษณ์พิเศษ, หรืออักษรไทย จะไม่ได้รับผลกระทบใด ๆ ถ้า string เป็นตัวพิมพ์ใหญ่อยู่แล้ว ก็จะไม่เปลี่ยนแปลง ถ้า string เป็นค่าว่าง ("") ผลลัพธ์ก็จะเป็นค่าว่างเช่นกัน

console.log("hello".toUpperCase());          // "HELLO"
console.log("JavaScript".toUpperCase());     // "JAVASCRIPT"
console.log("user_123".toUpperCase());       // "USER_123"
console.log("hello@email.com".toUpperCase());// "HELLO@EMAIL.COM"
console.log("HTML".toUpperCase());           // "HTML" — ไม่เปลี่ยน
console.log("".toUpperCase());               // "" — ค่าว่าง

toLowerCase() เจาะลึก

toLowerCase() จะเปลี่ยนเฉพาะตัวอักษร A-Z (ตัวพิมพ์ใหญ่) ให้เป็น a-z (ตัวพิมพ์เล็ก) เท่านั้น ตัวอักษรที่ไม่ใช่ A-Z เช่น ตัวเลข, เครื่องหมาย, สัญลักษณ์พิเศษ, หรืออักษรไทย จะไม่ได้รับผลกระทบใด ๆ ถ้า string เป็นตัวพิมพ์เล็กอยู่แล้ว ก็จะไม่เปลี่ยนแปลง ถ้า string เป็นค่าว่าง ("") ผลลัพธ์ก็จะเป็นค่าว่างเช่นกัน

console.log("HELLO".toLowerCase());          // "hello"
console.log("TypeScript".toLowerCase());     // "typescript"
console.log("API_KEY_42".toLowerCase());     // "api_key_42"
console.log("css".toLowerCase());            // "css" — ไม่เปลี่ยน
console.log("".toLowerCase());               // "" — ค่าว่าง

การใช้งานจริง: Normalize และเปรียบเทียบ

หนึ่งในการใช้งานที่พบบ่อยที่สุดของ toUpperCase() และ toLowerCase() คือการ normalize ข้อมูลก่อนเปรียบเทียบ ในโลกจริง ผู้ใช้พิมพ์ข้อมูลด้วย case ที่ไม่แน่นอน — บางคนพิมพ์ "Admin", บางคนพิมพ์ "admin", บางคนพิมพ์ "ADMIN" เพื่อให้การเปรียบเทียบแม่นยำโดยไม่สนใจ case เราจึงแปลงทั้งสองด้านให้เป็น case เดียวกันก่อนเปรียบเทียบ ตัวอย่างจริงที่ใช้บ่อย: ตรวจสอบ username, เปรียบเทียบ email, กรองหมวดหมู่สินค้า, ตรวจสอบคำตอบในแบบทดสอบ

let input = "Admin";
let stored = "admin";

// เปรียบเทียบโดยแปลงเป็น lowercase ทั้งคู่
let isMatch = input.toLowerCase() === stored.toLowerCase();
console.log(isMatch);  // true — เพราะ "admin" === "admin"

// --- ตัวอย่างเพิ่มเติม ---
let emailInput = "User@Example.Com";
let emailStored = "user@example.com";
console.log(emailInput.toLowerCase() === emailStored); // true

let category = "Electronics";
let filter = "electronics";
console.log(category.toLowerCase() === filter);        // true

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

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

• เรียก method โดยไม่เก็บผลลัพธ์ — str.toUpperCase() เฉย ๆ ไม่เปลี่ยน str เพราะ string เป็น immutable
• ลืมวงเล็บ () — toUpperCase และ toLowerCase เป็น method ไม่ใช่ property ต้องมี () ต่อท้ายเสมอ
• คาดหวังว่า method จะเปลี่ยนค่าตัวแปรเดิมโดยอัตโนมัติ — ต้อง reassign กลับไปที่ตัวแปรเดิมเอง เช่น name = name.toUpperCase()

let text = "hello";

// ❌ ผิด: เรียก method โดยไม่เก็บผลลัพธ์
text.toUpperCase();
console.log(text);  // "hello" — ไม่เปลี่ยน!

// ❌ ผิด: ลืมวงเล็บ
// text.toUpperCase;  ← นี่ไม่ใช่การเรียก method

// ✅ ถูก: เก็บผลลัพธ์ในตัวแปรใหม่
let upper = text.toUpperCase();
console.log(upper);  // "HELLO"

// ✅ ถูก: หรือ reassign กลับไปที่ตัวแปรเดิม
text = text.toUpperCase();
console.log(text);   // "HELLO"

สรุป

• toUpperCase() เปลี่ยน a-z → A-Z ส่วน toLowerCase() เปลี่ยน A-Z → a-z
• ตัวอักษรที่ไม่ใช่ภาษาอังกฤษ เช่น ตัวเลข เครื่องหมาย สัญลักษณ์พิเศษ จะไม่ได้รับผลกระทบ
• String ใน JavaScript เป็น immutable — method จะคืน string ใหม่ ไม่เปลี่ยน string เดิม
• ต้องเก็บผลลัพธ์ไว้ในตัวแปรทุกครั้ง — ถ้าเรียก method โดยไม่เก็บค่า ผลลัพธ์จะหายไป
• ใช้ normalize case (แปลงเป็น lowercase หรือ uppercase ทั้งคู่) เพื่อเปรียบเทียบข้อมูลโดยไม่สนใจตัวพิมพ์เล็ก-ใหญ่
• อย่าลืมวงเล็บ () — toUpperCase และ toLowerCase เป็น method ต้องมี () ต่อท้ายเสมอ

Lab 1: แปลงเป็นตัวพิมพ์ใหญ่

Lab 2: แปลงเป็นตัวพิมพ์เล็ก

Lab 3: จัดการข้อความผสม case

Lab 4: เปรียบเทียบแบบไม่สนใจ case

Lab 5: Normalize username