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

การเขียนโปรแกรมเชิงป้องกันและการตรวจสอบอินพุต

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

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

รู้จักการตรวจสอบเชิงป้องกัน

เป้าหมาย: หยุดข้อมูลเข้าที่ไม่ถูกต้องตั้งแต่เนิ่น ๆ เพื่อไม่ให้ข้อบกพร่องแพร่กระจาย

  • การตรวจสอบชนิดและช่วงค่า
  • เงื่อนไขป้องกัน
  • การแยกวิเคราะห์อย่างปลอดภัย
  • ค่าเริ่มต้นและการตรวจสอบวัตถุอย่างง่าย
การเขียนโปรแกรมเชิงป้องกันและการตรวจสอบอินพุต — ภาพประกอบ 1

ตัวช่วยตรวจสอบชนิด

สร้างตัวช่วยขนาดเล็กเพื่อใช้การตรวจสอบซ้ำ เช่น ตัวเลขและสตริงที่ไม่ว่าง

// Tiny type helpers
function isNumber(n) {
  return typeof n === "number" && Number.isFinite(n);
}

function isNonEmptyString(s) {
  return typeof s === "string" && s.trim().length > 0;
}

console.log("isNumber(3):", isNumber(3));
console.log("isNumber(NaN):", isNumber(NaN));
console.log("isNonEmptyString(\"\"):", isNonEmptyString(""));
console.log("isNonEmptyString(\"hi\"):", isNonEmptyString("hi"));
การเขียนโปรแกรมเชิงป้องกันและการตรวจสอบอินพุต — ภาพประกอบ 2

ตัวอย่างเงื่อนไขป้องกัน

ตรวจสอบข้อมูลเข้าก่อน และหยุดทันทีเมื่อเกิดข้อผิดพลาด เพื่อให้เส้นทางการทำงานหลักยังคงอ่านง่าย

// Guard clauses: return early if invalid
function buy(quantity) {
  if (!isNumber(quantity)) {
    console.log("Quantity must be a number");
    return;
  }
  if (quantity <= 0) {
    console.log("Quantity must be > 0");
    return;
  }
  console.log("Buying", quantity, "items");
}

buy(3);
buy("3");
buy(0);
การเขียนโปรแกรมเชิงป้องกันและการตรวจสอบอินพุต — ภาพประกอบ 3

การแยกวิเคราะห์พร้อมค่าทดแทน

ตรวจสอบผลลัพธ์ที่แยกวิเคราะห์แล้ว หากการแยกวิเคราะห์ล้มเหลว ให้คืนค่าทดแทนขนาดเล็กแทนการทำงานล้มเหลว

// Parse safely and use sensible defaults
function toInt(str, fallback = 0) {
  const n = parseInt(str, 10);
  if (!Number.isFinite(n)) {
    return fallback;
  }
  return n;
}

console.log("toInt(\"42\"):", toInt("42"));
console.log("toInt(\"7px\", -1):", toInt("7px", -1));
console.log("toInt(\"abc\", 0):", toInt("abc", 0));
การเขียนโปรแกรมเชิงป้องกันและการตรวจสอบอินพุต — ภาพประกอบ 4

ค่าเริ่มต้นและช่วงค่า

ใช้ ?? สำหรับค่าเริ่มต้นเมื่อเป็นค่าว่างหรือไม่มีการกำหนดค่า จากนั้นจำกัดค่าให้อยู่ในช่วงที่ปลอดภัย

// Defaults with ?? and simple range checks
function clampPercent(value) {
  // Use 0 as default when value is null or undefined
  const v = (value ?? 0);

  if (!isNumber(v)) {
    return 0;
  }
  // Clamp into 0..100
  const clamped = Math.min(100, Math.max(0, v));
  return clamped;
}

console.log(clampPercent(undefined));
console.log(clampPercent(120));
console.log(clampPercent(-5));
console.log(clampPercent(55));
การเขียนโปรแกรมเชิงป้องกันและการตรวจสอบอินพุต — ภาพประกอบ 5

การตรวจสอบโครงสร้างวัตถุ

ตรวจสอบฟิลด์ที่จำเป็นและช่วงค่าอย่างง่าย แล้วคืนวัตถุผลลัพธ์ขนาดเล็ก เช่น { สำเร็จ, เหตุผล }

// Simple object validation
function validateUser(u) {
  if (u == null || typeof u !== "object") {
    return { ok: false, reason: "User must be an object" };
  }
  if (!isNonEmptyString(u.name)) {
    return { ok: false, reason: "name required" };
  }
  if (!isNumber(u.age) || u.age < 0) {
    return { ok: false, reason: "age must be a number >= 0" };
  }
  return { ok: true };
}

console.log("good:", validateUser({ name: "Ayla", age: 21 }));
console.log("bad:", validateUser({ name: "", age: -1 }));
การเขียนโปรแกรมเชิงป้องกันและการตรวจสอบอินพุต — ภาพประกอบ 6

แบบทดสอบการตรวจสอบเชิงป้องกัน

ตรวจสอบอย่างรวดเร็ว: การจัดการข้อมูลเข้าเชิงป้องกัน

การเขียนโปรแกรมเชิงป้องกันและการตรวจสอบอินพุต — ภาพประกอบ 7

ทบทวน

ทบทวน: ใช้ตัวช่วยตรวจสอบชนิดขนาดเล็ก เงื่อนไขป้องกัน การแยกวิเคราะห์อย่างปลอดภัยพร้อมค่าทดแทน ค่าเริ่มต้นสำหรับค่าว่าง การจำกัดช่วงค่า และการตรวจสอบวัตถุอย่างง่าย เพื่อหยุดข้อบกพร่องตั้งแต่เนิ่น ๆ

การเขียนโปรแกรมเชิงป้องกันและการตรวจสอบอินพุต — ภาพประกอบ 8

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

บทเรียน “การเขียนโปรแกรมเชิงป้องกันและการตรวจสอบอินพุต” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การเขียนโปรแกรมเชิงป้องกันและการตรวจสอบอินพุต”

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

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

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

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

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

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

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

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

  1. try/catch/finally, throw และข้อผิดพลาดแบบกำหนดเอง
  2. การเขียนโปรแกรมเชิงป้องกันและการตรวจสอบอินพุต
← กลับไปที่ JavaScript Academy