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

25 September 2008

โดยปกติแล้ว ตัวเลข เป็นเพียงแค่ประเภทตัวแปรหนึ่งที่ใช้กำหนดค่าตัวเลขเท่านั้น
แต่นอกเหนือจากนั้น 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 นั้นๆ ออกมา

 








บทความในหมวดที่่น่าสนใจ อื่นๆ JAVASCRIPT Learning

20 Aug 10 การสร้าง popup ที่แตกต่าง ด้วยวิธี showModalDialog อ่าน 6032 09 Apr 10 สร้าง countdown นับเวลา ถอยหลัง ด้วย javascript อ่าน 5973 25 Sep 08 Javascript กับเทคนิค Mouseover และ Mouseout อ่าน 5507 22 Mar 09 สร้างฟังก์ชันโชว์รูปภาพขนาดใหญ่ด้วย javascript แบบง่าย อ่าน 5411 24 Feb 09 สร้างรูปแบบข้อความ เบอร์โทร เลขที่บัตรประชาชน เวลา ด้วย javascript อ่าน 5324 03 Nov 08 เปิด popup แล้วให้แสดงแบบ maximize อ่าน 5293 29 Dec 10 เพิ่มเติม การใช้งาน popup แบบ showModalDialog อย่างสมบูรณ์ อ่าน 5265 26 Oct 08 เช็ค browser ด้วย javascript ได้ทั้ง IE Firefox Opera Chrome อ่าน 5156 06 Mar 11 แนะนำ ปลั๊กอิน comment ตัวใหม่ของ facebook อ่าน 4686 25 Sep 08 การสลับสีแถวในตารางด้วย javascript อ่าน 4630 25 Sep 08 การทำปุ่ม Print แบบรูปภาพ อ่าน 4578 21 Aug 10 เริ่มใช้ และ ประยุกต์ CKEditor ให้ใช้งานง่าย เต็มความสามารถ อ่าน 4403 06 Jan 09 บวกวันใน javascript ด้วยฟังก์ชัน day add อย่างง่าย อ่าน 4374 13 Mar 09 สร้างฟังก์ชัน กรอกข้อความได้เฉพาะภาษาไทยด้วย javascript อ่าน 4370 25 Sep 08 เลือกหรือไม่เลือก checkbox ทั้งหมด อ่าน 4331

บทความคนเข้าอ่านวันนี้

31 Mar 09 ดึงข้อมูลจากฐานข้อมูลเป็น excel ด้วย php รองรับภาษาไทย อ่าน 6720 12 May 10 แนวทาง การดึงข้อมูล แบบ real time ด้วย ajax ใน jQuery อ่าน 10982 06 Sep 10 ประยุกต์ การ invite friends ใน facebook มาใช้งาน อ่าน 3996 18 Oct 08 การประยุกต์ใช้ฟังก์ขัน after() กับ text input อ่าน 4923 13 Oct 11 แนะนำการใช้งาน การเชื่อมต่อ facebook ด้วย php sdk v.3.1.1 อ่าน 2271 23 Nov 08 สร้างเมนูแท็บ Tab menu ด้วย jQuery + CSS อย่างง่าย อ่าน 27468 16 Jul 11 แทรก +1 button ในเว็บจาก google plus อ่าน 1738 25 Sep 08 ตกแต่งภาพในเว็บให้น่าสนใจคล้ายภาพสะท้อนจากน้ำ อ่าน 2692 22 Mar 11 การกำหนด แท็ก html ในตัวแปร JavaScript อย่างง่าย อ่าน 2278 12 Nov 09 รู้จักกับ Ajax Events ใน jQuery อ่าน 4771 23 Mar 11 เทคนิค หน่วงเวลา กับ event keyup ด้วย jQuery อ่าน 2535 26 Oct 10 แนะนำ autocomplete ใน jQuery ui กับการประยุกต์ใช้งาน อ่าน 2502 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 9070 03 Jun 09 สร้างระบบ slide เลื่อนซ้าย ขวา ด้วย jquery อย่างง่าย อ่าน 14664 25 Sep 08 ปิดหน้า Browser โดยไม่ต้องมีข้อความยืนยัน อ่าน 4020 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบลำดับขั้น ตอนที่ 1 อ่าน 4086 25 Sep 08 ใช้ PHP สร้าง Javascript อย่างง่าย อ่าน 4725 13 Feb 09 แปลงข้อความเป็นตัวเล็ก toLowerCase ตัวใหญ่ toUpperCase ด้วย javascript อ่าน 2210 25 Sep 08 หาตำแหน่งของ element แนวแกน x แกน y ด้วยฟังก์ชันของ jQuery อ่าน 2847 05 Oct 10 สร้าง login logout และกำหนด permission ของ facebook ด้วย php sdk อ่าน 7705
จำนวนผู้เยี่ยมชม 892665
คน 2012 © Copyright ninenik.com. All rights reserved.