Lỗi JavaScript - Throw và Try to Catch
- Trang trước Priorität của toán tử JS
- Trang tiếp theo Phạm vi JS
try Câu lệnh cho phép bạn kiểm tra lỗi trong khối mã.
catch Câu lệnh cho phép bạn xử lý lỗi.
throw Câu lệnh cho phép bạn tạo lỗi tùy chỉnh.
finally Cho phép bạn thực thi mã, sau try và catch, bất kể kết quả thế nào.
Lỗi sẽ luôn xảy ra!
Khi thực thi mã JavaScript, có thể xảy ra nhiều loại lỗi.
Lỗi có thể là lỗi mã của nhà phát triển, lỗi do đầu vào không chính xác hoặc do các vấn đề không thể dự đoán.
Mẫu
Trong ví dụ này, chúng ta thông qua alert Viết mã cảnh báo để cố ý tạo ra lỗi:
<p id="demo"></p>
<script>
try {
alert("Chào mừng bạn đã truy cập!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
JavaScript sẽ bắt lỗi alert và thực thi mã để xử lý lỗi.
JavaScript try và catch
try Câu lệnh cho phép bạn định nghĩa một khối mã để kiểm tra lỗi khi thực thi.
catch Câu lệnh cho phép bạn định nghĩa một khối mã để thực thi, nếu có lỗi xảy ra trong khối mã try.
Câu lệnh JavaScript try và catch Xuất hiện theo cặp:
try {
Mã kiểm tra
}
catch(err) {
Mã xử lý lỗi
}
JavaScript ném lỗi
Khi xảy ra lỗi, JavaScript thường dừng lại và tạo ra thông báo lỗi.
Tên kỹ thuật được mô tả như sau:JavaScript sẽ ném lỗi (ném lỗi).
JavaScript thực sự sẽ tạo ra một đối tượng có hai thuộc tính Đối tượng Error:name và message.
Câu lệnh throw
throw Câu lệnh cho phép bạn tạo lỗi tùy chỉnh.
Trên thực tế, bạn có thểNém lỗi (ném lỗi).
Lỗi có thể là chuỗi, số, boolean hoặc đối tượng trong JavaScript:
throw "Quá lớn"; // Ném văn bản throw 500; // Ném số
nếu để throw và try và catch Khi sử dụng cùng nhau, chúng 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 sẽ kiểm tra đầu vào. Nếu giá trị là không đúng, sẽ ném lỗi (err).
Lỗi này (err) được bắt bởi câu lệnh catch và hiển thị một thông báo lỗi tùy chỉnh:
<!DOCTYPE html>
<html>
<body>
<p>nhập số từ 5 đến 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Kiểm tra đầu vào</button>
<p id="message"></p>
<script>
function myFunction() {
var thông điệp, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "Trống";
if(isNaN(x)) throw "không phải số";
x = Number(x);
if(x < 5) throw "Quá nhỏ";
if(x > 10) throw "Quá lớn";
}
catch(err) {
thông điệp.innerHTML = "Nhập là " + err;
}
}
</script>
</body>
</html>
Xác thực HTML
Mã trên chỉ là một ví dụ.
Trình duyệt hiện đại thường kết hợp JavaScript với xác thực HTML tích hợp sẵn bằng cách sử dụng các quy tắc xác thực được định nghĩa sẵn trong các thuộc tính HTML:
<input id="demo" type="number" min="5" max="10" step="1">
Bạn sẽ học thêm về việc xác thực biểu mẫu trong các chương sau của hướng dẫn này.
Câu lệnh finally
finally Câu lệnh cho phép bạn thực thi mã sau khi try và catch, không matter kết quả:
try {
// Mã lệnh để kiểm tra
}
catch(err) {
// Mã lệnh xử lý lỗi
}
finally {
// Mã lệnh được thực thi không matter kết quả thế nào
}
Mẫu
function myFunction() {
var thông điệp, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "trống";
if(isNaN(x)) throw "không phải số";
x = Number(x);
if(x > 10) throw "太大";
if(x < 5) throw "太小";
}
catch(err) {
message.innerHTML = "Lỗi: " + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
Đối tượng Error
JavaScript có đối tượng error内置 để cung cấp thông tin lỗi khi xảy ra lỗi.
đối tượng error cung cấp hai thuộc tính hữu ích:name và message.
Thuộc tính đối tượng error
| Thuộc tính | Mô tả |
|---|---|
| name | Đặt hoặc trả về tên lỗi |
| message | Đặt hoặc trả về thông điệp lỗi (một chuỗi) |
Giá trị Tên Lỗi
Thuộc tính name của error có thể trả về sáu giá trị khác nhau:
| Tên lỗi | Mô tả |
|---|---|
| EvalError | Đã xảy ra lỗi trong hàm eval() |
| RangeError | Đã xảy ra lỗi vượt quá phạm vi số |
| ReferenceError | Đã xảy ra lỗi truy cập trái phép |
| SyntaxError | Đã xảy ra lỗi ngữ pháp |
| TypeError | Đã xảy ra lỗi loại |
| URIError | Lỗi đã xảy ra trong encodeURI() |
Dưới đây là chi tiết về sáu giá trị khác nhau này.
Lỗi Eval
EvalError thông báo lỗi trong hàm eval().
Phiên bản JavaScript mới hơn sẽ không ném bất kỳ EvalErrorVui lòng sử dụng SyntaxError thay thế.
Lỗi phạm vi
RangeError sẽ bị ném ra khi bạn sử dụng số ngoài phạm vi giá trị hợp lệ.
Ví dụ: Bạn không thể thiết lập số lượng chữ số hiệu số của số là 500.
Mẫu
var num = 1;
try {
num.toPrecision(500); // Số không thể có 500 số hiệu số
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Lỗi truy cập
Nếu bạn sử dụng (truy cập) biến chưa được khai báo, thì ReferenceError sẽ bị ném ra:
Mẫu
var x;
try {
x = y + 1; // y không thể được truy cập (sử dụng)
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Lỗi ngữ pháp
Nếu bạn tính toán mã có lỗi về ngữ pháp, nó sẽ SyntaxError Được ném ra:
Mẫu
try {
eval("alert('Hello)"); // Thiếu ' sẽ gây ra lỗi
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Lỗi loại
Nếu giá trị bạn sử dụng không trong phạm vi giá trị mong đợi, thì TypeError Được ném ra:
Mẫu
var num = 1;
try {
num.toUpperCase(); // Bạn không thể chuyển đổi số thành chữ in hoa
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Lỗi URI
Nếu bạn sử dụng các ký tự không hợp lệ trong hàm URI, thì URIError Được ném ra:
Mẫu
try {
decodeURI("%%%"); // Bạn không thể mã hóa URI cho các dấu percent này
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Thuộc tính đối tượng Error không tiêu chuẩn
Mozilla và Microsoft đã định nghĩa các thuộc tính đối tượng error không tiêu chuẩn:
- fileName (Mozilla)
- lineNumber (Mozilla)
- columnNumber (Mozilla)
- stack (Mozilla)
- description (Microsoft)
- number (Microsoft)
Hãy không sử dụng các thuộc tính này trên các trang web công cộng. Chúng không hoạt động trên tất cả các trình duyệt.
- Trang trước Priorität của toán tử JS
- Trang tiếp theo Phạm vi JS
