Перехват ошибок. Throw, Try и Catch

Оператор try позволяет проверить блок кода на возникновение ошибок.

Оператор catch позволяет обрабатывать возникшую ошибку.

Оператор throw позволяет генерировать пользовательские ошибки.

Оператор finally позволяет выполнять код после операторов try и catch не зависимо от результата.

Ошибки будут!

Во время выполнения кода JavaScript, могут возникать разные ошибки.

Это могут быть ошибки кодирования, сделанные программистом, ошибки, возникающие в результате ввода неверных данных, и другие непредвиденные вещи.

В следующем примере, чтобы умышленно создать ошибку, мы вместо команды alert написали adddlert:


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

<script>
try {
    adddlert("Добро пожаловать, гость!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

JavaScript перехватит adddlert как ошибку и выполнит код в операторе catch, чтобы ее обработать.

Операторы try и catch

Оператор try определяет блок кода, который во время выполнения будет проверяться на возникновение ошибок.

Оператор catch определяет блок кода, который будет выполняться, если в блоке оператора try возникнет ошибка.

Операторы try и catch всегда используются в паре:


try {
     // проверяемый блок кода
}
 catch(err) {
     // блок кода для обработки ошибок
}

JavaScript генерирует ошибки

Когда возникает ошибка, обычно интерпретатор JavaScript останавливает выполнение кода и генерирует сообщение об ошибке.

Если говорить техническими терминами, то интерпретатор JavaScript сгенерирует исключение (сгенерирует ошибку).

На самом деле интерпретатор JavaScript создаст объект Error с двумя свойствами — name и message.

Оператор throw

Оператор throw позволяет создавать пользовательские ошибки.

В техническом смысле вы можете генерировать исключения (генерировать ошибки).

Исключения могут быть строкой, числом, логическим значением или объектом JavaScript:


throw "Слишком большой";
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="p01"></p>

<script>
function myFunction() {
    var message, x;
    message = document.getElementById("p01");
    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 {
    // блок кода, выполняемый не зависимо от результата операторов try / catch
}

Пример:


function myFunction() {
    var message, x;
    message = document.getElementById("p01");
    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 + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

Объект Error

В JavaScript есть встроенный объект Error, который предоставляет информацию по возникшей ошибке.

Объект Error предоставляет два полезных свойства:

СвойствоОписание
nameУстанавливает или возвращает имя ошибки
messageУстанавливает или возвращает сообщение об ошибке (строку)

Значения свойства name

В свойстве name объекта Error может быть возвращено шесть различных значений:

Имя ошибкиОписание
EvalErrorОшибка в функции eval()
RangeErrorЧисло "за пределами диапазона"
ReferenceErrorНедопустимая ссылка (обращение)
SyntaxErrorСинтаксическая ошибка
TypeErrorОшибка типов
URIErrorОшибка в encodeURI()

EvalError

EvalError указывает на то, что возникла ошибка в функции eval().

В более новых версиях JavaScript никогда не генерируется ошибка EvalError. Вместо нее используется SyntaxError.

RangeError

Ошибка RangeError возникает, если вы используете число, которое выходит за пределы диапазона допустимых значений.

Например, нельзя задать число с 500 знаковыми цифрами.


var num = 1;
try {
    num.toPrecision(500);   // Число не может иметь 500 знаковых цифр
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

ReferenceError

Ошибка ReferenceError возникает в том случае, когда вы используете (ссылаетесь) переменную, которая не была декларирована:


var x;
try {
    x = y + 1;   // нельзя использовать (ссылаться на) переменную y
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

SyntaxError

Ошибка SyntaxError возникает, когда вы пытаетесь выполнить код с синтаксическими ошибками.


try {
    eval("alert('Hello)");   // Пропуск ' приведет к синтаксической ошибке
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

TypeError

Ошибка TypeError возникает, когда вы используете значение, выходящее за пределы диапазона ожидаемых типов:


var num = 1;
try {
    num.toUpperCase();   // Нельзя преобразовать число в верхний регистр
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

URIError

Ошибка URIError возникает, когда вы используете недопустимые символы в функциях URI:


try {
    decodeURI("%%%");   // Нельзя декодировать эти символы процентов
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Нестандартные свойства объекта Error

Mozilla и Microsoft определяют ряд нестандартных свойств объекта Error:

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

Никогда не используйте эти свойства в публичном веб-сайте. Они не будут работать во всех браузерах.