String Methods

`trim()` คืออะไร — ตัด whitespace หัวท้ายของ string

`trim()` เป็น method บน string ใช้ลบ whitespace ที่อยู่หัวและท้ายของ string — คืนค่าเป็น string ใหม่ โดยไม่เปลี่ยน string ต้นฉบับ สิ่งที่ต้องรู้: • `trim()` ตัด whitespace เฉพาะส่วนหัวและส่วนท้ายของ string — เว้นวรรคกลางข้อความเอาไว้เหมือนเดิม • `trim()` คืนค่าเป็น string ใหม่ — string ต้นฉบับไม่เปลี่ยน (เพราะ primitive type เป็น immutable) • รับ parameter ไม่ได้ — เรียกแค่ `str.trim()` ก็พอ • whitespace ที่ถูกตัดรวมถึง: space, tab (`\t`), newline (`\n`), carriage return (`\r`), และ whitespace แบบ unicode อื่น ๆ

const raw = "   hello world   ";

// ก่อน trim — เห็น space หัวและท้ายชัดเจน
console.log("before:", JSON.stringify(raw));
// before: "   hello world   "

// ใช้ trim — space หัวท้ายหายไป
const cleaned = raw.trim();

console.log("after:", JSON.stringify(cleaned));
// after: "hello world"

// ⚠️ string ต้นฉบับไม่เปลี่ยน
console.log(raw); // "   hello world   " — เหมือนเดิม

const text = "  hello   world  ";

const result = text.trim();

console.log(text);   // "  hello   world  " — มี space หัว-ท้าย-กลาง
console.log(result); // "hello   world" — space หัว-ท้ายหาย แต่ space ตรงกลางยังอยู่

// === เปรียบเทียบกับ space ตรงกลาง
const innerSpaces = "hello   world";
console.log(innerSpaces.trim()); // "hello   world" — ไม่มี space หัวท้ายตั้งแต่แรก trim จึงไม่เปลี่ยน

• `trim()` ลบ whitespace เฉพาะหัวและท้าย — space กลาง string ไม่โดนลบ
• คืนค่าเป็น string ใหม่ — ต้นฉบับไม่เปลี่ยน
• เรียกใช้โดยไม่ต้องส่ง parameter — `str.trim()`
• ใช้ `JSON.stringify()` ช่วยให้เห็น whitespace ชัดเจนเวลา debug

ใช้ `trim()` ในสถานการณ์จริง — ทำความสะอาดค่าจากผู้ใช้

use-case ที่พบบ่อยที่สุดของ `trim()` คือการทำความสะอาดค่าที่ผู้ใช้กรอกเข้ามา — ไม่ว่าจะเป็น form input, search box, หรือ URL ผู้ใช้มักเผลอเว้นวรรค (space) หัวหรือท้ายโดยไม่ตั้งใจ — เช่น เวลากรอกชื่อผู้ใช้, อีเมล, หรือรหัส ถ้าไม่ trim ก่อนใช้งาน — การเปรียบเทียบ, การค้นหา, หรือการ validate อาจให้ผลผิดพลาดได้

// === จำลองค่าที่ผู้ใช้กรอก (มี space หัว-ท้าย)
const name = "  Mali  ";
const email = "  mali@example.com  ";
const code = "  ABC-123  ";

// ทำความสะอาดด้วย trim
const cleanName = name.trim();
const cleanEmail = email.trim();
const cleanCode = code.trim();

console.log(JSON.stringify(cleanName));  // "Mali"
console.log(JSON.stringify(cleanEmail)); // "mali@example.com"
console.log(JSON.stringify(cleanCode));  // "ABC-123"

// === ตรวจสอบว่า input ไม่ว่าง (trim + if)
if (cleanName.length > 0) {
  console.log("ชื่อผู้ใช้:" + cleanName + " ✓"); // ชื่อผู้ใช้: Mali ✓
}

จุดสำคัญ: ถ้า string มีแต่ whitespace ล้วน (`" "`) — `trim()` จะคืน `""` (empty string) ทำให้เราใช้ `trim()` ตรวจสอบว่า input ว่างเปล่าหรือไม่ได้สะดวก

// === ปัญหาจาก space ที่ไม่ตั้งใจ
const input = "  admin  "; // ผู้ใช้กรอกมี space หัว-ท้าย
const expected = "admin";   // ค่าที่ถูกต้อง — ไม่มี space

// ถ้าเทียบตรง ๆ — ไม่เท่ากัน!
console.log(input === expected); // false ✗ — เพราะ space หัวท้ายต่างกัน

// trim() ก่อนเทียบ — เท่ากัน ✓
console.log(input.trim() === expected); // true ✓

// === ใช้จริง — ตรวจสอบรหัสส่วนลดจากผู้ใช้
const promoCode = "  SALE50  ";
const validCodes = ["SALE50", "WELCOME10"];

if (validCodes.includes(promoCode.trim())) {
  console.log("ใช้รหัสส่วนลดได้ ✓"); // ใช้รหัสส่วนลดได้ ✓
}

