การใช้ ?. และ ?? ร่วมกัน
จับคู่การเข้าถึงอย่างปลอดภัยกับค่าเริ่มต้นที่เหมาะสม
การใช้ ?. และ ?? ร่วมกัน เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
ใช้เครื่องมือสองอย่างร่วมกัน
การเชื่อมโยงแบบเลือกใช้ ?. ช่วยอ่านค่าที่อาจไม่มีได้อย่างปลอดภัย ส่วนการรวมค่า nullish ?? ช่วยกำหนดค่าทดแทน เมื่อนำมารวมกันจึงสามารถอ่านข้อมูลเชิงลึกและใช้ค่าทดแทนได้อย่างเรียบร้อย
const user = {};
console.log(user.profile?.name ?? "Anonymous");รูปแบบที่ใช้บ่อย
สำนวน a?.b ?? fallback จะอ่านค่าอย่างปลอดภัยและใช้ค่าทดแทนหากผลลัพธ์เป็นค่าว่างชนิด null หรือ undefined วิธีนี้ช่วยแทนที่ชุดเงื่อนไขตรวจสอบที่ยืดยาว
const data = { settings: { theme: "dark" } };
const theme = data.settings?.theme ?? "light";
console.log(theme); // "dark"ใช้ค่าทดแทนเมื่อไม่มีค่า
หากส่วนใดส่วนหนึ่งของลำดับเป็นค่าว่างชนิด null หรือ undefined ?. จะให้ผลเป็น undefined จากนั้น ?? จะแทนค่าดังกล่าวด้วยค่าเริ่มต้น
const data = {};
const theme = data.settings?.theme ?? "light";
console.log(theme); // "light"โครงสร้างซ้อนลึก
รูปแบบนี้ขยายไปใช้กับโครงสร้างที่ซ้อนกันหลายชั้นได้ โดยยังคงมีค่าทดแทนเพียงจุดเดียวที่ส่วนท้าย
const res = { data: { user: { city: "Berlin" } } };
const city = res.data?.user?.city ?? "Unknown";
console.log(city); // "Berlin"คงค่าที่เป็นเท็จแต่ถูกต้องไว้
เนื่องจาก ?? จะกำหนดค่าเริ่มต้นเฉพาะเมื่อเป็นค่าว่างชนิด null หรือ undefined ค่า 0 จริงที่ได้จากลำดับจึงยังคงอยู่
const cart = { items: [], count: 0 };
const count = cart?.count ?? 5;
console.log(count); // 0เทียบกับกับดัก && / ||
การเขียน a && a.b || fallback จะแทนที่ค่า 0 หรือ "" ที่ถูกต้องโดยไม่ถูกต้อง ส่วนการใช้ ?. ร่วมกับ ?? จะหลีกเลี่ยงปัญหานี้
const cfg = { volume: 0 };
console.log(cfg && cfg.volume || 50); // 50, wrong
console.log(cfg?.volume ?? 50); // 0, correctใช้กับผลลัพธ์ของฟังก์ชัน
คุณสามารถกำหนดค่าเริ่มต้นให้ผลลัพธ์จากการเรียกแบบเลือกใช้ได้เช่นกัน โดยใช้ตัวดำเนินการทั้งสองล้อมการเรียกใช้เมธอด
const api = { fetchName: () => null };
const name = api.fetchName?.() ?? "default";
console.log(name); // "default"กำหนดค่าเริ่มต้นให้การเข้าถึงอาร์เรย์
รูปแบบนี้ใช้กับการเข้าถึงด้วยวงเล็บเหลี่ยมสำหรับอาร์เรย์หรือคีย์แบบไดนามิกได้
const state = { list: ["a"] };
const first = state.list?.[0] ?? "empty";
console.log(first); // "a"สร้างสตริงสำหรับแสดงผล
การใช้งานจริงอย่างหนึ่งคือการสร้างข้อความสำหรับแสดงผลอย่างปลอดภัยจากข้อมูลที่อาจไม่แน่นอน
function label(order) {
return "Total: " + (order?.total ?? 0);
}
console.log(label(undefined)); // "Total: 0"ข้อสังเกตเกี่ยวกับลำดับความสำคัญ
?. มีลำดับความสำคัญสูงกว่า ?? ดังนั้น a?.b ?? c จึงถูกอ่านเป็น (a?.b) ?? c ซึ่งตรงกับสิ่งที่คุณต้องการ
const u = { age: null };
console.log(u?.age ?? 18); // 18สำนวนที่กระชับ
เมื่อนำตัวดำเนินการเหล่านี้มาใช้ร่วมกัน จะช่วยแทนที่โค้ดป้องกันที่ยาวด้วยบรรทัดเดียวที่อ่านง่าย ทำให้เห็นเจตนาได้อย่างชัดเจน
const profile = null;
console.log(profile?.bio?.length ?? 0); // 0ตรวจสอบอย่างรวดเร็ว
คาดเดาผลลัพธ์
ทบทวน
สำนวน obj?.deep?.prop ?? fallback ช่วยอ่านค่าที่ซ้อนกันและอาจไม่มีได้ พร้อมกำหนดค่าทดแทนเฉพาะเมื่อผลลัพธ์เป็น null หรือ undefined เท่านั้น สำนวนนี้รักษาค่าที่เป็นเท็จแต่ถูกต้อง เช่น 0 และ "" ไว้ได้ ต่างจากวิธีใช้ &&/|| และเนื่องจาก ?. มีลำดับความสำคัญสูงกว่า ?? การจัดกลุ่มจึงถูกต้องตามธรรมชาติ
เรียนรู้ JavaScript ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 59
- บทเรียน
- 200
คำถามที่พบบ่อย
บทเรียน “การใช้ ?. และ ?? ร่วมกัน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การใช้ ?. และ ?? ร่วมกัน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การใช้ ?. และ ?? ร่วมกัน”
จับคู่การเข้าถึงอย่างปลอดภัยกับค่าเริ่มต้นที่เหมาะสม คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การใช้ ?. และ ?? ร่วมกัน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การต่อเชนแบบเลือกได้ด้วยตัวดำเนินการ ?.
- การรวมค่า nullish ด้วย ??
- การใช้ ?. และ ?? ร่วมกัน
- การเรียกและเข้าถึงดัชนีแบบเลือกได้