Operator, String และ Number

นึกภาพก่อน

ถามว่า "5 บาท กับ ธนบัตรที่เขียนว่า 5 เท่ากันไหม" คนใจดีจะบอกว่า "ก็ห้าเหมือนกัน" คนเข้มงวดจะบอกว่า "ไม่ อันหนึ่งเป็นเหรียญ อันหนึ่งเป็นกระดาษ" JavaScript มีทั้งสองแบบ: == ใจดี (แปลงชนิดให้ก่อนเทียบ) และ === เข้มงวด (ชนิดต้องตรงด้วย)

Operator

operator คือ สัญลักษณ์ที่ทำ operation กับค่าหรือตัวแปร

ใช้เพื่อ: คำนวณ, เปรียบเทียบค่า, สร้างเงื่อนไขทาง logic และอัปเดตค่าของตัวแปร

(ในตาราง operator "หรือ" คือเครื่องหมายขีดตั้งสองขีด)

Arithmetic

let a = 10;
let b = 3;

console.log("Addition:", a + b);         // 13
console.log("Subtraction:", a - b);      // 7
console.log("Multiplication:", a * b);   // 30
console.log("Division:", a / b);         // 3.3333333333333335
console.log("Remainder:", a % b);        // 1

% (modulus) คืน เศษ ของการหาร ใช้บ่อยในการตรวจเลขคู่หรือคี่:

let number = 10;
console.log(number % 2);   // 0

ถ้าผลเป็น 0 แปลว่าเป็น เลขคู่

Comparison

ผลของการเปรียบเทียบเป็น boolean (true หรือ false) เสมอ

== กับ ===

สไลด์ระบุว่านี่เป็น เรื่องสำคัญที่สุดเรื่องหนึ่ง ของ JavaScript

console.log(5 == "5");    // true
console.log(5 === "5");   // false   ← ชนิดต่างกัน ผลเป็น false

Best practice: developer ส่วนใหญ่ใช้ === เพราะเลี่ยงการแปลงชนิดที่ไม่คาดคิด

String

"this is a book".split(" ")              // ['this', 'is', 'a', 'book']
"abc".split("")                          // ['a', 'b', 'c']
"abc".split()                            // ['abc']
['this', 'is', 'a', 'book'].join(" ")    // 'this is a book'

split กับ join เป็นคู่ตรงข้ามกัน

string ไม่ถูกแก้ (immutable): method ทุกตัว คืน string ใหม่ ตัวเดิมยังเหมือนเดิม

ลบช่องว่างซ้ำ

str.split(" ").filter(s => s.length > 0).join(" ")

ไล่กับ "a b" (สามช่องว่าง): split(" ") ได้ ['a', '', '', 'b'] → filter ตัด string ว่างออก ได้ ['a', 'b'] → join(" ") ได้ "a b"

Number

(3.14159).toFixed(2)   // "3.14"
Number("42")           // 42
parseInt("42.9")       // 42
typeof 42              // "number"
(42).toString()        // "42"

เลขสุ่ม

Math.random()        // ตั้งแต่ 0 ขึ้นไป และน้อยกว่า 1
Math.random() * 10   // ตั้งแต่ 0 และน้อยกว่า 10
Math.random() * 11   // ตั้งแต่ 0 และน้อยกว่า 11
(Math.random() * (max - min + 1)) + min

จำนวนเต็มสุ่มตั้งแต่ min ถึง max (รวมทั้งคู่):

let randomMinMax = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(randomMinMax(3, 9))

• max - min + 1 = จำนวนค่าที่เป็นไปได้ (3 ถึง 9 มี 7 ค่า)
• Math.floor ปัดลงเป็นจำนวนเต็ม → 0 ถึง 6
• + min เลื่อนช่วง → 3 ถึง 9

ตัวอย่างไล่ทีละขั้น

โจทย์ 1: แต่ละบรรทัดได้ค่าอะไร

17 % 5
"10" == 10
"10" === 10
0 == false
"Hello".length
"  hi  ".trim().toUpperCase()
"a-b-c".split("-").join("+")

โจทย์ 2: Math.floor(Math.random() * 6) + 1 ได้ค่าในช่วงใด

1. Math.random() → 0 ถึงน้อยกว่า 1
2. * 6 → 0 ถึงน้อยกว่า 6
3. Math.floor → 0, 1, 2, 3, 4, 5
4. + 1 → 1 ถึง 6 (ลูกเต๋า)

จุดที่มักพลาด

1. ใช้ == แล้วได้ผลไม่คาดคิด

ใช้ === เป็นหลัก

2. คิดว่า % คือเปอร์เซ็นต์

คือเศษของการหาร

3. ใส่วงเล็บหลัง length

str.length เป็น property

4. คิดว่า method ของ string แก้ตัวเดิม

คืน string ใหม่ ต้องรับค่าไว้: str = str.trim()

5. สลับ replace กับ replaceAll

replace แทนตัวแรกตัวเดียว

6. คิดว่า toFixed คืน number

คืน string

7. คิดว่า Math.random() ได้ 1

น้อยกว่า 1 เสมอ

8. + กับ string

"5" + 3 ได้ "53" (ต่อ string) แต่ "5" - 3 ได้ 2

ที่มา: JavaScript - Operator.pdf หน้า 1–3 · JavaScript - String _ Number(1).pdf หน้า 1–2