การใช้เมธอด toString เพื่อแปลงข้อมูลเป็นสายอักขระ
จากบทที่แล้วจะเห็นว่าข้อมูลแต่ละชนิดมีคุณสมบัติไม่เหมือนกันเวลาที่เอามาทำอะไรต่างๆ
เช่นในการแสดงผล หรือเมื่อเจอตัวดำเนินการ
ดังนั้นจึงต้องทำความเข้าใจเรื่องชนิดตัวแปรให้ดี
นอกจากนี้
บางครั้งเราก็อาจต้องการเปลี่ยนชนิดของตัวแปรหนึ่งไปเป็นอีกชนิดให้เหมาะสมกับการใช้งานที่ต้องการ
ในบทนี้จะพูดถึงการแปลงชนิดข้อมูลระหว่างชนิดต่างๆ โดยเฉพาะตัวเลขและสายอักขระ
การแปลงข้อมูลชนิดต่างๆเป็นสายอักขระนั้นจะทำโดยใช้เมธอดที่ชื่อ toString
คำว่า
"เมธอด" (method) นั้นมีความหมายคล้ายกับฟังก์ชัน
อาจถือว่าเมธอดเป็นฟังก์ชันชนิดหนึ่ง
แต่ต่างกันตรงที่เมธอดคือฟังก์ชันที่ถูกเก็บอยู่ภายในตัวออบเจ็กต์หรือข้อมูลชนิดต่างๆ
เมธอดนั้นจริงๆแล้วก็คือแอตทริบิวต์ของออบเจ็กต์
แต่เป็นแอตทริบิวต์ที่เป็นฟังก์ชัน
ดังนั้นปกติจะใช้เมธอดได้โดยการเติมจุดต่อจากตัวแปรที่เก็บออบเจ็กต์นั้นไว้
แล้วตามด้วยชื่อ เช่นเดียวกับพรอเพอร์ตีของออบเจ็กต์
เมธอดถือเป็นส่วนประกอบสำคัญของออบเจ็กต์ แต่นอกจากข้อมูลชนิดออบเจ็กต์แล้ว
ข้อมูลชนิดอื่นๆ ทั้งตัวเลข สายอักขระ บูล ก็มีเมธอดเช่นกัน
ข้อมูลทุกชนิดจะมีเมธอดที่ชื่อว่า toString ซึ่งปกติจะถูกใช้เวลาที่แสดงผล
อย่างเวลาที่ใช้ alert นั้น จริงๆแล้วจะมีการเรียกเมธอด toString
ขึ้นมาโดยอัตโนมัติ เพื่อแสดงผลข้อมูลออกมาเป็นตัวหนังสือให้ได้เห็น
แต่ว่านอกจากเวลาใช้ alert แล้ว เราสามารถเรียกใช้เมธอด toString
เพื่อเปลี่ยนข้อมูลชนิดใดๆเป็นสายอักขระโดยตรง
เช่น ลองดูข้อมูลตัวเลข
var n = 12.34;
alert(typeof n); // ได้ number
alert(n); // ได้ 12.34
var s = n.toString();
alert(typeof s); // ได้ string
alert(s); // ได้ 12.34
ในตัวอย่างนี้จะเห็นว่าตัวแปร n ถูกสร้างขึ้นมาเป็นข้อมูลตัวเลข สามารถใช้เมธอด
toString เพื่อแปลงเป็นข้อมูลสายอักขระได้ โดยข้อมูลที่แปลงแล้วจะเก็บไว้ในตัวแปร
s
ให้ระวังว่าเมธอด toString นั้นจะไม่ได้ทำการเปลี่ยนแปลงตัวแปรที่ใช้เมธอดโดยตรง
แต่จะทำการคืนค่าที่แปลงเป็นสายอักขระแล้วมาเท่านั้น จะต้องนำตัวแปรมารับค่า
หรือไม่ก็นำมาใช้ทันที
ในที่นี้ใช้ตัวแปร s มารับค่าที่คืนมาจากเมธอด toString ของตัวแปร n
ผลคือจะได้สายอักขระที่มีข้อความ "12.34"
แต่จะเห็นว่าเมื่อใช้ alert แล้วการแสดงผลจะเหมือนกันทั้ง n และ s
นั่นเพราะจริงๆแล้วเวลาใช้ alert กับข้อมูลชนิดตัวเลขจะมีการใช้เมธอด toString
โดยอัตโนมัติอยู่แล้ว ส่วนข้อมูลชนิดสายอักขระนั้นจะถูกแสดงออกมาโดยตรง
นอกจากนี้ ปกติเวลาที่เอาตัวเลขไปบวกกับสายอักขระ
ข้อมูลตัวเลขจะเปลี่ยนเป็นสายอักขระโดยอัตโนมัติ
การเปลี่ยนแปลงนี้จริงๆแล้วก็ทำผ่านเมธอด toString เช่นกัน คือ .toString
จะถูกเรียกมาโดยอัตโนมัติ
var n = 12.34;
alert(n + "a"); // ได้ 12.34a
alert(n.toString() + "a"); // ได้ 12.34a
ดังนั้นเมธอด toString นั้นมักจะไม่ได้ถูกเรียกใช้โดยตรง
แต่ก็อาจใช้เมื่อจำเป็นต้องเปลี่ยนข้อมูล
อาจจะจำเป็นต้องเรียกใช้ toString โดยตรงเวลาที่ต้องการเอาตัวเลข ๒
ตัวมาต่อกันโดยไม่ใช่บวกกันเท่านั้น
กรณีแบบนี้ต้องเอาตัวใดตัวหนึ่งมาแปลงเป็นสายอักขระก่อนไม่เช่นนั้นจะเป็นการบวกตัวเลขธรรมดา
var m = 12.5;
var n = 11.3;
alert(m + n); // ได้ 23.8
alert(m.toString() + n.toString()); // ได้ 12.511.3
alert(m.toString() + n); // 12.511.3
ส่วนกรณีข้อมูลชนิดบูล (true และ false) ถ้าใช้ toString
ก็จะได้สายอักขระที่เขียนคำว่า true และ false
แต่ถึงไม่ใช้ .toString เวลาใช้ alert เฉยๆก็ขึ้นคำว่า true หรือ false
อยู่แล้ว
และเวลาที่ไปบวกกับสายอักขระก็จะถูกแปลงเป็นสายอักขระโดยอัตโนมัติเช่นกัน
alert(true + "end"); // ได้ trueend
alert(true.toString() + "end"); // ได้ trueend
ส่วนข้อมูลออบเจ็กต์เองเวลาใช้ alert จะเห็นแค่ [object Object]
แบบนี้โดยไม่แสดงเนื้อใน ไม่ว่าข้างในจะเป็นอย่างไร
var obj = { a: 1 };
alert(obj); // ได้ [object Object]
alert(obj.toString()); // ได้ [object Object]
แต่ก็มีวิธีทำให้ออบเจ็กต์แสดงเนื้อในเหมือนกัน คือทำการแก้เมธอด toString
ซึ่งจะอธิบายใน
บทที่ ๑๙
จากตรงนี้สรุปได้ว่า ข้อมูลใดๆเมื่อใช้ alert
หรือนำไปบวกกับสายอักขระจะมีการแปลงเป็นสายอักขระโดยอัตโนมัติโดยผ่านเมธอด
toString
เมธอด toString มีติดตัวอยู่ในข้อมูลทุกชนิด ข้อมูลชนิดสายอักขระเองก็มีเมธอด
toString ด้วย เพียงแต่ว่าเป็นสายอักขระอยู่แล้ว ถึงใช้ก็ไม่ได้เกิดอะไรขึ้น
หากต้องการเปลี่ยนแปลงการแสดงผล เราสามารถเขียนแก้เมธอด toString ได้ด้วยตัวเอง
รายละเอียดจะเขียนถึงใน
บทที่ ๑๙
นอกจากนี้อาจใช้ฟังก์ชัน String แทนเมธอด toString
ผลที่ได้ก็เป็นการแปลงเป็นสายอักขระเหมือนกัน
alert(String(111)); // ได้ 111
เมธอดต่างๆที่ใช้แปลงตัวเลขเป็นสายอักขระ
.toString
เป็นวิธีที่พื้นฐานที่สุดในการแปลงข้อมูลเป็นสายอักขระเพื่อแสดงออกมา
แต่สำหรับการแปลงตัวเลขเป็นสายอักขระนั้น นอกจาก .toString ที่ได้กล่าวไปแล้ว
ก็มีอยู่หลายวิธีด้วยกัน แต่ละวิธีมีความต่างกันออกไป
ข้อมูลชนิดตัวเลขนั้นจะมีเมธอดติดตัวหลายตัวที่ใช้สำหรับแปลงเป็นสายอักขระในลักษณะต่างๆที่ต่างกันไป
ได้แก่
- .toString
- .toFixed
- .toPrecision
- .toExponential
โดยปกติถ้าใช้ .toString แปลงตัวเลขเป็นสายอักขระ
จุดทศนิยมจะแสดงไปจนถึงตำแหน่งสุดท้ายที่ไม่ใช่ 0
แต่ถ้าใช้ toFixed จะแสดงจุดทศนิยมเป็นจำนวนตำแหน่งตามที่กำหนดได้
และจะมีการปัดเศษถ้าเลขตำแหน่งทศนิยมน้อยกว่าที่มีอยู่
var n = 12.93;
alert(n.toFixed(5)); // ได้ 12.93000
alert(n.toFixed(1)); // ได้ 12.9
alert(n.toFixed(0)); // ได้ 13
ถ้าใช้ .toPrecision จะเป็นการกำหนดเลขนัยสำคัญ ผลที่ได้อาจถูกเขียนในรูปคูณ 10
ยกกำลัง
var n = 129.3;
alert(n.toPrecision(5)); // ได้ 129.30
alert(n.toPrecision(3)); // ได้ 129
alert(n.toPrecision(2)); // ได้ 1.3e+2
ถ้าใช้ .toExponential จะได้เป็นรูปเลข [1,10) คูณ 10 ยกกำลัง
โดยมีตำแหน่งทศนิยมตามเลขที่กำหนด
var n = 0.01293;
alert(n.toExponential(5)); // ได้ 1.29300e-2
alert(n.toExponential(1)); // ได้ 1.3e-2
var n = 1293;
alert(n.toExponential(4)); // ได้ 1.2930e+3
alert(n.toExponential(1)); // ได้ 1.3e+3
การแปลงเลขเป็นฐานต่างๆ
เมธอด toString
เมื่อใช้กับตัวเลขยังมีวิธีการใช้แบบพิเศษอย่างหนึ่งก็คือใช้แปลงตัวเลขให้แสดงเป็นฐานที่เรากำหนดได้
ปกติถ้าหากไม่ใส่ก็จะเป็นฐานสิบ คือเป็นไปตามตัวเลขที่ใส่ไป
เลขที่ใส่อาจเป็นเท่าใดก็ได้ตั้งแต่ 2 ถึง 36 มากกว่านั้นไม่ได้
เลขที่เกินมาจะกลายเป็นตัวอักษรโรมัน โดยที่ 10 เป็น a และ 35 เป็น z
alert((75).toString(2)); // ได้ 1001011
alert((88).toString(8)); // ได้ 130
alert((111).toString(10)); // ได้ 111
alert((250).toString(16)); // ได้ fa
alert((71).toString(36)); // ได้ 1z
เลขฐาน 2 ฐาน 8 ฐาน 16
ตัวเลขในจาวาสคริปต์และอีกหลายภาษานอกจากจะเขียนในรูปฐาน 10
ทั่วไปแล้วยังสามารถเขียนในรูปฐาน 2 ฐาน 8 ฐาน 16 ซึ่งเป็นฐานที่สำคัญ
ใช้บ่อยรองลงมาจากฐาน 10
** สำหรับการเขียนในรูปฐาน 16 นั้นทำได้ตั้งแต่ใน ES3 แล้ว
แต่ว่าฐาน 2 และฐาน 8 นั้นเพิ่งถูกเพิ่มเข้ามาให้เขียนได้ตั้งแต่ใน ES6
เป็นต้นมา
การเขียนในรูปเลขฐาน 2 ทำได้โดยขึ้นต้นด้วย 0b แล้วตามด้วยเลขฐาน 2 ที่ต้องการ
เลขจะถูกตีความแปลงเป็นเลขฐาน 10 ให้
alert(0b1111); // ได้ 15
alert(0b1101011); // ได้ 107
ส่วนเลขฐาน 8 ให้ขึ้นต้นด้วย 0o เลขฐาน 16 ให้ขึ้นต้นด้วย 0x
alert(0o77); // ได้ 63
alert(0xff); // ได 255
แต่ว่าถ้าใช้เลขฐาน 2 จะใส่ได้แค่ 0 กับ 1 ส่วนเลขฐาน 8 จะมีได้แค่เลข 0~7
ถ้าใส่เกินโปรแกรมจะรู้และเกิดข้อผิดพลาดทันที
alert(0b22); // ได้ SyntaxError: missing binary digits after '0b'
alert(0o99); // ได้ SyntaxError: missing octal digits after '0o'
แต่ไม่ว่าเขียนอย่างไรข้อมูลก็ถูกแปลงเป็นฐาน 10 หมด
และในทางกลับกันเมื่อต้องการให้กลับมาแสดงในรูป 2, 8, 16 ก็ใช้ .toString
หากแปลงไปแล้วแปลงกับ แน่นอนว่าได้ค่าเท่าเดิม
alert((0b111011000).toString(2)); // ได้ 111011000
alert((0o76).toString(8)); // ได้ 76
alert((0xfba).toString(16)); // ได fba
การแปลงสายอักขระเป็นตัวเลข
หากเรามีสายอักขระที่ใส่ตัวเลขไว้อยู่สามารถนำมาแปลงเป็นข้อมูลชนิดตัวเลขได้
โดยหลักๆแล้วมีอยู่ ๓
ฟังก์ชันที่สามารถใช้ในการแปลงข้อมูลตัวหนังสือให้เป็นตัวเลขได้ ได้แก่
- parseInt
- parseFloat
- Number
แต่ละอันมีความคล้ายกัน บางทีก็ให้ผลเหมือนกัน แต่ก็มีความต่างออกไป
parseInt นั้นจะตีความเลขเป็นจำนวนเต็ม แม้ว่าที่ใส่ไปจะมีทศนิยมก็ตาม
parseFloat จะตีความตัวเลขเป็นจำนวนทศนิยมได้
แต่ถ้าใส่จำนวนเต็มก็ได้จำนวนเต็ม
Number จะคล้าย parseFloat
แต่สามารถใช้แปลงค่าตัวเลขที่แสดงในรูปฐานสองและฐานสิบหกได้
นอกจากนี้ยังมีรายละเอียดปลีกย่อย ดูตัวอย่างจะเข้าใจได้
กรณีที่มีสายอักขระที่ใส่แต่ตัวเลขจำนวนเต็มเดี่ยวๆ ใช้อันไหนก็ได้ผลเหมือนกัน
alert(parseInt("1243")); // ได้ 1243
alert(parseFloat("1243")); // ได้ 1243
alert(Number("1243")); // ได้ 1243
แต่หากเป็นเลขที่มีทศนิยม parseInt จะถูกปัดทิ้ง
alert(parseInt("124.3")); // ได้ 124
alert(parseFloat("124.3")); // ได้ 124.3
alert(Number("124.3")); // ได้ 124.3
หากเป็นสายอักขระที่เขียนเลขที่เขียนในรูป e (คูณสิบยกกำลัง) parseInt
จะไปหยิบเอาเลขที่อยู่หน้าจุดทศนิยมมาแค่นั้น ส่วน parseFloat และ Number
จะอ่านได้ถูกต้อง
alert(parseInt("12.4e3")); // ได้ 12
alert(parseFloat("12.4e3")); // ได้ 12400
alert(Number("12.4e3")); // ได้ 12400
หากเป็นตัวเลขนำหน้าแล้วมีตัวหนังสืออะไรก็ตามอย่างอื่นตาม parseInt และ
parseFloat จะหยิบเฉพาะตัวเลขมา โดย parseFloat จะหยิบมาถึงหลังทศนิยม แต่
parseInt จะตัดเศษทิ้ง ส่วน Number จะได้ NaN
alert(parseInt("12.1บาท")); // ได้ 12
alert(parseFloat("12.1บาท")); // ได้ 12.1
alert(Number("12.1บาท")); // ได้ NaN
แต่ถ้าขึ้นต้นด้วยอะไรที่ไม่ใช่ตัวเลข จะได้ NaN ทั้งหมด
alert(parseInt("b1")); // ได้ NaN
alert(parseFloat("b1")); // ได้ NaN
alert(Number("b1")); // ได้ NaN
กรณีที่อ่านสายอักขระที่เขียนแสดงเลขฐาน 2 (ขึ้นด้วย 0b) หรือ 8 (ขึ้นด้วย 0o)
จะใช้ parseInt หรือ parseFloat ไม่ได้ ใช้แล้วจะกลายเป็น 0 หมด
alert(parseInt("0b1011")); // ได้ 0
alert(parseFloat("0b1011")); // ได้ 0
alert(Number("0b1011")); // ได้ 11
alert(parseInt("0o777")); // ได้ 0
alert(parseFloat("0o777")); // ได้ 0
alert(Number("0o777")); // ได้ 511
แต่เลขฐาน 16 (ขึ้นด้วย 0x) ใช้ parseInt ได้ด้วย ในขณะที่ parseFloat ยังคงได้
0
alert(parseInt("0xaaa")); // ได้ 2730
alert(parseFloat("0xaaa")); // ได้ 0
alert(Number("0xaaa")); // ได้ 2730