ฟังก์ชัน parseFloat() ใน JavaScript ทำงานอย่างไร?

บทนำ

parseFloat() เป็นฟังก์ชันสากล (Global Function) ใน JavaScript ใช้สำหรับ **แปลงสตริงเป็นตัวเลขทศนิยม (Floating-point number)** ฟังก์ชันนี้จะอ่านตัวอักษรจากซ้ายไปขวา และหยุดแปลงเมื่อเจอตัวอักษรที่ไม่ใช่ตัวเลข จุดทศนิยม หรือเครื่องหมาย +/-

ไวยากรณ์ (Syntax)

parseFloat(string)

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <script>
    // กรณีทั่วไป
    document.write("parseFloat('2') = " + parseFloat("2") + "<br>");           // 2
    document.write("parseFloat('3.14') = " + parseFloat("3.14") + "<br>");       // 3.14
    document.write("parseFloat('30 minutes') = " + parseFloat("30 minutes") + "<br>"); // 30
    document.write("parseFloat('  42.5  ') = " + parseFloat("  42.5  ") + "<br>"); // 42.5 (ตัด whitespace)
    
    // กรณีพิเศษ
    document.write("<br>parseFloat('abc') = " + parseFloat("abc") + "<br>");     // NaN
    document.write("parseFloat('') = " + parseFloat("") + "<br>");               // NaN
    document.write("parseFloat(null) = " + parseFloat(null) + "<br>");           // NaN
    document.write("parseFloat(undefined) = " + parseFloat(undefined) + "<br>"); // NaN
    
    // วิทยาศาสตร์ (Scientific notation)
    document.write("<br>parseFloat('1.5e2') = " + parseFloat("1.5e2") + "<br>"); // 150
    document.write("parseFloat('-3.2E-1') = " + parseFloat("-3.2E-1") + "<br>"); // -0.32
  </script>
</body>
</html>

กฎการแปลงสำคัญ

1. Whitespace นำหน้า จะถูกข้าม (" 123" → 123)
2. ตัวอักษรแรกไม่ใช่ตัวเลข → คืน NaN ("abc123" → NaN)
3. เจอตัวอักษรไม่ถูกต้องระหว่างทาง → หยุดแปลงทันที ("123abc" → 123)
4. จุดทศนิยมตัวแรก ถูกนับ ตัวที่สองเป็นต้นไปจะหยุด ("1.2.3" → 1.2)
5. รองรับ Scientific notation ("1e3" → 1000)

เปรียบเทียบ parseFloat() กับ Number() และ parseInt()

เคล็ดลับ

• ใช้ Number() หากต้องการแปลงแบบเข้มงวด (strict) - ต้องเป็นตัวเลขทั้งสตริง
• ใช้ parseFloat() หากต้องการดึงตัวเลขจากหน้าสตริงที่ผสมข้อความ (เช่น "50px", "$19.99")
• ตรวจสอบ isNaN() เสมอหลังแปลง เพื่อป้องกันข้อผิดพลาด