เมธอด toFixed() ของ JavaScript: กำหนดทศนิยมคงที่

ใน JavaScript มีเมธอดของอ็อบเจ็กต์ Number ที่ช่วยให้เรากำหนดจุดทศนิยมคงที่ได้ และคืนค่าเป็นสตริง บทความนี้จะอธิบายไวยากรณ์และแสดงวิธีการใช้งาน

ชนิดข้อมูลพื้นฐานและ Wrapper Object

ใน JavaScript ชนิดข้อมูลพื้นฐาน (primitive) คือค่าที่ไม่ใช่อ็อบเจ็กต์และไม่มีเมธอด เมื่อต้องการใช้เมธอดกับค่าพื้นฐาน เราสามารถใช้ primitive wrapper object ห่อค่านั้นไว้ ตัวเลข (Number) มี wrapper object ที่ช่วยแปลงสตริงที่เป็นตัวเลขให้เป็นอ็อบเจ็กต์ Number จริงๆ ที่มีเมธอดใช้งานได้

ตัวอย่างเช่น เมื่อมีฟอร์มรับค่าตัวเลขจากผู้ใช้ ค่าที่ได้จะเป็นสตริง เราต้องแปลงเป็น Number ก่อนจึงจะใช้เมธอดต่างๆ ได้

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>toFixed() Demo</title>
</head>
<body>
  <form onsubmit="handleSubmit(event)">
    <label for="to-fixed">ป้อนตัวเลข:</label>
    <input id="to-fixed" onchange="handleChange(event)" type="text" name="inputVal" value=""/>
    <label for="num-digits">จำนวนทศนิยม:</label>
    <input id="num-digits" onchange="handleChange(event)" type="text" name="numVal" value=""/>
    <input type="submit" value="Submit" />
  </form>
  <h3 id="root"></h3>
  <script>
    let inputVal = '';
    let numVal = '';

    const handleChange = e => {
      if (e.target.name === "inputVal") {
        inputVal = e.target.value;
      } else {
        numVal = e.target.value;
      }
    };

    const handleSubmit = e => {
      e.preventDefault();
      const root = document.querySelector("#root");
      root.innerHTML = Number(inputVal).toFixed(Number(numVal));
      console.log(Number(inputVal).toFixed(5));
    };
  </script>
</body>
</html>

ไวยากรณ์

const toFixedNumDigits = Number([x]).toFixed(Number([y]));

หากจัดการกับฟอร์ม ต้องจำไว้ว่า ค่าที่รับเข้ามาเป็นสตริง ต้องแปลงเป็น Number ก่อนใช้ toFixed() โดยใช้ wrapper Number(n) ตัวแปร x คือเลขทศนิยมที่ต้องการปรับความยาว y คือจำนวนตำแหน่งทศนิยมที่ต้องการ

ตัวอย่างผลลัพธ์

// ทศนิยม
45.45678, 3  // คืนค่า '45.457'

// จำนวนเต็ม
45, 5  // คืนค่า '45.00000'

// สัญกรณ์เลขยกกำลัง
1e-10, 3   // คืนค่า '0.00'
1.23e+20, 2 // คืนค่า '123000000000000000000.00'
1.23e-10, 2 // คืนค่า '0.00'

หากตัวเลขไม่ยาวพอ จะเติมศูนย์ด้านขวาให้ครบตามจำนวนที่กำหนด หากยาวเกิน จะปัดเศษให้เหลือตามจำนวนที่ต้องการ

หมายเหตุ: หากต้องการนำค่าที่ได้ไปคำนวณต่อ ต้องแปลงกลับเป็น Number อีกครั้ง

บทความแนะนำเพิ่มเติม

• JavaScript Random Number: A Complete Guide
• JavaScript ParseInt: A Step-By-Step Guide
• JavaScript Countdown Timer: A Tutorial
• JavaScript toString
• JavaScript toUpperCase and toLowerCase