Babel Coder

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

beginner

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

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

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

สารบัญ

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

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

+1 // 1

// แปลง String เป็น Number
+'22' // 22
+"0xAF" // 175
+"1e10" // 10000000000

// แปลง Boolean เป็น Number
// ค่า true มีค่าเทียบเท่า 1
// ในขณะที่ค่า false เทียบเท่า 0
+true // 1

// แปลง Date เป็น timestamp
+new Date() // 1487140872272

// null มีค่าเป็น 0
+null // 0

// แต่ undefined เป็นชนิดข้อมูลที่ไม่ใช่ตัวเลข (Not a Number หรือ NaN)
+undefined // NaN

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

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

parseInt('555lol') // 555

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

parseInt('3,590') // 3

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

+'3,590' // NaN
Number('3,590') // NaN

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

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

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

const bookshelf = {
  books: [
    'JavaScript',
    'Ruby',
    'Elixir',
    'Python'
  ],
  valueOf() {
    return this.books.length
  }
}

// หนังสือในตู้มี 4 เล่ม
+bookshelf // 4
// มีค่าเท่ากับ +bookshelf.valueOf().toString()

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

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

// เพราะว่า [].valueOf().toString() เป็น ""
// +"" มีค่าเท่ากับ 0
+[] // 0 

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

+new Set([1, 2, 3]) // 0

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

สรุป

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


แสดงความคิดเห็นของคุณ


No any discussions