• **ทำความสะอาด form input** — `input.value.trim()` ก่อนเอาไปใช้เสมอ
• **เปรียบเทียบ string** — `str1.trim() === str2.trim()` แม่นยำกว่าเทียบตรง ๆ
• **ตรวจ empty input** — `str.trim() === ""` เช็คว่าผู้ใช้กรอกแต่ space หรือเปล่า
• **ค้นหาใน array** — `arr.includes(str.trim())` ก่อนค้นหา

`trimStart()` และ `trimEnd()` — ตัด whitespace เฉพาะฝั่งเดียว

นอกจาก `trim()` ที่ตัดทั้งหัวและท้าย — JavaScript ยังมี `trimStart()` (หรือ `trimLeft()`) สำหรับตัด whitespace เฉพาะต้น string และ `trimEnd()` (หรือ `trimRight()`) สำหรับตัดเฉพาะท้าย string ใช้เมื่อเราอยากเก็บ whitespace อีกฝั่งไว้ — เช่น ต้องการเก็บ newline ที่ท้ายข้อความ หรือรักษา indent ด้านหน้า

const str = "  hello world  ";

// === trim() — ตัดทั้ง 2 ฝั่ง
console.log(JSON.stringify(str.trim()));
// "hello world"

// === trimStart() — ตัดเฉพาะฝั่งต้น
console.log(JSON.stringify(str.trimStart()));
// "hello world  " ← space ท้ายยังอยู่

// === trimEnd() — ตัดเฉพาะฝั่งท้าย
console.log(JSON.stringify(str.trimEnd()));
// "  hello world" ← space หน้ายังอยู่

// === ใช้จริง — เก็บ newline ไว้ท้ายข้อความ
const log = "  Log entry 1\n";
// ใช้ trimStart() ลบ space หน้า — แต่เก็บ \n ท้ายไว้
console.log(JSON.stringify(log.trimStart()));
// "Log entry 1\n"

เลือกใช้ตามความต้องการ: • `trim()` — กรณีทั่วไป ต้องการลบ whitespace ทั้ง 2 ฝั่ง • `trimStart()` — ต้องการเก็บ whitespace ท้ายไว้ (เช่น newline, tab ต่อท้าย) • `trimEnd()` — ต้องการเก็บ whitespace หน้าไว้ (เช่น indent, prefix) note: `trimLeft()` และ `trimRight()` เป็น alias ของ `trimStart()` และ `trimEnd()` ตามลำดับ — ทำงานเหมือนกัน แต่ชื่อ `trimStart`/`trimEnd` สื่อความหมายได้ตรงกว่า

whitespace ที่ `trim()` จัดการ — และข้อควรระวัง

`trim()` ไม่ได้ลบแค่ space ธรรมดา — แต่มันลบ whitespace ทุกชนิดที่ JavaScript มองว่าเป็น whitespace: • **space** (`" "`) — ช่องว่างธรรมดา • **tab** (`"\t"`) — แท็บ • **newline** (`"\n"`) — ขึ้นบรรทัดใหม่ • **carriage return** (`"\r"`) — ใช้ในไฟล์ Windows • **no-break space** และ whitespace แบบ unicode อื่น ๆ ถ้ามี whitespace หลายตัวปนกัน — `trim()` จัดการให้หมด

// === whitespace หลายชนิดปนกัน
const messy = "\t\n  hello\t\r\n  ";

console.log("before:", JSON.stringify(messy));
// before: "\t\n  hello\t\r\n  "

console.log("after:", JSON.stringify(messy.trim()));
// after: "hello"

// === whitespace แต่ละชนิดทำงานกับ trimStart/trimEnd
const tabStr = "\t\thello\t\t";

console.log(JSON.stringify(tabStr.trimStart())); // "hello\t\t" — ตัด tab หน้า
console.log(JSON.stringify(tabStr.trimEnd()));   // "\t\thello" — ตัด tab ท้าย

• **trim() ไม่ลบ space ตรงกลาง** — `"hello world".trim()` → `"hello world"` ไม่เปลี่ยน space กลาง
• **trim() คืน string ใหม่ ต้องรับค่ากลับ** — `str.trim()` ไม่เปลี่ยน `str` โดยตรง ต้อง `str = str.trim()` หรือใช้ตัวแปรใหม่
• **null / undefined.trim() → TypeError** — เช็กก่อนเสมอว่าไม่ใช่ `null` หรือ `undefined`
• **trim() ไม่รับ parameter** — ใส่ `trim(" ")` ก็ไม่มีความหมาย การตัด whitespace เป็น default behavior

สรุป: `trim()` เป็น tool พื้นฐานที่ใช้ง่าย แต่สำคัญ — ใช้ทำความสะอาด string ก่อนนำไปใช้งานเสมอ โดยเฉพาะข้อมูลที่มาจากผู้ใช้หรือ API แนวคิดสำคัญ: **clean before use** — trim ก่อน แล้วค่อย validate, compare, store, หรือ display

Lab 1: ใช้ `trim()` ลบ whitespace หัวท้าย

Lab 2: ใช้ `trim()` ทำความสะอาด input หลายค่า

Lab 3: `trimStart()` และ `trimEnd()` — ตัดเฉพาะฝั่งเดียว

Lab 4: รวม `trim()` กับเงื่อนไข — ตรวจสอบ input ว่าง