Automatically translated.View original post

Convert data. The value of the data atype variable.

# Web Site Writing Basics

# javascrip

# data atype

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.

2025/10/3 Edited to

... Read moreหลายคนเริ่มเรียน 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) จะอ่านโค้ดง่ายและปลอดภัยกว่า