การจัดรูปแบบทศนิยมของตัวเลขใน javascript

เขียนเมื่อ 16 ปีก่อน โดย Ninenik Narkdee
ทดศนิยม javascript

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ทดศนิยม javascript

ดูแล้ว 38,461 ครั้ง


โดยปกติแล้ว ตัวเลข เป็นเพียงแค่ประเภทตัวแปรหนึ่งที่ใช้กำหนดค่าตัวเลขเท่านั้น
แต่นอกเหนือจากนั้น javascript ยังมีวิธีการที่ใช้ในการจัดรูปแบบของตัวเลขได้อีกด้วย

วิธีการ การคืนค่า หรือผลลัพธ์ทีได้
.toExponential(digits) ผลลัพธ์ออกมาเป็นข้อความที่มีตัวเลขอยู่ในรูปแบบเลขยกกำลัง ซึ่งมี digits เป็นตัวกำหนดว่าจะมีจำนวนตัวเลขหลังจุดทศนิยมกี่หลัก

ตัวอย่างโค้ด

1
2
3
4
5
<script language="javascript">
    var a=250000.56;
    alert(a.toExponential(2));
    // ผลลัพธ์ที่ได้จะเป็น 2.50e+5
</script>

จากโค้ด เมื่อ a มีค่า 250000.56 และเมื่อมีการเรียกใช้ฟังก์ชัน toExponential() โดยค่า digits กำหนดเท่ากับ 2 ผลลัพธ์ที่ได้ จึงเป็น 2.50e+5 หมายความว่า มีค่าเท่ากับ (2.50 x 10)5
.50 คือค่าหลังจุดทศนิยมซึ่งเรากำหนดให้เท่ากับ 2 หลัก
e คือรูปแบบ exponential เท่ากับ x 10
+5 คือ ยกกำลัง 5

 

วิธีการ การคืนค่า หรือผลลัพธ์ทีได้
.toFixed(digits) ผลลัพธ์ออกมาเป็นข้อความที่มีตัวเลขอยู่ในรูปแบบมีจุดทศนิยมตามจำนวนที่กำหนด ซึ่งมี digits เป็นตัวกำหนดว่าจะมีจำนวนตัวเลขหลังจุดทศนิยมกี่หลัก

ตัวอย่างโค้ด

1
2
3
4
5
6
<script language="javascript">
var a=1.56;
alert(a.toFixed(1));
// ผลลัพธ์ที่ได้จะเป็น 1.6
</script>

จากโค้ด เมื่อ a มีค่า 1.56 และเมื่อมีการเรียกใช้ฟังก์ชัน toFixed() โดยค่า digits กำหนดเท่ากับ 1 ผลลัพธ์ที่ได้ จึงเป็น 1.6 หมายความว่า ใ้ห้แสดงเป็นตัวเลขทศนิยม 1 ตำแหน่ง
จะสังเกตได้ว่ามีการปัดเศษ คือมากกว่า 5 ปัดขั้น น้อยกว่า 5 ปัดลง

 

วิธีการ การคืนค่า หรือผลลัพธ์ทีได้
.toLocaleString() ผลลัพธ์ออกมาเป็นข้อความที่มีตัวเลขและมีรูปแบบเป็นไปตามการกำหนดของ browser ที่กำลังใช้งานอยู่

ตัวอย่างโค้ด

1
2
3
4
5
6
<script language="javascript">
    var a=1.56;
    alert(a.toLocaleString());
    // ผลลัพธ์ที่ได้จะเป็น 1.56
</script>
    

จากโค้ด เมื่อ a มีค่า 1.56 และเมื่อมีการเรียกใช้ฟังก์ชัน toLocaleString() จะได้เป็น 1.56 ตามรูปแบบ
ของ browser กำหนด

 

วิธีการ การคืนค่า หรือผลลัพธ์ทีได้
.toPrecision(digits) ผลลัพธ์ออกมาเป็นข้อความที่มีตัวเลขอยู่ในรูปแบบทศนิยมหรือรูปแบบ exponential โดยจำนวนตัวเลขจะเป็นไปตามค่าของ digits

ตัวอย่างโค้ด

1
2
3
4
5
6
<script language="javascript">
    var a=1.56;
    alert(a.toPrecision(4));
    // ผลลัพธ์ที่ได้จะเป็น 1.560
</script>
    

จากโค้ด เมื่อ a มีค่า 1.56 และเมื่อมีการเรียกใช้ฟังก์ชัน toPrecision(); และมีการกำหนดค่า digits เท่ากับ 4
ทำให้ผลลัพธ์ออกมาเท่ากับ 1.560 คือมี 4 ตัว โดยจะเริ่มนับต้องแต่ตัวแรก จาก 1.56 จะมีแค่ 3 ตัว แต่เมื่อเรากำหนดให้มี 4 ตัว โปรแกรมก็จะเพิ่มเลข 0 เข้ามาต่อท้ายในทศนิยมให้ครบ 4 ตัวตามที่กำหนด

 

วิธีการ การคืนค่า หรือผลลัพธ์ทีได้
.toString(radix) ผลลัพธ์ออกมาเป็นข้อความที่มีตัวเลข โดยค่า radix จะมีค่าเท่ากับ 10 ซึ่งจะทำให้ได้ค่าตัวเลขเป็นเลขฐาน 10 นอกจากนั้นเรายังสามารถเปลี่ยนค่า radix เป็น
2 เพื่อกำหนดให้แปลงเป็นเลขฐานสอง
8 เพื่อกำหนดให้แปลงเป็นเลขฐานแปด
10 เพื่อกำหนดให้แปลงเป็นเลขฐานสิบ
16 เพื่อกำหนดให้แปลงเป็นเลขฐานสิบหก
ได้อีกด้วย

ตัวอย่างโค้ด

1
2
3
4
5
6
<script language="javascript">
    var a=255;
    alert(a.toString(16));
    // ผลลัพธ์ที่ได้จะเป็น ff
</script>
    

จากโค้ด เมื่อ a มีค่า 255 และเมื่อมีการเรียกใช้ฟังก์ชัน toString(radix) โดยค่า radix กำหนดเท่ากับ 16 นั้นหมายความว่าเราต้องการแปลงค่า 255 ใ้ห้เป็นเลขในฐานสิบหก ซึ่งผลลัพธ์ที่ได้ก็คือ ff ในเลขฐานสิบหกนั้นเอง

 

วิธีการ การคืนค่า หรือผลลัพธ์ทีได้
.valueOf() ผลลัพธ์ออกมาเป็นข้อความที่มีตัวเลขนั้นๆ

ตัวอย่างโค้ด

1
2
3
4
5
6
<script language="javascript">
    var a=255;
    alert(a.valueOf());
    // ผลลัพธ์ที่ได้จะเป็น 255
</script>
    

จากโค้ด เมื่อ a มีค่า 255 และเมื่อมีการเรียกใช้ฟังก์ชัน valueOf() ผลลัพธ์ที่ได้ก็จะเป็นการแสดงค่าตัวเลข
ของตัวแปร number object นั้นๆ ออกมา

 



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง










เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