แปลงข้อมูลอื่นเป็นตัวเลขใน JavaScript ด้วยเครื่องหมาย +

Nuttavut Thongjor

"ตัวเลข" นอกจากจะสำคัญทุกวันสิ้นเดือนและวันหวยออกแล้ว Number ยังถือเป็นชนิดข้อมูลที่ขาดไม่ได้ใน JavaScript เช่นกัน

เป็นที่ทราบกันดีว่าเราสามารถแปลงชนิดข้อมูลอื่นเป็นตัวเลขได้ผ่านการเรียก Number เช่น เรียกใช้ Number('123') เพื่อเปลี่ยนข้อความ 123 ให้เป็นตัวเลข เป็นต้น

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

แปลงชนิดข้อมูลอื่นเป็นตัวเลขด้วย +

เครื่องหมาย + (Unary + Operator) นั้นทำให้เราสามารถแปลงข้อมูลจากชนิดข้อมูลอื่นให้เป็นตัวเลขได้ เช่นเดียวกับที่ Number() ทำ

JavaScript
1+1 // 1
2
3// แปลง String เป็น Number
4+'22' // 22
5+"0xAF" // 175
6+"1e10" // 10000000000
7
8// แปลง Boolean เป็น Number
9// ค่า true มีค่าเทียบเท่า 1
10// ในขณะที่ค่า false เทียบเท่า 0
11+true // 1
12
13// แปลง Date เป็น timestamp
14+new Date() // 1487140872272
15
16// null มีค่าเป็น 0
17+null // 0
18
19// แต่ undefined เป็นชนิดข้อมูลที่ไม่ใช่ตัวเลข (Not a Number หรือ NaN)
20+undefined // NaN

เครื่องหมาย + หรือ parseInt ดีกว่ากัน

parseInt และ parseFloat ถือเป็นการแปลงค่าข้อความเป็นตัวเลขแบบหยาบครับ ถ้าข้อความของเราขึ้นต้นด้วยตัวเลขแล้วตามด้วยอักษรอื่นที่ไม่ใช่ตัวเลข ทั้งสองฟังก์ชันที่กล่าวมาจะตัดเฉพาะส่วนของตัวเลขไปสร้างเป็นผลลัพธ์

JavaScript
1parseInt('555lol') // 555

ปัญหาจะเกิดขึ้นเมื่อผู้ใช้งานใส่ค่าเข้ามาโดยเจ้าตัวคิดว่าใส่ถูกต้องแล้ว แต่แท้จริงแล้วผิดถนัดเช่นระบุ 3,590 เข้ามา ทั้งๆที่การระบุตัวเลขอย่างถูกต้องต้องไม่มีเครื่องหมายจุลภาค

JavaScript
1parseInt('3,590') // 3

หากเราใช้ parseInt เพื่อแปลงค่าดังกล่าว ระบบของเราก็จะทำงานผิดพลาดทันที เมื่อผู้ใช้งานระบุค่าผิดพลาดเราควรได้รับค่า NaN ที่เป็นการบอกว่าค่าดังกล่าวไม่ใช่ตัวเลข (Not a Number) มากกว่า ตรงจุดนี้หละครับที่เครื่องหมาย + ของเราจะได้โชว์พาวอวดสาวกันซะที

JavaScript
1+'3,590' // NaN
2Number('3,590') // NaN

อย่าลืมว่าการใช้เครื่องหมาย + ไม่ต่างจากการใช้ Number() เราจึงสามารถแทนที่กันได้โดยตรง

การแปลงอ็อบเจ็กต์เป็นตัวเลข

กรณีของอ็อบเจ็กต์ เครื่องหมาย + จะเรียกเมธอด valueOf แล้วตามด้วย toString() ของอ็อบเจ็กต์ก่อนดำเนินการแปลงข้อมูล สิ่งใดเป็นค่าที่ได้จากการเรียกเมธอด เครื่องหมาย + ของเราจะนำสิ่งนั้นไปแปลงเป็นตัวเลขอีกทอดนึง

JavaScript
1const bookshelf = {
2 books: [
3 'JavaScript',
4 'Ruby',
5 'Elixir',
6 'Python'
7 ],
8 valueOf() {
9 return this.books.length
10 }
11}
12
13// หนังสือในตู้มี 4 เล่ม
14+bookshelf // 4
15// มีค่าเท่ากับ +bookshelf.valueOf().toString()

แปลง Built-in objects อื่นเป็นตัวเลข

ในกรณีของ Built-in objects เมื่อใช้เครื่องหมาย + นำหน้าย่อมเป็นการเรียก .valueOf().toString() เช่นกัน

JavaScript
1// เพราะว่า [].valueOf().toString() เป็น ""
2// +"" มีค่าเท่ากับ 0
3+[] // 0
4
5// เพราะว่า [1, 2, 3].valueOf().toString() เป็น "1,2,3"
6// +"1,2,3" มีค่าเท่ากับ NaN
7+[1, 2, 3] // NaN
8
9+new Set([1, 2, 3]) // 0

เอาหละถึงเวลาเล่นสนุกกันแล้ว คุณคิดว่าผลลัพธ์จากการเรียก ++[[1]][+[]]+[+[]]+[1] คือเท่าไร? ถ้าคำตอบของคุณคือ "201" ยินดีด้วยครับคุณสอบผ่านแล้ว~

สรุป

เครื่องหมาย + เสมือนการใช้งาน Number() เราสามารถใช้อย่างใดอย่างหนึ่งแทนกันได้ การใช้งานเครื่องหมายพิเศษพวกนี้มีสิ่งหนึ่งที่ต้องคำนึงเป็นพิเศษ นั่นคือใส่ไปแล้วจะทำให้คนอ่านโค้ดของเรางงเป็นไก่ตาแตกหรือไม่ หากโค้ดที่สั้นลงทำให้อ่านยากขึ้นก็ไม่อาจเรียกว่าประสบความสำเร็จในการเขียนโปรแกรมได้ครับ

สารบัญ

สารบัญ

  • แปลงชนิดข้อมูลอื่นเป็นตัวเลขด้วย + -
  • เครื่องหมาย + หรือ parseInt ดีกว่ากัน -
  • การแปลงอ็อบเจ็กต์เป็นตัวเลข -
  • แปลง Built-in objects อื่นเป็นตัวเลข -
  • สรุป -