Błędy w JavaScript - Throw i Try to Catch

try Zdanie pozwala na testowanie błędów w bloku kodu.

catch Zdanie pozwala na obsługę błędów.

throw instrukcja allow you to create custom errors.

finally Pozwala na wykonywanie kodu, po try i catch, niezależnie od wyniku.

Błędy zawsze się zdarzają!

Podczas wykonywania kodu JavaScript może wystąpić wiele różnych błędów.

Błąd może być błędem programisty, błędem spowodowanym błędem wejściowym, lub innymi nieprzewidzianymi problemami.

Przykład

W tym przykładzie, poprzez alert Napisz kod ostrzegawczy, aby celowo wywołać błąd:

<p id="demo"></p>
<script>
try {
    alert("Witamy na naszej stronie!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

Spróbuj sam

JavaScript uchwytuje alert jako błąd, a następnie wykonuje kod do obsługi tego błędu.

JavaScript try i catch

try Zdanie pozwala zdefiniować blok kodu, aby wykryć błąd podczas jego wykonywania.

catch Zdanie pozwala zdefiniować blok kodu do wykonania, jeśli w bloku try wystąpi błąd.

Zdania JavaScript try i catch Pojawia się w parze:

try {
     Kod do testowania
}
 catch(err) {
     Kod blokujący błąd
}

JavaScript rzuca błąd

Gdy występuje błąd, JavaScript zazwyczaj zatrzymuje działanie i generuje komunikat o błędzie.

Tego terminu używa się w ten sposób:JavaScript rzuca wyjątki (błędy).

JavaScript rzeczywiście tworzy wyjątki (błędy) z dwoma atrybutami Obiekt błędu:name i message.

throw

throw instrukcja allow you to create custom errors.

Technicznie możeszRzuć wyjątek (rzucenie błędu).

Wyjątki mogą być stringami, liczbami, wartościami logicznymi lub obiektami JavaScript:

throw "Too big";    // Rzuć tekst
throw 500;          // Rzuć liczbę

jeśli throw i try i catch Razem z try i catch, można kontrolować przepływ programu i generować niestandardowe komunikaty o błędach.

Przykład walidacji wejścia

W tym przykładzie sprawdzany jest wprowadzony tekst. Jeśli wartość jest niepoprawna, zostanie rzucony wyjątek (err).

Ten wyjątek (err) jest łapany przez instrukcję catch i wyświetla niestandardową wiadomość o błędzie:

<!DOCTYPE html>
<html>
<body>
<p>Wprowadź liczbę z zakresu 5 - 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Testuj wprowadzenie</button>
<p id="message"></p>
<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "Empty";
         if(isNaN(x)) throw "nie jest liczbą";
         x = Number(x);
        if(x < 5) throw "Too small";
        if(x > 10) throw "Too big";
    }
    catch(err) {
        message.innerHTML = "Wprowadzenie to " + err;
    }
}
</script>
</body>
</html>

Spróbuj sam

Walidacja HTML

Powyższy kod to jedynie przykład.

Nowoczesne przeglądarki często łączą JavaScript z wbudowaną walidacją HTML, używając predefiniowanych reguł walidacji zdefiniowanych w atrybutach HTML:

<input id="demo" type="number" min="5" max="10" step="1">

Więcej na temat walidacji formularzy znajdziesz w dalszych rozdziałach tego tutoriala.

finally 语句

finally Zwykle stosuje się to po try i catch, aby wykonać kod niezależnie od wyniku:

try {
     // Kod do testowania
}
 catch(err) {
     // Kod do obsługi błędów
} 
finally {
     // Każdy kod, który ma być wykonany niezależnie od wyniku
}

Przykład

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "jest pusty";
        if(isNaN(x)) throw "nie jest liczbą";
         x = Number(x);
        if(x >  10) throw "za dużo";
        if(x <  5) throw "za mało";
    }
    catch(err) {
        message.innerHTML = "Błąd: " + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

Spróbuj sam

Obiekt błędu

JavaScript ma wbudowany obiekt błędu, który dostarcza informacje o błędach.

obiekt błędu error dostarcza dwa przydatne atrybuty:name i message.

Atrybuty obiektu błędu

Atrybut Opis
name Ustawia lub zwraca nazwę błędu
message Ustawia lub zwraca komunikat błędu (jedno string)

Wartości Nazwy Błędu

Atrybut name błędu może zwrócić sześć różnych wartości:

Nazwa błędu Opis
Błąd eval Błąd, który wystąpił w funkcji eval()
Błąd zakresu Wystąpił błąd poza zakresem liczby
Błąd odniesienia Wystąpił nielegalne odniesienie
Błąd składni Wystąpił błąd składni
TypeError Wystąpił błąd typowy
URIError Błąd, który wystąpił w encodeURI()

Poniżej szczegółowo wyjaśnimy te sześć różnych wartości.

Błąd eval

Błąd eval oznaki błędów w funkcji eval().

Nowsze wersje JavaScript nie rzucają żadnych Błąd evalProszę użyć Błąd składni zastąp.

Błąd zakresu

Błąd zakresu zostanie rzucony, gdy używasz liczby poza legalnym zakresem wartości.

Na przykład: nie możesz ustawić liczby cyfr znaczących na 500.

Przykład

var num = 1;
try {
    num.toPrecision(500);   // Liczba nie może mieć 500 cyfr znaczących
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Spróbuj sam

Błąd odniesienia

Jeśli używasz (odnosi się do) zmiennej, która nie została zadeklarowana, Błąd odniesienia zostanie rzucony:

Przykład

var x;
try {
    x = y + 1;   // y nie może być odniesiona (użyta)
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Spróbuj sam

Błąd składni

Jeśli obliczysz kod z błędem składniowym, Błąd składni Rzucono:

Przykład

try {
    eval("alert('Hello)");   // Brak ' spowoduje błąd
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

Spróbuj sam

Błąd typowy

Jeśli wartość, którą używasz, nie znajduje się w oczekiwanym zakresie wartości, TypeError Rzucono:

Przykład

var num = 1;
try {
    num.toUpperCase();   // Nie możesz przekształcić liczby na wielkie litery
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Spróbuj sam

Błąd URI

Jeśli używasz nielegalnych znaków w funkcji URI, URIError Rzucono:

Przykład

try {
    decodeURI("%%%");   // Nie możesz skodować tych procentów w URI
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Spróbuj sam

Niestandardowe atrybuty obiektu Error

Mozilla i Microsoft zdefiniowały niestandardowe atrybuty obiektu error:

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

Nie używaj tych właściwości na publicznych stronach. Nie działają we wszystkich przeglądarkach.