JavaScript ข้อผิดพลาด - Throw และ Try to Catch

try คำสั่งทำให้คุณสามารถทดสอบข้อผิดพลาดในบล็อครหัส

catch คำสั่งอนุญาตให้คุณจัดการข้อผิดพลาด

throw คำสั่งที่อนุญาตให้สร้างข้อผิดพลาดที่กำหนดเอง

finally ทำให้คุณสามารถปฏิบัติการรหัส หลังจาก try และ catch ไม่ว่าผลลัพธ์จะเป็นอะไร

ข้อผิดพลาดจะเกิดขึ้นตลอดเวลา!

ข้อผิดพลาดจะเกิดขึ้นเมื่อปฏิบัติการรหัส JavaScript

ข้อผิดพลาดอาจเป็นข้อผิดพลาดในการเขียนรหัสโดยผู้แปลงรหัส ข้อผิดพลาดจากการใส่ข้อมูลที่ผิด หรือด้วยปัญหาที่ไม่รายละเอียดที่สามารถคาดการณ์ได้

ตัวอย่าง

ในตัวอย่างนี้ เราผ่าน alert เขียนรหัสเตือนเพื่อสร้างข้อผิดพลาดโดยได้ตั้งใจ:

<p id="demo"></p>
<script>
try {
    alert("ยินดีต้อนรับ!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

ทดสอบด้วยตัวเอง

JavaScript จะจับเก็บ alert ให้เป็นข้อผิดพลาด และปฏิบัติการรหัสเพื่อจัดการข้อผิดพลาด

JavaScript try และ catch

try คำสั่งอนุญาตให้คุณกำหนดบล็อครหัสเพื่อตรวจสอบข้อผิดพลาดระหว่างการทำงาน

catch คำสั่งอนุญาตให้คุณกำหนดบล็อครหัสที่จะทำงาน หากมีข้อผิดพลาดในบล็อครหัส try

คำสั่ง JavaScript try และ catch ปรากฏขึ้นด้วยคู่:

try {
     บล็อครหัสที่ใช้สำหรับการทดสอบ
}
 catch(err) {
     บล็อครหัสที่จัดการข้อผิดพลาด
}

JavaScript ลอบทำให้เกิดข้อผิดพลาด

เมื่อเกิดข้อผิดพลาด JavaScript โดยทั่วไปจะหยุดงานและสร้างข้อความข้อผิดพลาด

คำว่านี้ถูกอธิบายเช่นนี้:JavaScript จะทิ้งข้อผิดพลาด (ทิ้งข้อผิดพลาด).

JavaScript จะสร้างข้อผิดพลาดที่มีสองคุณสมบัติ Error Object:name และ message.

คำสั่ง throw

throw คำสั่งที่อนุญาตให้สร้างข้อผิดพลาดที่กำหนดเอง

ทางทฤษฎีคุณสามารถทิ้งข้อผิดพลาด (ทิ้งข้อผิดพลาด).

ข้อผิดพลาดสามารถเป็น JavaScript ข้อความ、เลข、เรทรูปหรือตัวแปร:

throw "Too big";    // ทิ้งข้อความ
throw 500;          // ทิ้งเลข

ถ้าใช้ throw กับ try และ catch การใช้ร่วมกันนี้สามารถควบคุมกระแสการทำงานและสร้างข้อความข้อผิดพลาดที่กำหนดเองได้。

กรณีการตรวจสอบค่าที่ใส่

ตัวอย่างนี้จะตรวจสอบค่าที่ใส่。หากค่าที่ใส่ผิดพลาด จะทิ้งข้อผิดพลาด (err)。

ข้อผิดพลาด (err) นี้ถูกจับโดยคำสั่ง catch และแสดงข้อความข้อผิดพลาดที่กำหนดเอง:

<!DOCTYPE html>
<html>
<body>
<p>กรุณาใส่ตัวเลขที่อยู่ในขอบเขต 5 - 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">ทดสอบค่าที่ใส่</button>
<p id="message"></p>
<script>
function myFunction() {
    var ข้อความ, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "ว่าง";
         if(isNaN(x)) throw "ไม่ใช่ตัวเลข";
         x = Number(x);
        if(x < 5) throw  "เล็กเกินไป";
        if(x > 10) throw "ใหญ่เกินไป";
    }
    catch(err) {
        message.innerHTML = "ข้อความเข้าออกเป็น " + err;
    }
}
</script>
</body>
</html>

ทดสอบด้วยตัวเอง

การตรวจสอบ HTML

รหัสที่กำหนดข้างต้นเป็นตัวอย่างเพียงแค่นี้。

เบราว์เซอร์สมามาตรฐานจะทำงานร่วมกับ JavaScript และการตรวจสอบ HTML ภายในตัวเองโดยใช้กฎการตรวจสอบที่กำหนดมาก่อนในคุณสมบัติ HTML:

<input id="demo" type="number" min="5" max="10" step="1">

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

คำสั่ง finally

finally คำสั่งอนุญาตให้ทำงานหลังจาก try และ catch โดยไม่ว่าผลลัพธ์จะเป็นอะไร:

try {
     // รหัสที่ใช้ในการทดสอบ
}
 catch(err) {
     // รหัสที่จัดการข้อผิดพลาด
} 
finally {
     // รหัสที่ต้องทำงานเสมอๆ ไม่ว่าผลลัพธ์จะเป็นอะไร
}

ตัวอย่าง

function myFunction() {
    var ข้อความ, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "ว่าง";
        if(isNaN(x)) throw "ไม่ใช่ตัวเลข";
         x = Number(x);
        if(x >  10) throw "ใหญ่เกินไป";
        if(x <  5) throw "เล็กเกินไป";
    }
    catch(err) {
        message.innerHTML = "ข้อผิดพลาด：" + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

ทดสอบด้วยตัวเอง

Error Object

JavaScript มีตัวแปร error ภายในตัวที่มีความผิดพลาดที่มีข้อมูลข้อผิดพลาด

ตัวแปร error ให้ความเหมาะสมกับสองตัวแปรที่มีประโยชน์name และ message.

Error Object Properties

ตัวแปร รายละเอียด
name ตั้งค่าหรือกลับค่าชื่อข้อผิดพลาด
message ตั้งค่าหรือกลับค่าข้อความของข้อผิดพลาด (ข้อความเป็นตัวอักษร)

Error Name Values

ตัวแปร name ของ error สามารถกลับค่าหกค่าที่แตกต่างกัน

ชื่อข้อผิดพลาด รายละเอียด
EvalError ข้อผิดพลาดที่เกิดขึ้นในฟังก์ชัน eval()
RangeError เกิดข้อผิดพลาดที่ตัวเลขอยู่นอกขอบเขต
ReferenceError เกิดข้อผิดพลาดอ้างอิงผิด
SyntaxError เกิดข้อผิดพลาดศัพท์
TypeError เกิดข้อผิดพลาดประเภท
URIError ข้อผิดพลาดที่เกิดขึ้นใน encodeURI()

ใต้นี้จะเล่าถึงหกค่าที่แตกต่างกัน

ข้อผิดพลาด Eval

EvalError แสดงความผิดพลาดของฟังก์ชัน eval()

การปรับปรุงรุ่นใหม่ของ JavaScript จะไม่โยนออกอะไร EvalErrorโปรดใช้ SyntaxError แทนนี้

ข้อผิดพลาดขอบเขต

RangeError จะถูกโยนออกมาเมื่อคุณใช้ตัวเลขที่อยู่นอกขอบเขตค่าที่ถูกต้อง

ตัวอย่าง: คุณไม่สามารถตั้งค่าตัวเลขที่มีความเท็จจริงเป็น 500 ตัวได้

ตัวอย่าง

var num = 1;
try {
    num.toPrecision(500);   // ตัวเลขไม่สามารถมีตัวเลขที่มีความเท็จจริง 500 ตัว
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

ทดสอบด้วยตัวเอง

ข้อผิดพลาดอ้างอิง

ถ้าคุณใช้ (อ้างอิง) ตัวแปรที่ยังไม่ได้ประกาศ ReferenceError จะถูกโยนออกมา:

ตัวอย่าง

var x;
try {
    x = y + 1;   // y ไม่สามารถถูกอ้างอิง (ใช้งาน) ได้
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

ทดสอบด้วยตัวเอง

ข้อผิดพลาดศัพท์

ถ้าคุณคำนวณรหัสที่มีความผิดพลาดทางศัพท์ SyntaxError ที่ถูกโยนออกมา:

ตัวอย่าง

try {
    eval("alert('Hello)");   // ขาด ' จะทำให้เกิดข้อผิดพลาด
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

ทดสอบด้วยตัวเอง

ข้อผิดพลาดประเภท

ถ้าคุณใช้ค่าที่ไม่อยู่ในขอบเขตค่าที่คาดหวัง TypeError ที่ถูกโยนออกมา:

ตัวอย่าง

var num = 1;
try {
    num.toUpperCase();   // คุณไม่สามารถเปลี่ยนตัวเลขเป็นตัวใหญ่
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

ทดสอบด้วยตัวเอง

ข้อผิดพลาด URI

หากคุณใช้อักษรผิดในฟังก์ชัน URI กับ URIError ที่ถูกโยนออกมา:

ตัวอย่าง

try {
    decodeURI("%%%");   // คุณไม่สามารถเข้ารหัส URI ของสัญญาณเลขเป็นสัญญาณเลข
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

ทดสอบด้วยตัวเอง

คุณสมบัติของ error วัตถุที่ไม่มีมาตรฐาน

Mozilla และ Microsoft ได้มีการกำหนดคุณสมบัติของ error วัตถุที่ไม่มีมาตรฐาน

  • fileName (Mozilla)
  • lineNumber (Mozilla)
  • columnNumber (Mozilla)
  • stack (Mozilla)
  • description (Microsoft)
  • number (Microsoft)

อย่าใช้คุณสมบัติเหล่านี้ในเว็บไซต์สาธารณะ พวกมันจะไม่ทำงานในบราวเซอร์ทุกตัว