JavaScript-Fehler - Throw und Try to Catch

try Der Befehl ermöglicht es Ihnen, Fehler in einem Codeblock zu testen.

catch Der Befehl ermöglicht es Ihnen, Fehler zu behandeln.

throw Die Anweisung ermöglicht es Ihnen, benutzerdefinierte Fehler zu erstellen.

finally Ermöglicht Ihnen, Code auszuführen, nach try und catch, egal wie das Ergebnis ist.

Fehler werden immer auftreten!

Bei der Ausführung von JavaScript-Kodierung treten verschiedene Fehler auf.

Fehler können durch Programmierfehler des Entwicklers, Fehler durch falsche Eingaben oder durch andere unvorhersehbare Probleme verursacht werden.

Beispiel

In diesem Beispiel verwenden wir adddlert Schreiben Sie Warnungscode, um einen Fehler absichtlich zu erzeugen:

<p id="demo"></p>
<script>
try {
    adddlert("Willkommen auf der Website!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

Probieren Sie selbst aus

JavaScript erfasst adddlert als Fehler und führt dann Code aus, um den Fehler zu behandeln.

JavaScript try und catch

try Der Befehl ermöglicht es Ihnen, einen Codeblock zu definieren, um Fehler während der Ausführung zu erkennen.

catch Der Befehl ermöglicht es Ihnen, einen Codeblock zu definieren, der ausgeführt wird, wenn ein Fehler im try-Codeblock auftritt.

JavaScript-Anweisungen try und catch Paarweise auftretend:

try {
     Codeblock für Tests
}
 catch(err) {
     Codeblock zur Fehlerbehandlung
}

JavaScript wirft einen Fehler

Wenn ein Fehler auftritt, stoppt JavaScript normalerweise und zeigt eine Fehlermeldung an.

Der technische Begriff wird so beschrieben:JavaScript wirft Ausnahmen (Fehler werfen).

JavaScript erstellt tatsächlich Ausnahmen mit zwei Eigenschaften: Error -Objekt:name und message.

throw-Anweisung

throw Die Anweisung ermöglicht es Ihnen, benutzerdefinierte Fehler zu erstellen.

Technisch gesehen können SieAusnahme werfen (Fehler werfen).

Eine Ausnahme kann ein JavaScript-String, eine Nummer, ein Boolean oder ein Objekt sein:

throw "Too big";    // Text auswerfen
throw 500;          // Eine Nummer auswerfen

wenn throw mit try und catch Gemeinsam verwendet, können Sie den Programmfluss steuern und benutzerdefinierte Fehlermeldungen generieren.

Eingabevalidierungsfall

In diesem Beispiel wird die Eingabe überprüft. Wenn der Wert falsch ist, wird eine Ausnahme (err) ausgelöst.

Dieser Ausnahme (err) wird durch das catch-Statement erfasst und eine benutzerdefinierte Fehlermeldung angezeigt:

<!DOCTYPE html>
<html>
<body>
<p>Bitte geben Sie eine Zahl zwischen 5 und 10 ein：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Eingabe testen</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 "leer";
         if(isNaN(x)) throw "keine Zahl";
         x = Number(x);
        if(x < 5) throw "zu klein";
        if(x > 10) throw "zu groß";
    }
    catch(err) {
        message.innerHTML = "Eingabe ist " + err;
    }
}
</script>
</body>
</html>

Probieren Sie selbst aus

HTML-Validierung

Dieser Code ist nur ein Beispiel.

Moderne Browser kombinieren oft JavaScript mit integrierter HTML-Validierung, indem sie vorgegebene Validierungsregeln verwenden, die in HTML-Attributen definiert sind:

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

Sie werden in den späteren Kapiteln dieses Tutorials mehr über die Formularvalidierung lernen.

finally-Anweisung

finally Der Befehl ermöglicht es Ihnen, Code nach try und catch auszuführen, unabhängig vom Ergebnis:

try {
     // Der Codeblock für den Test
}
 catch(err) {
     // Der Codeblock zur Fehlerbehandlung
} 
finally {
     // Der Codeblock wird unabhängig vom Ergebnis ausgeführt.
}

Beispiel

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "leer";
        if(isNaN(x)) throw "keine Zahl";
         x = Number(x);
        if(x >  10) throw "zu groß";
        if(x <  5) throw "zu klein";
    }
    catch(err) {
        message.innerHTML = "Fehler: " + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

Probieren Sie selbst aus

Error -Objekt

JavaScript hat einen eingebauten error -Objekt, der Fehlerinformationen bereitstellt, wenn ein Fehler auftritt.

das error -Objekt bietet zwei nützliche Attribute:name und message.

Error -Objekteigenschaften

Eigenschaft Beschreibung
name Setzen oder Rückgabe des Fehlernamens
message Setzen oder Rückgabe der Fehlermeldung (eine Zeichenfolge)

Error Name Values

Das Attribut name des error kann sechs verschiedene Werte zurückgeben:

Fehlername Beschreibung
EvalError Fehler, der im eval() -Funktion aufgetreten ist
RangeError Fehler, der außerhalb des numerischen Bereichs liegt, aufgetreten
ReferenceError Illegale Referenz aufgetreten
SyntaxError Syntaxfehler aufgetreten
TypeError Typfehler aufgetreten
URIError Fehler, die in encodeURI() aufgetreten sind

Nachfolgend erläutere ich diese sechs verschiedenen Werte im Detail.

Eval -Fehler

EvalError Fehler im eval() -Funktion an.

Aktuellere Versionen von JavaScript werfen keine EvalErrorBitte verwenden Sie SyntaxError ersetzten.

Bereichsfehler

RangeError wird ausgelöst, wenn Sie eine Zahl verwenden, die außerhalb des gültigen Wertebereichs liegt.

Beispiel: Sie können die Anzahl der gültigen Stellen eines numerischen Wertes nicht auf 500 setzen.

Beispiel

var num = 1;
try {
    num.toPrecision(500);   // Eine Zahl kann nicht 500 gültige Stellen haben
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Probieren Sie selbst aus

Bezugsfehler

wenn Sie eine noch nicht deklarierte Variable verwenden (beziehen), dann ReferenceError wird ausgelöst:

Beispiel

var x;
try {
    x = y + 1;   // y kann nicht referenziert (verwendet) werden
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Probieren Sie selbst aus

Syntaxfehler

Wenn Sie Code mit Syntaxfehlern berechnen, wird SyntaxError Wird ausgelöst:

Beispiel

try {
    eval("alert('Hello')");   // Fehlende ' verursacht einen Fehler
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

Probieren Sie selbst aus

Typfehler

Wenn der verwendete Wert nicht im erwarteten Wertebereich liegt, dann TypeError Wird ausgelöst:

Beispiel

var num = 1;
try {
    num.toUpperCase();   // Sie können die Zahl nicht in Großbuchstaben umwandeln
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Probieren Sie selbst aus

URI-Fehler

Wenn Sie in den URI-Funktionen ungültige Zeichen verwenden, dann URIError Wird ausgelöst:

Beispiel

try {
    decodeURI("%%%");   // Sie können diese Prozente nicht in eine URI-Kodierung umwandeln
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Probieren Sie selbst aus

Nicht standardisierte Error-Objekt-Attribute

Mozilla und Microsoft haben nicht standardisierte error-Objekt-Attribute definiert:

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

Verwenden Sie diese Eigenschaften nicht auf öffentlichen Websites. Sie funktionieren nicht in allen Browsern.