φυβλαςのβλογ
บล็อกของ phyblas



javascript เบื้องต้น บทที่ ๕: การใช้เมธอดและการแปลงชนิดข้อมูล
เขียนเมื่อ 2019/07/31 23:09
แก้ไขล่าสุด 2021/09/28 16:42


การใช้เมธอด 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




-----------------------------------------

囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧

ดูสถิติของหน้านี้

หมวดหมู่

-- คอมพิวเตอร์ >> เขียนโปรแกรม >> javascript

ไม่อนุญาตให้นำเนื้อหาของบทความไปลงที่อื่นโดยไม่ได้ขออนุญาตโดยเด็ดขาด หากต้องการนำบางส่วนไปลงสามารถทำได้โดยต้องไม่ใช่การก๊อปแปะแต่ให้เปลี่ยนคำพูดเป็นของตัวเอง หรือไม่ก็เขียนในลักษณะการยกข้อความอ้างอิง และไม่ว่ากรณีไหนก็ตาม ต้องให้เครดิตพร้อมใส่ลิงก์ของทุกบทความที่มีการใช้เนื้อหาเสมอ

สารบัญ

รวมคำแปลวลีเด็ดจากญี่ปุ่น
มอดูลต่างๆ
-- numpy
-- matplotlib

-- pandas
-- manim
-- opencv
-- pyqt
-- pytorch
การเรียนรู้ของเครื่อง
-- โครงข่าย
     ประสาทเทียม
ภาษา javascript
ภาษา mongol
ภาษาศาสตร์
maya
ความน่าจะเป็น
บันทึกในญี่ปุ่น
บันทึกในจีน
-- บันทึกในปักกิ่ง
-- บันทึกในฮ่องกง
-- บันทึกในมาเก๊า
บันทึกในไต้หวัน
บันทึกในยุโรปเหนือ
บันทึกในประเทศอื่นๆ
qiita
บทความอื่นๆ

บทความแบ่งตามหมวด



ติดตามอัปเดตของบล็อกได้ที่แฟนเพจ

  ค้นหาบทความ

  บทความแนะนำ

ตัวอักษรกรีกและเปรียบเทียบการใช้งานในภาษากรีกโบราณและกรีกสมัยใหม่
ที่มาของอักษรไทยและความเกี่ยวพันกับอักษรอื่นๆในตระกูลอักษรพราหมี
การสร้างแบบจำลองสามมิติเป็นไฟล์ .obj วิธีการอย่างง่ายที่ไม่ว่าใครก็ลองทำได้ทันที
รวมรายชื่อนักร้องเพลงกวางตุ้ง
ภาษาจีนแบ่งเป็นสำเนียงอะไรบ้าง มีความแตกต่างกันมากแค่ไหน
ทำความเข้าใจระบอบประชาธิปไตยจากประวัติศาสตร์ความเป็นมา
เรียนรู้วิธีการใช้ regular expression (regex)
การใช้ unix shell เบื้องต้น ใน linux และ mac
g ในภาษาญี่ปุ่นออกเสียง "ก" หรือ "ง" กันแน่
ทำความรู้จักกับปัญญาประดิษฐ์และการเรียนรู้ของเครื่อง
ค้นพบระบบดาวเคราะห์ ๘ ดวง เบื้องหลังความสำเร็จคือปัญญาประดิษฐ์ (AI)
หอดูดาวโบราณปักกิ่ง ตอนที่ ๑: แท่นสังเกตการณ์และสวนดอกไม้
พิพิธภัณฑ์สถาปัตยกรรมโบราณปักกิ่ง
เที่ยวเมืองตานตง ล่องเรือในน่านน้ำเกาหลีเหนือ
ตระเวนเที่ยวตามรอยฉากของอนิเมะในญี่ปุ่น
เที่ยวชมหอดูดาวที่ฐานสังเกตการณ์ซิงหลง
ทำไมจึงไม่ควรเขียนวรรณยุกต์เวลาทับศัพท์ภาษาต่างประเทศ

ไทย

日本語

中文