TypeScript Academy · บทเรียน

การรวมค่ากรณีเป็นค่าว่างด้วย ??

กำหนดค่า fallback เฉพาะกรณีเป็น null หรือ undefined ไม่ใช่ค่าที่ถือว่าเป็นเท็จทั้งหมด

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

ตัวดำเนินการรวมค่าค่าว่าง

ตัวดำเนินการ ?? จะคืนค่าด้านขวาเฉพาะเมื่อค่าด้านซ้ายเป็น null หรือ undefined มิฉะนั้นจะคืนค่าด้านซ้าย วิธีนี้เป็นวิธีที่แม่นยำในการระบุค่าเริ่มต้น

const name: string | null = null;
const display = name ?? 'Guest';
console.log(display); // 'Guest'

มีเพียงค่าว่างเท่านั้นที่เรียกใช้ค่าเผื่อ

คำสำคัญคือค่าว่าง: มีเพียง null และ undefined เท่านั้นที่ทำให้ใช้ค่าด้านขวา ค่าชนิดอื่นทั้งหมด รวมถึงค่าที่เป็นเท็จ จะถูกส่งต่อโดยไม่เปลี่ยนแปลง

console.log(0 ?? 99);       // 0
console.log('' ?? 'x');     // ''
console.log(false ?? true); // false
console.log(null ?? 'def'); // 'def'

ปัญหาของ ||

ตัวดำเนินการตรรกะ OR || จะใช้ค่าเผื่อกับค่าที่เป็นเท็จทุกชนิด: 0, '', false, NaN รวมถึงค่าที่เป็นค่าว่าง วิธีนี้มักทำให้เกิดข้อผิดพลาดเมื่อ 0 หรือสตริงว่างเป็นข้อมูลเข้าที่ถูกต้อง

const count = 0;
console.log(count || 10); // 10 — wrong! 0 is a valid count
console.log(count ?? 10); // 0  — correct

กำหนดค่าเริ่มต้นอย่างถูกต้อง

ใช้ ?? เมื่อศูนย์ สตริงว่าง หรือ false เป็นค่าที่ถูกต้องและคุณต้องการเก็บไว้ ใช้ || เฉพาะกรณีที่ค่าที่เป็นเท็จทุกชนิดควรเปลี่ยนเป็นค่าเผื่อจริง ๆ

function volume(v: number | undefined): number {
  return v ?? 50; // 0 stays 0, undefined becomes 50
}
console.log(volume(0), volume(undefined));

?? กับพารามิเตอร์ของฟังก์ชัน

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

function greet(name?: string): string {
  return 'Hello, ' + (name ?? 'friend');
}
console.log(greet('Ada'), greet());

ชนิดผลลัพธ์ของ ??

ชนิดของ a ?? b จะลบ null | undefined ออกจากชนิดของ a แล้วรวมกับชนิดของ b หาก a เป็น string | null และ b เป็น string ผลลัพธ์จะเป็น string

const maybe: string | null = null;
const sure: string = maybe ?? 'default';
console.log(sure.toUpperCase());

เชื่อมต่อค่าเริ่มต้นหลายค่า

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

const fromEnv: string | undefined = undefined;
const fromConfig: string | null = null;
const value = fromEnv ?? fromConfig ?? 'hardcoded';
console.log(value);

?? กับลำดับความสำคัญ

คุณไม่สามารถใช้ ?? ร่วมกับ || หรือ && โดยไม่มีวงเล็บได้ เพราะ TypeScript กำหนดให้ใช้วงเล็บเพื่อหลีกเลี่ยงความกำกวม ควรจัดกลุ่มนิพจน์อย่างชัดเจนเสมอ

const a: number | null = null;
const b = true;
// const x = a ?? 5 || 10; // Error without parens
const x = (a ?? 5) || 10;
console.log(x);

แยกศูนย์ออกจากค่าที่หายไป

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

function format(temp: number | undefined): string {
  return (temp ?? 'N/A') + ' degrees';
}
console.log(format(0), format(undefined));

?? กับคุณสมบัติของออบเจ็กต์

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

type Opts = { retries?: number };
function run(o: Opts): number {
  return o.retries ?? 3;
}
console.log(run({ retries: 0 }), run({}));

ควรเลือกใช้แบบใด

กฎการตัดสินใจคือ หาก 0, '' หรือ false เป็นค่าที่ถูกต้องและต้องเก็บไว้ ให้ใช้ ?? หากคุณต้องการแทนที่ค่าที่เป็นเท็จทุกชนิดจริง ๆ ให้ใช้ || ข้อผิดพลาดในการกำหนดค่าเริ่มต้นมักเกิดจากการเลือกใช้ || ตามความเคยชิน

const username = '';
console.log(username || 'anon'); // 'anon' — empty replaced
console.log(username ?? 'anon'); // '' — empty kept

แบบทดสอบสั้นๆ

ทดสอบความเข้าใจเกี่ยวกับการรวมค่าเมื่อไม่มีค่า

สรุป: การรวมค่าเมื่อไม่มีค่า

คุณได้เรียนรู้ว่า ??:

ส่งคืนค่าเผื่อเฉพาะเมื่อด้านซ้ายเป็น null หรือ undefined เท่านั้น
คงค่าที่เป็นเท็จแต่ใช้งานได้ เช่น 0, '' และ false ไว้ ต่างจาก ||
นำ null | undefined ออกจากชนิดผลลัพธ์
ต้องใช้วงเล็บเมื่อใช้ร่วมกับ || หรือ &&

ถัดไป เราจะรวม ?. และ ?? เข้าด้วยกัน

function port(v: number | undefined): number {
  return v ?? 8080;
}
console.log(port(0), port(undefined));

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

บทเรียน “การรวมค่ากรณีเป็นค่าว่างด้วย ??” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การรวมค่ากรณีเป็นค่าว่างด้วย ??”

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

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

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

บทเรียน “การรวมค่ากรณีเป็นค่าว่างด้วย ??” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ TypeScript Academy