Number Methods

Number.parseInt และ Number.parseFloat คืออะไร

`Number.parseInt(string)` และ `Number.parseFloat(string)` คือ static method สำหรับ **ดึงตัวเลขออกจาก string โดยไม่ต้องให้ทั้ง string เป็นตัวเลขล้วน ๆ** ต่างจาก `Number(string)` ที่จะ fail ทันทีถ้า string มีอักษรอื่นปน — `Number.parseInt()` และ `Number.parseFloat()` จะ **อ่านจากซ้ายไปขวา และหยุดที่อักษรแรกที่ไม่ใช่ส่วนหนึ่งของตัวเลข** (เรียกว่า partial parsing) - `Number.parseInt()` — ดึง **จำนวนเต็ม (integer)** ออกจาก string หยุดที่จุดทศนิยมหรืออักษรที่ไม่ใช่ตัวเลข - `Number.parseFloat()` — ดึง **เลขทศนิยม (float)** ออกจาก string หยุดที่อักษรที่ไม่ใช่ตัวเลข (แต่อ่านจุดทศนิยมได้) เรียกใช้แบบ static เสมอ: `Number.parseInt(string)`, `Number.parseFloat(string)` — เรียกบน `Number` constructor โดยตรง (รูปแบบเดียวกับ `Number.isNaN()`, `Number.isFinite()`, `Number.isInteger()` ที่เพิ่งเรียน)

console.log(Number.parseInt("42px"));    // 42 — หยุดที่ 'p'
console.log(Number.parseInt("100%"));    // 100 — หยุดที่ '%'
console.log(Number.parseInt("3.14em"));  // 3 — หยุดที่ '.' (parseInt ไม่เก็บทศนิยม)
console.log(Number.parseInt("abc123"));  // NaN — ขึ้นต้นด้วยอักษร ไม่มีตัวเลขให้ parse

console.log(Number.parseFloat("3.14rad"));  // 3.14 — หยุดที่ 'r'
console.log(Number.parseFloat("0.5em"));    // 0.5 — หยุดที่ 'e'
console.log(Number.parseFloat("42px"));     // 42 — ถ้าไม่มีทศนิยม ก็ได้ integer
console.log(Number.parseFloat("abc3.14"));  // NaN — ขึ้นต้นด้วยอักษร

• `Number.parseInt(string)` — ดึง integer จาก string, หยุดที่ทศนิยมหรืออักษร
• `Number.parseFloat(string)` — ดึง float จาก string, หยุดที่อักษร (แต่อ่านทศนิยมได้)
• ทั้งคู่อ่านจากซ้ายไปขวาแบบ partial parsing — หยุดที่ตัวอักษรแรกที่ไม่สามารถเป็นส่วนหนึ่งของตัวเลขได้
• ถ้า string ขึ้นต้นด้วยอักษรที่ไม่สามารถเป็นตัวเลขได้เลย → คืน `NaN`
• ละเว้น whitespace ด้านหน้า (leading whitespace) โดยอัตโนมัติ
• เรียกใช้บน `Number` constructor โดยตรง — เป็น static method

กฎการ parse — ใครหยุดตรงไหน

กฎการ parse ของ `Number.parseInt()` และ `Number.parseFloat()` มีรายละเอียดต่างกันเล็กน้อย: **parseInt หยุดเมื่อเจอ:** - ตัวอักษรใด ๆ ที่ไม่ใช่ตัวเลข - จุดทศนิยม (`.`) **parseFloat หยุดเมื่อเจอ:** - ตัวอักษรใด ๆ ที่ไม่ใช่ตัวเลข, ไม่ใช่ `e`/`E` (scientific notation), และไม่ใช่ `+`/`-` (ที่ตามหลัง `e`) ข้อควรรู้: - `Number.parseInt('1e3')` → `1` (หยุดที่ `e`) — แต่ `Number.parseFloat('1e3')` → `1000` (อ่าน `e` เป็น scientific notation) - `Number.parseFloat('1.5e2em')` → `150` — อ่าน `1.5e2` = `1.5 * 10^2` = `150` แล้วหยุดที่ `e` ตัวที่สอง - ทั้งคู่คืน `NaN` ถ้าไม่สามารถอ่านตัวเลขได้เลย

// === parseInt: หยุดที่จุดทศนิยมและตัวอักษร ===
console.log(Number.parseInt("42px"));      // 42
console.log(Number.parseInt("3.14em"));    // 3 — หยุดที่ '.'
console.log(Number.parseInt("100%"));      // 100

// === parseFloat: อ่านจุดทศนิยมและ scientific notation ได้ ===
console.log(Number.parseFloat("3.14em"));  // 3.14
console.log(Number.parseFloat("0.5em"));   // 0.5
console.log(Number.parseFloat("1e3"));     // 1000 — scientific notation
console.log(Number.parseFloat("1.5e2cm")); // 150

