Lỗi JavaScript
Ném và thử...Bắt...Cuối cùng
Câu lệnh try
xác định một khối mã để chạy (để thử).
Câu lệnh catch
xác định một khối mã để xử lý bất kỳ lỗi nào.
Câu lệnh finally
xác định một khối mã sẽ chạy bất kể kết quả như thế nào.
Câu lệnh throw
xác định một lỗi tùy chỉnh.
Lỗi sẽ xảy ra!
Khi thực thi mã JavaScript, các lỗi khác nhau có thể xảy ra.
Lỗi có thể là lỗi mã hóa do người lập trình thực hiện, lỗi do nhập sai và những lỗi không thể lường trước khác.
Ví dụ
Trong ví dụ này, chúng tôi viết sai chính tả "alert" thành "adddlert" để cố tình tạo ra lỗi:
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
Hãy tự mình thử »JavaScript phát hiện adddlert là lỗi và thực thi mã bắt để xử lý lỗi đó.
JavaScript thử và bắt
Câu lệnh try
cho phép bạn xác định một khối mã để kiểm tra lỗi trong khi nó đang được thực thi.
Câu lệnh catch
cho phép bạn xác định khối mã sẽ được thực thi nếu xảy ra lỗi trong khối thử.
Các câu lệnh JavaScript try
và catch
đi theo cặp:
try {
Block of code to try
}
catch( err ) {
Block of code to handle errors
}
Lỗi ném JavaScript
Khi xảy ra lỗi, JavaScript thường sẽ dừng và tạo thông báo lỗi.
Thuật ngữ kỹ thuật cho việc này là: JavaScript sẽ đưa ra một ngoại lệ (ném ra lỗi) .
Trên thực tế, JavaScript sẽ tạo một đối tượng Error với hai thuộc tính: name và message .
Tuyên bố ném
Câu lệnh throw
cho phép bạn tạo một lỗi tùy chỉnh.
Về mặt kỹ thuật, bạn có thể đưa ra một ngoại lệ (ném lỗi) .
Ngoại lệ có thể là String
JavaScript, Number
, Boolean
hoặc Object
:
throw "Too big"; // throw a text
throw 500; // throw a number
Nếu bạn sử dụng throw
cùng với try
và catch
, bạn có thể kiểm soát luồng chương trình và tạo thông báo lỗi tùy chỉnh.
Ví dụ xác thực đầu vào
Ví dụ này kiểm tra đầu vào. Nếu giá trị sai, một ngoại lệ (err) sẽ được đưa ra.
Ngoại lệ (err) bị phát hiện bởi câu lệnh bắt và thông báo lỗi tùy chỉnh được hiển thị:
<!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>
Hãy tự mình thử »Xác thực HTML
Đoạn mã trên chỉ là một ví dụ.
Các trình duyệt hiện đại thường sẽ sử dụng kết hợp JavaScript và xác thực HTML tích hợp, sử dụng các quy tắc xác thực được xác định trước được xác định trong thuộc tính HTML:
<input id="demo" type="number" min="5" max="10" step="1">
Bạn có thể đọc thêm về xác thực biểu mẫu trong chương sau của hướng dẫn này.
Tuyên bố cuối cùng
Câu lệnh finally
cho phép bạn thực thi mã sau khi thử và bắt, bất kể kết quả:
Cú pháp
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
}
Ví dụ
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 = "";
}
}
Hãy tự mình thử »Đối tượng lỗi
JavaScript có một đối tượng lỗi tích hợp cung cấp thông tin lỗi khi xảy ra lỗi.
Đối tượng lỗi cung cấp hai thuộc tính hữu ích: tên và thông báo.
Thuộc tính đối tượng lỗi
Tài sản | Sự miêu tả |
---|---|
tên | Đặt hoặc trả về tên lỗi |
tin nhắn | Đặt hoặc trả về thông báo lỗi (một chuỗi) |
Giá trị tên lỗi
Thuộc tính tên lỗi có thể trả về sáu giá trị khác nhau:
Tên lỗi | Sự miêu tả |
---|---|
Đánh giáLỗi | Đã xảy ra lỗi trong hàm eval() |
Phạm viLỗi | Đã xảy ra một số "ngoài phạm vi" |
Lỗi tham chiếu | Một tham chiếu bất hợp pháp đã xảy ra |
Lỗi cú pháp | Đã xảy ra lỗi cú pháp |
LoạiLỗi | Đã xảy ra lỗi loại |
Lỗi URI | Đã xảy ra lỗi trong mã hóaURI() |
Sáu giá trị khác nhau được mô tả dưới đây.
Đánh giá lỗi
EvalError
cho biết có lỗi trong hàm eval().
Các phiên bản JavaScript mới hơn không đưa ra EvalError. Thay vào đó hãy sử dụng SyntaxError.
Lỗi phạm vi
RangeError
sẽ được ném ra nếu bạn sử dụng một số nằm ngoài phạm vi giá trị hợp pháp.
Ví dụ: Bạn không thể đặt số chữ số có nghĩa của một số thành 500.
Ví dụ
let num = 1;
try {
num.toPrecision(500); // A number cannot have 500
significant digits
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Hãy tự mình thử »Lỗi tham chiếu
ReferenceError
sẽ được ném ra nếu bạn sử dụng (tham chiếu) một biến chưa được khai báo:
Ví dụ
let x = 5;
try {
x = y + 1; // y cannot be used (referenced)
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Hãy tự mình thử »Lỗi cú pháp
SyntaxError
sẽ được đưa ra nếu bạn cố đánh giá mã có lỗi cú pháp.
Ví dụ
try {
eval("alert('Hello)"); //
Missing ' will produce an error
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Hãy tự mình thử »Lỗi gõ
TypeError
được ném ra nếu toán hạng hoặc đối số không tương thích với loại mà toán tử hoặc hàm mong đợi.
Ví dụ
let num = 1;
try {
num.toUpperCase(); // You cannot convert a number
to upper case
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Hãy tự mình thử »Lỗi URI (Mã định danh tài nguyên đồng nhất)
URIError
sẽ bị ném ra nếu bạn sử dụng các ký tự không hợp lệ trong hàm URI:
Ví dụ
try {
decodeURI("%%%"); // You cannot URI decode
percent signs
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Hãy tự mình thử »Thuộc tính đối tượng lỗi không chuẩn
Mozilla và Microsoft xác định một số thuộc tính đối tượng lỗi không chuẩn:
Tên tệp (Mozilla)
số dòng (Mozilla)
cộtSố (Mozilla)
ngăn xếp (Mozilla)
mô tả (Microsoft)
số (Microsoft)
Không sử dụng các thuộc tính này trong các trang web công cộng. Chúng sẽ không hoạt động trong tất cả các trình duyệt.
Tham chiếu lỗi hoàn chỉnh
Để có tài liệu tham khảo đầy đủ về đối tượng Lỗi, hãy truy cập Tài liệu tham khảo lỗi JavaScript hoàn chỉnh của chúng tôi.