Ошибки 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 позволяет определить блок кода для выполняться, если в блоке try возникает ошибка.

Операторы JavaScript try и catch приходите парами:

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

JavaScript выдает ошибки

При возникновении ошибки JavaScript будет обычно останавливаются и выдают сообщение об ошибке.

Технический термин для этого таков: JavaScript выдаст исключение (выдать ошибку).

JavaScript фактически создаст объект ошибки с двумя свойствами: имя и сообщение.

Оператор throw

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

Технически вы можете выдать исключение (выдать ошибку).

Исключением может быть JavaScript String, Number, Логическое значение или Объект:

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.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

Оператор 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 можно найти в разделе Полное описание. Справочник ошибок JavaScript.