// === ละเว้น leading whitespace ===
console.log(Number.parseInt("  256 m"));   // 256
console.log(Number.parseFloat("  3.14  ")); // 3.14

// === ขึ้นต้นด้วยอักษร → NaN ===
console.log(Number.parseInt("abc123"));    // NaN
console.log(Number.parseFloat("abc3.14")); // NaN

// === string ว่าง → NaN ===
console.log(Number.parseInt(""));          // NaN
console.log(Number.parseFloat(""));        // NaN

• `parseInt` หยุดที่จุดทศนิยม — `Number.parseInt("3.14em")` → `3`
• `parseFloat` อ่านจุดทศนิยมได้ — `Number.parseFloat("3.14em")` → `3.14`
• `parseFloat` อ่าน scientific notation (`e`/`E`) — `Number.parseFloat("1e3")` → `1000`
• string ขึ้นต้นด้วยอักษร → `NaN` ทันที — ไม่มีการ parse
• ละเว้น leading whitespace อัตโนมัติ — `Number.parseInt(" 42 ")` → `42`
• `parseInt` มีพารามิเตอร์ `radix` (ฐาน) สำหรับแปลงเลขฐาน — เช่น `Number.parseInt("FF", 16)` → `255`

เปรียบเทียบ Number(), Number.parseInt(), Number.parseFloat()

ความแตกต่างที่สำคัญที่สุดระหว่าง `Number()` และ parse methods คือ: - `Number(string)` — ต้องการให้ **ทั้ง string เป็นตัวเลขที่สมบูรณ์** — ถ้ามีอักษรใด ๆ ปน → `NaN` ทันที - `Number.parseInt(string)` / `Number.parseFloat(string)` — **partial parsing** — อ่านได้เท่าที่เจอ แล้วหยุด หลักการเลือกใช้: - ใช้ `Number()` เมื่อมั่นใจว่า input เป็นตัวเลขจริง ๆ — เช่น แปลง string จาก API, localStorage - ใช้ `Number.parseInt()` / `Number.parseFloat()` เมื่อ string มีหน่วยหรือข้อความปน — เช่น '42px', '3.14em' จาก CSS ข้อสังเกตเพิ่มเติม: - `Number('')` → `0` — แต่ `Number.parseInt('')` → `NaN` (string ว่าง parse ไม่ได้) - `Number(true)` → `1` — แต่ `Number.parseInt(true)` → `NaN` (parse methods ไม่ทำ type coercion แบบ `Number()`)

// === string มีหน่วยต่อท้าย ===
console.log(Number("42px"));             // NaN — ต้องล้วน
console.log(Number.parseInt("42px"));    // 42 — partial parse
console.log(Number.parseFloat("42px"));  // 42

// === string เป็นตัวเลขล้วน ===
console.log(Number("42"));               // 42
console.log(Number.parseInt("42"));      // 42
console.log(Number.parseFloat("42"));    // 42

// === string ว่าง ===
console.log(Number(""));                 // 0 — แปลงเป็น 0
console.log(Number.parseInt(""));        // NaN — parse ไม่ได้
console.log(Number.parseFloat(""));      // NaN

// === non-string (type coercion) ===
console.log(Number(true));               // 1 — แปลง boolean
console.log(Number.parseInt(true));      // NaN — ไม่ทำ coercion
console.log(Number.parseFloat(true));    // NaN

// === ทศนิยมกับหน่วย ===
console.log(Number("3.14em"));           // NaN
console.log(Number.parseInt("3.14em"));  // 3 — หยุดที่ '.'
console.log(Number.parseFloat("3.14em")); // 3.14

• `Number()` ต้องการทั้ง string เป็นตัวเลข — มีอักษรปน → `NaN`
• `Number.parseInt()` / `Number.parseFloat()` ทำ partial parsing — อ่านเท่าที่เป็นตัวเลขได้ แล้วหยุด
• `Number()` แปลง empty string → `0`, parse methods → `NaN`
• `Number()` ทำ type coercion (boolean, null → number), parse methods ไม่ทำ — เน้นแปลง string
• ใช้ parse methods เมื่อ string มีหน่วยปน (CSS, dimensions) — ใช้ `Number()` เมื่อ input ควรเป็นตัวเลขล้วน

Lab 1: ใช้ parseInt ดึงจำนวนเต็มจาก string ที่มีหน่วย

Lab 2: ใช้ parseFloat ดึงเลขทศนิยม

Lab 3: เปรียบเทียบ Number(), parseInt(), parseFloat()

Lab 4: parseInt กับ radix — แปลงเลขฐาน