0Pricing
Frontend Academy · บทเรียน

ชนิดข้อมูล: string number boolean null undefined

สำรวจชนิดข้อมูลพื้นฐานของ JavaScript ใช้ typeof เพื่อตรวจสอบ และเรียนรู้ความแตกต่างระหว่าง null กับ undefined

ชนิดข้อมูล: string number boolean null undefined เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

ระบบชนิดข้อมูลของ JavaScript

JavaScript มีการกำหนดชนิดข้อมูลแบบไดนามิก ตัวแปรไม่มีชนิดข้อมูล แต่ค่าต่าง ๆ มีชนิดข้อมูล ตัวแปรเดียวกันอาจเก็บสตริง จากนั้นเป็นตัวเลข แล้วจึงเป็น null การทำความเข้าใจชนิดข้อมูลพื้นฐานทั้งเจ็ดช่วยป้องกันข้อผิดพลาดจำนวนมาก

สตริง

สตริงใช้แทนข้อความ คุณสามารถใช้เครื่องหมายอัญประกาศเดี่ยว อัญประกาศคู่ หรือ backtick (ลิเทอรัลแม่แบบ) สตริงเปลี่ยนแปลงไม่ได้ เมธอดของสตริงจะส่งคืนสตริงใหม่ สตริงมีคุณสมบัติ .length และมีเมธอดในตัวมากมาย

const greeting = 'Hello';
const lang = "JavaScript";
const sentence = `I love ${lang}`;  // template literal

console.log(greeting.length);   // 5
console.log('hello'.toUpperCase()); // 'HELLO'
console.log(' trim me '.trim()); // 'trim me'

ตัวเลข

JavaScript มีชนิดข้อมูลตัวเลขเพียงชนิดเดียว ตัวเลขทั้งหมด ทั้งจำนวนเต็มและจำนวนทศนิยม เป็นเลขทศนิยมแบบ 64 บิต (IEEE 754) ดังนั้น 0.1 + 0.2 !== 0.3 ค่าพิเศษ ได้แก่ Infinity, -Infinity และ NaN (ไม่ใช่ตัวเลข)

const age = 30;
const price = 19.99;
console.log(0.1 + 0.2);          // 0.30000000000000004
console.log(typeof NaN);          // 'number'
console.log(isNaN('hello'));      // true
console.log(Number.isNaN('hello')); // false (safer check)

ค่าบูลีน

ค่าบูลีนมีค่าเป็น true หรือ false ใช้ในเงื่อนไขและการเปรียบเทียบ ทุกค่าใน JavaScript มีค่าความจริงโดยธรรมชาติ ค่าเท็จเมื่อแปลงเป็นบูลีน ได้แก่ false, 0, '', null, undefined และ NaN ส่วนค่าอื่นทั้งหมดเป็นจริงเมื่อแปลงเป็นบูลีน

const isActive = true;
const isAdmin = false;

// Falsy values:
if (0) { /* never runs */ }
if ('') { /* never runs */ }
if (null) { /* never runs */ }

null

null คือค่าว่างที่กำหนดให้อย่างชัดเจน หมายถึง “ไม่มีค่าโดยตั้งใจ” ใช้ null เมื่อคุณต้องการล้างค่าตัวแปรหรือระบุว่าค่าไม่ मौजूद typeof null === 'object' เป็นข้อผิดพลาดอันโด่งดังของ JavaScript ที่คงไว้เพื่อความเข้ากันได้กับโค้ดเดิม

let selectedUser = null;  // no user selected yet
selectedUser = { name: 'Alice' };
selectedUser = null;       // cleared

undefined

undefined หมายความว่ายังไม่ได้กำหนดค่าให้ ตัวแปรที่ประกาศแล้วแต่ยังไม่ได้กำหนดค่าจะมีค่าเป็น undefined อาร์กิวเมนต์ของฟังก์ชันที่ไม่ได้ส่งมาก็มีค่าเป็น undefined เช่นกัน คุณสมบัติของออบเจ็กต์ที่ไม่มีอยู่จะส่งคืนค่า undefined

let x;                       // undefined
function greet(name) {
  console.log(name);           // undefined if called as greet()
}
const obj = {};
console.log(obj.foo);         // undefined

null เทียบกับ undefined

