JavaScript Errors
โยนแล้วลอง...จับ...ในที่สุด
คำtry
สั่งกำหนดบล็อคโค้ดที่จะรัน (เพื่อลอง)
คำcatch
สั่งกำหนดบล็อคโค้ดเพื่อจัดการกับข้อผิดพลาดใดๆ
คำfinally
สั่งกำหนดบล็อคโค้ดที่จะรันโดยไม่คำนึงถึงผลลัพธ์
คำthrow
สั่งกำหนดข้อผิดพลาดที่กำหนดเอง
ข้อผิดพลาดจะเกิดขึ้น!
เมื่อรันโค้ด JavaScript อาจเกิดข้อผิดพลาดต่างๆ ขึ้นได้
ข้อผิดพลาดอาจเป็นข้อผิดพลาดในการเขียนโปรแกรมโดยโปรแกรมเมอร์ ข้อผิดพลาดเนื่องจากการป้อนข้อมูลที่ไม่ถูกต้อง และสิ่งอื่น ๆ ที่คาดไม่ถึง
ตัวอย่าง
ในตัวอย่างนี้ เราสะกดคำว่า "alert" เป็น "addlert" เพื่อสร้างข้อผิดพลาดโดยเจตนา:
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
JavaScript จับadddlertเป็นข้อผิดพลาด และรันโค้ด catch เพื่อจัดการกับมัน
JavaScript ลองและจับ
คำtry
สั่งอนุญาตให้คุณกำหนดกลุ่มของรหัสที่จะทดสอบหาข้อผิดพลาดในขณะที่กำลังดำเนินการ
คำcatch
สั่งนี้อนุญาตให้คุณกำหนดกลุ่มของรหัสที่จะดำเนินการ หากเกิดข้อผิดพลาดในบล็อกการลอง
คำสั่ง JavaScript try
และcatch
มาเป็นคู่:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
JavaScript แสดงข้อผิดพลาด
เมื่อเกิดข้อผิดพลาด โดยปกติ JavaScript จะหยุดและสร้างข้อความแสดงข้อผิดพลาด
ศัพท์เทคนิคสำหรับสิ่งนี้คือ: JavaScript จะส่งข้อยกเว้น (throw an error )
JavaScript จะสร้างอ็อบเจ็กต์ Errorโดยมีคุณสมบัติสองประการ : ชื่อและข้อความ
คำสั่งโยน
คำthrow
สั่งช่วยให้คุณสร้างข้อผิดพลาดที่กำหนดเองได้
ใน ทางเทคนิคคุณสามารถโยนข้อยกเว้น (โยนข้อผิดพลาด )
ข้อยกเว้นอาจเป็น JavaScript String
, a Number
, a Boolean
หรือObject
:
throw "Too big"; // throw a text
throw 500; // throw a number
หากคุณใช้throw
ร่วมกับtry
และ
catch
คุณสามารถควบคุมการไหลของโปรแกรมและสร้างข้อความแสดงข้อผิดพลาดที่กำหนดเองได้
ตัวอย่างการตรวจสอบอินพุต
ตัวอย่างนี้ตรวจสอบอินพุต หากค่าไม่ถูกต้อง ข้อยกเว้น (err) จะถูกส่งออกไป
ข้อยกเว้น (ข้อผิดพลาด) ถูกจับโดยคำสั่ง 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 == "") 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 == "") 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 = "";
}
}
วัตถุผิดพลาด
JavaScript มีอ็อบเจ็กต์ข้อผิดพลาดในตัวที่ให้ข้อมูลข้อผิดพลาดเมื่อเกิดข้อผิดพลาด
ออบเจ็กต์ข้อผิดพลาดมีคุณสมบัติที่มีประโยชน์สองประการ: ชื่อและข้อความ
ข้อผิดพลาดคุณสมบัติของอ็อบเจ็กต์
คุณสมบัติ | คำอธิบาย |
---|---|
ชื่อ | ตั้งค่าหรือส่งคืนชื่อข้อผิดพลาด |
ข้อความ | ตั้งค่าหรือส่งคืนข้อความแสดงข้อผิดพลาด (สตริง) |
ชื่อผิดพลาด ค่า
ค่าที่ต่างกันหกค่าสามารถส่งคืนได้ด้วยคุณสมบัติชื่อข้อผิดพลาด:
ชื่อข้อผิดพลาด | คำอธิบาย |
---|---|
EvalError | เกิดข้อผิดพลาดในฟังก์ชัน eval() |
RangeError | เกิดเลข "นอกช่วง" ขึ้น |
อ้างอิงข้อผิดพลาด | มีการอ้างอิงที่ผิดกฎหมายเกิดขึ้น |
ข้อผิดพลาดทางไวยากรณ์ | เกิดข้อผิดพลาดทางไวยากรณ์ |
ประเภทข้อผิดพลาด | เกิดข้อผิดพลาดประเภท |
URIError | เกิดข้อผิดพลาดใน encodeURI() ขึ้น |
ค่าต่างๆ หกค่าได้อธิบายไว้ด้านล่าง
ข้อผิดพลาดของการประเมิน
An EvalError
บ่งชี้ข้อผิดพลาดในฟังก์ชัน eval()
JavaScript เวอร์ชันใหม่กว่าไม่ส่ง EvalError ใช้ SyntaxError แทน
ข้อผิดพลาดของช่วง
A RangeError
จะถูกส่งออกไปหากคุณใช้ตัวเลขที่อยู่นอกช่วงของค่าทางกฎหมาย
ตัวอย่างเช่น คุณไม่สามารถกำหนดจำนวนหลักสำคัญของตัวเลขเป็น 500
ตัวอย่าง
let num = 1;
try {
num.toPrecision(500); // A number cannot have 500
significant digits
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
อ้างอิงผิดพลาด
A ReferenceError
ถูกส่งออกไปหากคุณใช้ (ข้อมูลอ้างอิง) ตัวแปรที่ยังไม่ได้ประกาศ:
ตัวอย่าง
let x = 5;
try {
x = y + 1; // y cannot be used (referenced)
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
ข้อผิดพลาดทางไวยากรณ์
A SyntaxError
ถูกส่งออกไปหากคุณพยายามประเมินโค้ดที่มีข้อผิดพลาดทางไวยากรณ์
ตัวอย่าง
try {
eval("alert('Hello)"); //
Missing ' will produce an error
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
พิมพ์ผิดพลาด
A TypeError
จะถูกส่งออกไปหากคุณใช้ค่าที่อยู่นอกช่วงของประเภทที่คาดไว้:
ตัวอย่าง
let num = 1;
try {
num.toUpperCase(); // You cannot convert a number
to upper case
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
ข้อผิดพลาด URI (Uniform Resource Identifier)
A URIError
ถูกส่งออกไปหากคุณใช้อักขระที่ไม่ถูกต้องในฟังก์ชัน URI:
ตัวอย่าง
try {
decodeURI("%%%"); // You cannot URI decode
percent signs
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
คุณสมบัติอ็อบเจ็กต์ข้อผิดพลาดที่ไม่ได้มาตรฐาน
Mozilla และ Microsoft กำหนดคุณสมบัติวัตถุข้อผิดพลาดที่ไม่ได้มาตรฐานบางอย่าง:
ชื่อ ไฟล์ (Mozilla)
บรรทัดหมายเลข (Mozilla) หมายเลขคอลัมน์ (Mozilla) หมายเลข
คำอธิบาย (
Mozilla)
กองซ้อน (Mozilla) (Microsoft)
(Microsoft)
ห้ามใช้คุณสมบัติเหล่านี้ในเว็บไซต์สาธารณะ พวกเขาจะไม่ทำงานในทุกเบราว์เซอร์
อ้างอิงข้อผิดพลาดที่สมบูรณ์
สำหรับการอ้างอิงที่สมบูรณ์ของอ็อบเจ็กต์ Error ไปที่Complete JavaScript Error Referenceของเรา