ข้อผิดพลาดของ JavaScript ลอง Catch Throw

สารบัญ

    แสดงสารบัญ

โยน และ ลอง...จับ...ในที่สุด

คำสั่ง try กำหนดบล็อคโค้ดที่จะรัน (ลอง)

คำสั่ง catch กำหนดบล็อกโค้ดเพื่อจัดการกับข้อผิดพลาดใดๆ

คำสั่ง finally กำหนดบล็อคโค้ดที่จะรันโดยไม่คำนึงถึงผลลัพธ์

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

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

เมื่อรันโค้ด JavaScript อาจเกิดข้อผิดพลาดที่แตกต่างกันได้ เกิดขึ้น.

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

ตัวอย่าง

ในตัวอย่างนี้ เราสะกดผิด "alert" เป็น "adddlert" เพื่อจงใจสร้างข้อผิดพลาด:

<p id="demo"></p>
<script>
try {
  adddlert("Welcome guest!");
}
catch(err) {
  
document.getElementById("demo").innerHTML = err.message;
}
</script>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Error Handling</h2>

<p>How to use <b>catch</b> to display an error.</p>

<p id="demo"></p>

<script>
try {
  adddlert("Welcome guest!");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
}
</script>

</body>
</html>

JavaScript จับ adddlert ว่าเป็นข้อผิดพลาด และดำเนินการ จับรหัสไปที่ จัดการกับมัน.

try ... catch

คำสั่ง try ช่วยให้คุณสามารถกำหนดบล็อกของโค้ดให้เป็นได้ ทดสอบข้อผิดพลาดในขณะที่กำลังดำเนินการ

คำสั่ง catch ช่วยให้คุณสามารถกำหนดบล็อกของโค้ดได้ จะถูกดำเนินการหากมีข้อผิดพลาดเกิดขึ้นในบล็อกลอง

คำสั่ง JavaScript ลอง และ catch มาเป็นคู่:

try {
    Block of code to try
}
catch(err) {
    Block of code to handle errors
}

JavaScript ส่งข้อผิดพลาด

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

คำศัพท์ทางเทคนิคสำหรับสิ่งนี้คือ: JavaScript จะ โยนไฟล์ ข้อยกเว้น (เกิดข้อผิดพลาด)

JavaScript จะสร้าง วัตถุข้อผิดพลาด ที่มีคุณสมบัติสองประการ: ชื่อ และ ข้อความ

คำสั่ง throw

คำสั่ง throw ช่วยให้คุณสามารถสร้างข้อผิดพลาดที่กำหนดเองได้

ในทางเทคนิคแล้ว คุณสามารถ โยนข้อยกเว้น (โยนข้อผิดพลาด) ได้

ข้อยกเว้นอาจเป็น String ของ JavaScript, Number, บูลีนหรือ Object:

throw "Too big";    // throw a text
throw 500;          // throw a number

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

ตัวอย่างการตรวจสอบอินพุต

ตัวอย่างนี้จะตรวจสอบอินพุต หากค่าไม่ถูกต้อง มีข้อผิดพลาด (ผิดพลาด) เกิดขึ้น

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

<!DOCTYPE html>
<html>
<body>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" 
onclick="myFunction()">Test Input</button>
<p id="p01"></p>

<script>
function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  
try { 
    if(x.trim() == "") throw "empty";
      
 if(isNaN(x)) throw "not a number";
    
 x = Number(x);
    if(x < 5) throw 
 "too low";
    if(x > 10) throw "too high";
  }
  catch(err) {
    message.innerHTML = "Input is " + err;
  }
}
</script>
</body>
</html>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript try catch</h2>

<p>Please input a number between 5 and 10:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="p01"></p>

<script>
function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  try { 
    if(x.trim() == "")  throw "empty";
    if(isNaN(x)) throw "not a number";
    x = Number(x);
    if(x < 5)  throw "too low";
    if(x > 10)   throw "too high";
  }
  catch(err) {
    message.innerHTML = "Input is " + err;
  }
}
</script>

</body>
</html>

การตรวจสอบ HTML

โค้ดด้านบนเป็นเพียงตัวอย่างเท่านั้น

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

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

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

คำสั่ง สุดท้าย

คำสั่ง finally ช่วยให้คุณสามารถรันโค้ดได้หลังจากลองแล้ว จับโดยไม่คำนึงถึงผลลัพธ์:

ไวยากรณ์

try {
    Block of code to try
}
catch(err) {
    Block of code to handle errors
}
finally {
  Block of code to be executed regardless of the try / catch result
}

ตัวอย่าง

function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  
try { 
    
if(x.trim() == "") throw "is empty";
    if(isNaN(x)) 
throw "is not a number";
    
    x = Number(x);
    if(x > 
10) throw "is too high";
    if(x < 5) throw "is too low";
  }
  catch(err) 
{
    message.innerHTML = "Error: " + 
err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
    }
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript try catch</h2>

<p>Please input a number between 5 and 10:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>

