การแปลงชนิดข้อมูล

• ในบทที่แล้ว ตอนที่เราทำ มินิโปรเจกต์: โปรแกรมบวกเลข เราพบว่าเวลาดึงข้อความหรือตัวเลขจากกล่อง <input> ออกมา จะได้ข้อมูลชนิด string ออกมาเสมอ

  <input id="a" value="42" size="8" />

  a.value"42"

  และเราได้เอา string มาคูณด้วย 1 เพื่อแปลงเป็นตัวเลข:

  a.value * 142

• จึงกลายเป็นโค้ดแบบนี้ในโปรเจกต์

  calculate.onclick = () => {
    let answer = (a.value * 1) + (b.value * 1)
    c.value = answer
  }

• แต่คนอื่นที่มาเห็นโค้ดนี้อาจจะงง และสงสัยว่า “ทำไมต้องเอามาคูณด้วย 1 ด้วยล่ะ?”

• เราในฐานะคนที่เขียนโค้ด เรารู้ดีว่า เราเอาสตริงนี้มาคูณด้วย 1 เพื่อแปลง string เป็น number แต่คนอื่นที่มาอ่านโค้ดนี้เขาอาจจะไม่รู้ เพราะโค้ดที่เราเขียน ไม่ได้สื่อความหมายตรงกับเป้าหมายของมัน

  • เป้าหมาย: การแปลง string เป็น number
  • สิ่งที่เขียน: การคูณด้วย 1

• จริงอยู่ที่ว่าเราสามารถเขียนอธิบายเป้าหมายที่แท้จริงของโค้ดได้ด้วยคอมเม้นต์

  calculate.onclick = () => {
    //           ใช้ `* 1` เพื่อแปลงค่าจาก string เป็น number
    let answer = (a.value * 1) + (b.value * 1)
    c.value = answer
  }

  …แต่มีวิธีไหนไหมที่เราจะสามารถสื่อความหมายว่า “เราต้องการแปลงค่านี้เป็น number” ให้ชัดเจน และตรงไปตรงมาขึ้น?

การแปลงชนิดข้อมูล

• ในภาษา JavaScript เราสามารถแปลงค่าต่างๆ เป็นตัวเลข โดยครอบด้วย Number()

  Number(a.value)42

  แปลงค่าเป็น number

  Number(expression)

• และเราสามารถแปลงค่าต่างๆ เป็นสตริง โดยครอบด้วย String()

  String(1)"1"

  แปลงค่าเป็น string

  String(expression)

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

• เราเรียกการแปลงชนิดข้อมูลโดยตรงแบบนี้ว่า “explicit type conversion” หรือ “typecasting”

• ส่วนการแปลงชนิดข้อมูลที่เกิดขึ้นโดยอัตโนมัติ เรียกว่า “implicit type conversion” หรือ “type coercion” เป็นการแปลงชนิดข้อมูลโดยทางอ้อม

  แปลง x เป็น	แปลงแบบอ้อมๆ (implicit)	แปลงแบบตรงๆ (explicit)
  number	x * 1	Number(x)
  string	x + ""	String(x)