การรวมค่า nullish ด้วย ??
กำหนดค่าเริ่มต้นเฉพาะเมื่อเป็น null หรือ undefined
การรวมค่า nullish ด้วย ?? เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
การกำหนดค่าเริ่มต้น
บ่อยครั้งคุณต้องการค่าทดแทนเมื่อไม่มีค่าใดอยู่ ตัวดำเนินการรวมค่า nullish ช่วยให้กำหนดค่าเริ่มต้นได้อย่างเป็นระเบียบเฉพาะเมื่อจำเป็น
const name = undefined;
console.log(name ?? "Guest"); // "Guest"ตัวดำเนินการ ??
ตัวดำเนินการเครื่องหมายคำถามคู่จะคืนค่าทางขวาเฉพาะเมื่อค่าทางซ้ายเป็น null หรือ undefined เท่านั้น
console.log(null ?? "fallback"); // "fallback"
console.log(undefined ?? "fallback"); // "fallback"
console.log("hi" ?? "fallback"); // "hi"เหตุใดจึงไม่ใช้ ||
ตัวดำเนินการ OR เชิงตรรกะ || จะใช้ค่าทดแทนกับค่าเท็จ ทุกชนิด ซึ่งรวมถึง 0, "" และ false จึงมักไม่ถูกต้องสำหรับข้อมูลจริง
console.log(0 || 10); // 10 (probably unwanted)
console.log(0 ?? 10); // 0 (keeps the real value)กรณีสตริงว่าง
เมื่อใช้ || สตริงว่างที่ตั้งใจใช้จะถูกแทนที่ แต่เมื่อใช้ ?? สตริงนั้นจะยังคงอยู่ เพราะ "" ไม่ใช่ค่าว่างชนิด null หรือ undefined
const note = "";
console.log(note || "none"); // "none"
console.log(note ?? "none"); // ""ค่า false ยังคงอยู่
ค่า false ที่มีอยู่จริงจะยังคงอยู่เมื่อใช้ ?? แต่จะถูกแทนที่เมื่อใช้ ||
const enabled = false;
console.log(enabled ?? true); // false
console.log(enabled || true); // trueการอ่านการตั้งค่าอย่างปลอดภัย
?? เหมาะอย่างยิ่งสำหรับการตั้งค่าที่ 0 หรือค่าว่างเป็นตัวเลือกที่ถูกต้องและผู้ใช้อาจตั้งใจเลือก
function getVolume(settings) {
return settings.volume ?? 50;
}
console.log(getVolume({ volume: 0 })); // 0ใช้กับตัวแปรได้
ตัวดำเนินการนี้ใช้กับนิพจน์ใดก็ได้ และจะคืนค่าอาร์กิวเมนต์แรกที่ไม่ใช่ค่าว่างชนิด null หรือ undefined
let cached = null;
const value = cached ?? computeValue();
function computeValue() { return 99; }
console.log(value); // 99การประเมินแบบลัดวงจร
เช่นเดียวกับ || และ && ตัวดำเนินการ ?? จะประเมินแบบลัดวงจร หากค่าทางซ้ายไม่ใช่ค่าว่างชนิด null หรือ undefined ค่าทางขวาจะไม่ถูกประเมิน
function side() { console.log("called"); return 1; }
const x = "ready" ?? side(); // side() never runs
console.log(x);ไม่สามารถใช้ร่วมกับ && หรือ || ได้โดยตรง
การใช้ ?? ร่วมกับ && หรือ || โดยไม่มีวงเล็บจะทำให้เกิดข้อผิดพลาดทางไวยากรณ์ เพื่อป้องกันความกำกวม
const a = true, b = null;
// const c = a || b ?? 1; // SyntaxError
const c = (a || b) ?? 1;
console.log(c);พารามิเตอร์ค่าเริ่มต้นของฟังก์ชันเทียบกับ ??
พารามิเตอร์ค่าเริ่มต้นจะทำงานเมื่ออาร์กิวเมนต์เป็น undefined เท่านั้น ส่วน ?? รองรับกรณีที่ส่ง null มาอย่างชัดเจนด้วย
function greet(name = "Guest") { return "Hi " + name; }
console.log(greet(null)); // "Hi null"
function greet2(name) { return "Hi " + (name ?? "Guest"); }
console.log(greet2(null)); // "Hi Guest"ควรเลือกใช้ตัวใด
ใช้ ?? เมื่อ 0, "" หรือ false เป็นค่าที่ถูกต้องและคุณต้องการเก็บไว้ ใช้ || เฉพาะเมื่อค่าที่เป็นเท็จทุกชนิดควรเปลี่ยนเป็นค่าทดแทน
const retries = 0;
console.log(retries ?? 3); // 0 keptตรวจสอบอย่างรวดเร็ว
เปรียบเทียบตัวดำเนินการเหล่านี้
ทบทวน
ตัวดำเนินการ ?? จะคืนค่าทางขวาเฉพาะเมื่อค่าทางซ้ายเป็น null หรือ undefined จึงรักษาค่า 0, "" และ false ไว้ได้ ทำให้ปลอดภัยกว่า || เมื่อต้องกำหนดค่าเริ่มต้นให้ข้อมูลจริง ตัวดำเนินการนี้ประเมินแบบลัดวงจร และไม่สามารถใช้ร่วมกับ &&/|| โดยไม่มีวงเล็บได้
คำถามที่พบบ่อย
บทเรียน “การรวมค่า nullish ด้วย ??” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การรวมค่า nullish ด้วย ??” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การรวมค่า nullish ด้วย ??”
กำหนดค่าเริ่มต้นเฉพาะเมื่อเป็น null หรือ undefined คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การรวมค่า nullish ด้วย ??” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การต่อเชนแบบเลือกได้ด้วยตัวดำเนินการ ?.
- การรวมค่า nullish ด้วย ??
- การใช้ ?. และ ?? ร่วมกัน
- การเรียกและเข้าถึงดัชนีแบบเลือกได้