<p id="p01"></p>

<script>
function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  try { 
    if(x.trim() == "")  throw "is empty";
    if(isNaN(x)) throw "is not a number";
    x = Number(x);
    if(x > 10)   throw "is too high";
    if(x < 5)  throw "is too low";
  }
  catch(err) {
    message.innerHTML = "Input " + err;
  }
  finally {
    document.getElementById("demo").value = "";
  }
}
</script>

</body>
</html>

วัตถุข้อผิดพลาด

JavaScript มีวัตถุข้อผิดพลาดในตัวที่ให้ข้อมูลข้อผิดพลาดเมื่อใด มีข้อผิดพลาดเกิดขึ้น

วัตถุข้อผิดพลาดมีคุณสมบัติที่เป็นประโยชน์สองประการ: ชื่อและข้อความ

คุณสมบัติวัตถุข้อผิดพลาด

name

ตั้งค่าหรือส่งคืนชื่อข้อผิดพลาด

message

ชุดหรือส่งคืนข้อความแสดงข้อผิดพลาด (สตริง)

ค่าชื่อข้อผิดพลาด

ค่าที่แตกต่างกันหกค่าสามารถส่งคืนได้โดยคุณสมบัติชื่อข้อผิดพลาด:

EvalError

เกิดข้อผิดพลาดในฟังก์ชัน eval()

RangeError

มีเหตุการณ์ "อยู่นอกระยะ" จำนวนหนึ่งเกิดขึ้น

ReferenceError

มีการอ้างอิงที่ผิดกฎหมายเกิดขึ้น

SyntaxError

เกิดข้อผิดพลาดทางไวยากรณ์

TypeError

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

URIError

เกิดข้อผิดพลาดใน encodeURI()

ค่าที่แตกต่างกันหกค่ามีอธิบายไว้ด้านล่าง

ข้อผิดพลาดในการประเมิน

EvalError บ่งชี้ถึงข้อผิดพลาดในฟังก์ชัน eval()

JavaScript เวอร์ชันใหม่กว่าไม่ทิ้ง EvalError ใช้ SyntaxError แทน

ข้อผิดพลาดช่วง

RangeError ถูกส่งออกไปหากคุณใช้ตัวเลขที่อยู่ภายนอก ช่วงของค่านิยมทางกฎหมาย

ตัวอย่างเช่น: คุณไม่สามารถกำหนดจำนวนหลักสำคัญของตัวเลขได้ 500.

ตัวอย่าง

let num = 1;
try {
    num.toPrecision(500);   // A number cannot have 500 significant digits
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot set the number of significant digits of a number to 500:</p>

<p id="demo">

<script>
let num = 1;
try {
  num.toPrecision(500);
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

ข้อผิดพลาดในการอ้างอิง

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

ตัวอย่าง

let x = 5;
try {
  x = y + 1;   // y cannot be used (referenced)
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot use the value of a non-existing variable:</p>

<p id="demo"></p>

<script>
let x = 5;
try {
  x = y + 1;
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

ข้อผิดพลาดทางไวยากรณ์

SyntaxError ถูกส่งออกไปหากคุณพยายามประเมินโค้ดด้วย ข้อผิดพลาดทางไวยากรณ์

ตัวอย่าง

try {
  eval("alert('Hello)");   // Missing ' will produce an error
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot evaluate code that contains a syntax error:</p>

<p id="demo"></p>

<script>
try {
  eval("alert('Hello)");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

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

TypeError ถูกส่งออกไปหากคุณใช้ค่าที่อยู่นอก ประเภทที่คาดหวัง:

ตัวอย่าง

let num = 1;
try {
  num.toUpperCase();   // You cannot convert a number to upper case
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>You cannot convert a number to upper case:</p>

<p id="demo"></p>

<script>
let num = 1;
try {
  num.toUpperCase();
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

ข้อผิดพลาด URI (ตัวระบุทรัพยากรที่เหมือนกัน)

URIError ถูกส่งออกไปหากคุณใช้อักขระที่ไม่ถูกต้องในฟังก์ชัน URI:

ตัวอย่าง

try {
    decodeURI("%%%");   // You cannot URI decode percent signs
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Errors</h2>

<p>Some characters cannot be decoded with decodeURI():</p>

<p id="demo"></p>

<script>
try {
  decodeURI("%%%");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
</script>

</body>
</html>

คุณสมบัติอ็อบเจ็กต์ข้อผิดพลาดที่ไม่ได้มาตรฐาน

Mozilla และ Microsoft กำหนดคุณสมบัติอ็อบเจ็กต์ข้อผิดพลาดที่ไม่เป็นมาตรฐาน:

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

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

การอ้างอิงข้อผิดพลาดที่สมบูรณ์

สำหรับการอ้างอิงที่สมบูรณ์ของออบเจ็กต์ Error ให้ไปที่ Complete ของเรา การอ้างอิงข้อผิดพลาดของ JavaScript