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

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

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

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

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

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

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

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

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

1parseInt('555lol') // 555

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

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

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

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

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

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

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

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

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

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

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

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

สรุป

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