null = ไม่มีค่าโดยตั้งใจ undefined = ยังไม่ได้กำหนดค่า ตามหลักทั่วไป ให้เอนจินกำหนดค่า undefined และใช้ null อย่างชัดเจนในโค้ดของคุณเองเมื่อหมายถึง “ว่าง”

ตัวดำเนินการ typeof

ใช้ typeof เพื่อตรวจสอบชนิดข้อมูลของค่าในขณะทำงาน โดยจะส่งคืนสตริงหนึ่งค่า ได้แก่ 'string', 'number', 'boolean', 'undefined', 'object', 'function', 'bigint' หรือ 'symbol' โปรดจำไว้ว่า typeof null === 'object' เป็นข้อผิดพลาดที่รู้จักกันดี

typeof 'hello'     // 'string'
typeof 42          // 'number'
typeof true        // 'boolean'
typeof undefined   // 'undefined'
typeof null        // 'object' ← historical bug
typeof {}          // 'object'
typeof []          // 'object'
typeof function(){} // 'function'

Symbol และ BigInt

Symbol: ตัวระบุที่ไม่ซ้ำกันและเปลี่ยนแปลงไม่ได้ ใช้เป็นคีย์คุณสมบัติของออบเจ็กต์ที่ไม่ชนกัน BigInt: จำนวนเต็มที่มีค่ามากกว่า Number.MAX_SAFE_INTEGER (2^53-1) สร้างได้ด้วย 42n หรือ BigInt(42) โดยทั่วไปงานส่วนหน้าไม่จำเป็นต้องใช้ชนิดนี้

ข้อควรระวังในการบังคับแปลงชนิดข้อมูล

JavaScript แปลงชนิดข้อมูลอย่างเงียบ ๆ ระหว่างการเปรียบเทียบและการดำเนินการ ใช้ === (ความเท่ากันแบบเข้มงวด) แทน == (ความเท่ากันแบบผ่อนปรน) เพื่อหลีกเลี่ยงความประหลาดใจจากการบังคับแปลงชนิดข้อมูล

0 == false        // true (coercion)
0 === false       // false (strict, no coercion)
'' == false       // true
'5' == 5          // true
'5' === 5         // false ✓ use this

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

แปลงชนิดข้อมูลอย่างชัดเจนด้วย Number(), String(), Boolean() หรือ parseInt() / parseFloat() การแปลงอย่างชัดเจนอ่านเข้าใจได้ชัดเจนกว่าการพึ่งพาการบังคับแปลงชนิดข้อมูลเสมอ

Number('42')      // 42
Number('')        // 0
Number('abc')     // NaN
String(42)        // '42'
Boolean(0)        // false
Boolean('hello')  // true
parseInt('10px')  // 10

ตรวจสอบอย่างรวดเร็ว

typeof null ส่งคืนค่าใดใน JavaScript

ทบทวน: ชนิดข้อมูลของ JavaScript

ชนิดข้อมูลพื้นฐานทั้งเจ็ด ได้แก่ สตริง ตัวเลข ค่าบูลีน null undefined symbol และ bigint ใช้ typeof เพื่อตรวจสอบชนิดข้อมูล ใช้ === ในการเปรียบเทียบเพื่อหลีกเลี่ยงการบังคับแปลงชนิดข้อมูล แยกให้ออกระหว่าง null (ว่างโดยตั้งใจ) กับ undefined (ยังไม่ได้กำหนดค่า) ค่าประเภทอื่นทั้งหมดเป็นออบเจ็กต์

คำถามที่พบบ่อย

บทเรียน “ชนิดข้อมูล: string number boolean null undefined” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ชนิดข้อมูล: string number boolean null undefined” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ชนิดข้อมูล: string number boolean null undefined”

สำรวจชนิดข้อมูลพื้นฐานของ JavaScript ใช้ typeof เพื่อตรวจสอบ และเรียนรู้ความแตกต่างระหว่าง null กับ undefined คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “ชนิดข้อมูล: string number boolean null undefined” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ตัวแปร: let const var และขอบเขต
  2. ชนิดข้อมูล: string number boolean null undefined
  3. ฟังก์ชัน: การประกาศ นิพจน์ และฟังก์ชันลูกศร
  4. ลำดับการควบคุม: if else switch for while
← กลับไปที่ Frontend Academy