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

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

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

ดูแล้ว 36,986 ครั้ง


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

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

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

	<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 เป็นตัวกำหนดว่าจะมีจำนวนตัวเลขหลังจุดทศนิยมกี่หลัก

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

	<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 ที่กำลังใช้งานอยู่

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

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

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

 

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

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

<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 เพื่อกำหนดให้แปลงเป็นเลขฐานสิบหก
ได้อีกด้วย

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

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

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

 

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

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

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

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

 



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











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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







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