Convert data. The value of the data atype variable.
Type Conversion or Type Casting in JavaScript can be done in a variety of ways depending on which type you want to convert the data to. This is essentially a back-and-forth conversion between String, Number and Boolean.
Here are some of the main ways to convert data types:
1.Converting to String (text)
You can convert any data into String using three main ways:
Method Code Sample Results
String (value) (function) String (123) "123"
String (true) "true"
value.toString () (method) (123) .toString () "123"
(false) .toString () "false."
String Concatenation (The Easiest Way) 123 + "" 123 "
Export to sheet
2. Conversion to Number (number)
Converting data into numbers is the most common and sensitive:
Method Code Sample Results Remembering
Number (value) (function) Number ("123") 123 changes null to 0, true to 1, false to 0, and non-number text (such as "hello") to NaN (Not a Number).
Unary Plus (+) + "123" 123 is a short and fast way to convert to numbers.
+ true 1
ParseInt (string) parseInt ("100px") 100 converts to an integer (Integer), stopping when it comes across a non-numeric character.
ParseFloat (string) parseFloat ("10.5em") 10.5 Converted to decimal (floating-point)
Export to sheet
Number () examples to watch out for:
JavaScript
Number ("123"); / / 123
Number ("12 34"); / / NaN (with space between numbers)
Number ("abc"); / / NaN
Number (null); / / 0
Number (undefined); / / NaN
3. Conversion to Boolean (true / false)
You can convert any data into a Boolean using two main ways:
Method Code Sample Results
Boolean (value) (function) Boolean (1) true
Boolean (0) false
Double NOT (!!)!! 1 true
!! 0 false
Export to sheet
The following values are converted to false (called Falsy Values):
Value (Value) Data Type
0 Number
"" (String empty) String
Null Object
Undefined Undefined
NaN Number
False Boolean
Export to sheet
All other values are converted to true (called Truthy Values), such as "0," "[] (Array is empty), or {} (Object is empty).
💡 Type Coercion (implicit data type conversion)
JavaScript also provides Implicit Conversion, also known as Type Coercion, when some Operators are in use, such as:
Operator + (addition): If one of the values is String, convert the other into String and connect String instead of adding numbers.
JavaScript
"10" + 5; / / "105" (5 was converted to "5")
10 + "5"; / / "105" (10 was converted to "10")
Other mathematical Operators (-, *, /): will try to convert all values into Numbers.
JavaScript
"10" - 5; / / 5 ("10" is converted to 10)
"10" * "2"; / / 20 ("10" and "2" were converted to 10 and 2)
Operator in terms (= =): Will convert the data type to the same before comparing.
JavaScript
"5" = = 5; / / true (5 is converted to "5" before comparison)
Instructions: To keep the code clear and prevent errors, Explicit Conversion (Explicit Conversion, such as Use Number () or String ()) should be used, and use Strict Equality Operator (= = =) to compare values and data types directly without implicit data conversion.
หลายคนเริ่มเรียน JavaScript แล้วงงคำว่า “ชนิดข้อมูล” (datatype) เพราะเวลาอ่านโค้ดจะเจอทั้ง string, number, boolean และบางทีมีคำถามต่อว่า “integer คืออะไร” ทั้งที่ใน JS เหมือนจะมีแต่ Number อย่างเดียว ผมสรุปจากที่ใช้งานจริงให้เข้าใจง่ายๆ แบบนี้ ชนิดข้อมูล (ชนิดของค่า) คือประเภทของค่าที่ตัวแปรเก็บอยู่ เช่น ข้อความ ตัวเลข หรือจริง/เท็จ ซึ่งมีผลกับการคำนวณและการเปรียบเทียบมากๆ 1) String คืออะไร String คือ “ข้อความ” อยู่ในเครื่องหมาย '...' หรือ "..." เช่น "123" หรือ "hello" จุดที่ชอบพลาดคือ "123" เป็นข้อความ ไม่ใช่ตัวเลข ดังนั้น "10" + 5 จะได้ "105" เพราะเครื่องหมาย + เจอ string แล้วจะกลายเป็นการต่อข้อความ (type coercion) ทริคที่ผมใช้บ่อย: - แปลงเป็น string ชัดๆ: String(value) หรือ value.toString() - ถ้าค่าอาจเป็น null/undefined ให้ระวัง toString() เพราะจะ error ได้ (กรณี null.toString()) เลยใช้ String(value) ปลอดภัยกว่า 2) Integer คืออะไร (ใน JavaScript) Integer แปลว่า “จำนวนเต็ม” เช่น 1, 2, -5 ไม่มีจุดทศนิยม แต่ใน JavaScript “ชนิดข้อมูล” หลักของตัวเลขคือ Number (เป็น floating-point) หมายความว่า 1 และ 1.5 ก็เป็นชนิด Number เหมือนกัน แล้วทำไมยังมีคำว่า integer? - เป็น “รูปแบบของค่า” ที่เป็นจำนวนเต็ม แม้ชนิดข้อมูลยังเป็น Number - เวลาแปลง/รับค่าจาก input เรามักอยากได้จำนวนเต็มเลยใช้ parseInt() ตัวอย่างที่เจอบ่อย: - parseInt("100px", 10) ได้ 100 (หยุดเมื่อเจอตัวอักษร) - parseInt("08", 10) ควรใส่ฐาน 10 ไว้เสมอเพื่อกันการตีความผิด - Number("100px") จะได้ NaN (แปลงทั้งสตริง ต้องเป็นตัวเลขล้วนๆ ถึงผ่าน) 3) แปลงเป็นตัวเลข: Number() vs parseInt() vs parseFloat() ผมเลือกใช้ตามเคสแบบนี้ - ต้องการให้ “ทั้งสตริง” เป็นตัวเลขจริงๆ: ใช้ Number("123") - ต้องการ “จำนวนเต็ม” จากข้อความที่อาจมีหน่วย: ใช้ parseInt("100px", 10) - ต้องการทศนิยม: ใช้ parseFloat("10.5em") ข้อควรระวังที่ผมเจอบ่อย: - Number("12 34") ได้ NaN เพราะมีช่องว่างคั่นกลาง - Number(null) ได้ 0 แต่ Number(undefined) ได้ NaN 4) Boolean และค่า truthy/falsy แปลงเป็น boolean ใช้ Boolean(value) หรือ !!value ได้เลย สิ่งที่เป็น falsy ที่ควรจำ: 0, "", null, undefined, NaN, false นอกนั้นส่วนใหญ่เป็น true (เช่น "0", [], {}) 5) เปรียบเทียบค่าให้ชัวร์ ถ้าไม่อยากให้ JS แปลงชนิดให้เอง แนะนำใช้ === แทน == เช่น "5" == 5 เป็น true แต่ "5" === 5 เป็น false ซึ่งช่วยลดบั๊กได้เยอะ สรุปสั้นๆ: ถ้าคุณสงสัยว่า string คืออะไรให้ดูว่าอยู่ในเครื่องหมายคำพูดไหม ส่วน integer คือ “ค่าแบบจำนวนเต็ม” แต่ชนิดข้อมูลใน JS ยังเป็น Number อยู่ และถ้าต้องแปลงค่า แนะนำแปลงแบบ explicit (Number/String/Boolean/parseInt/parseFloat) จะอ่านโค้ดง่ายและปลอดภัยกว่า


























































































