JavaScript-Fehler
Werfen und versuchen ... fangen ... endlich
Die tryAnweisung definiert einen Codeblock zum Ausführen (zum Ausprobieren).
Die catchAnweisung definiert einen Codeblock zur Behandlung von Fehlern.
Die finallyAnweisung definiert einen Codeblock, der unabhängig vom Ergebnis ausgeführt wird.
Die throwAnweisung definiert einen benutzerdefinierten Fehler.
Fehler passieren!
Beim Ausführen von JavaScript-Code können verschiedene Fehler auftreten.
Fehler können Codierungsfehler des Programmierers, Fehler aufgrund falscher Eingaben und andere unvorhersehbare Dinge sein.
Beispiel
In diesem Beispiel haben wir "alert" falsch als "addlert" geschrieben, um absichtlich einen Fehler zu erzeugen:
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
JavaScript fängt addlert als Fehler ab und führt den Fangcode aus, um ihn zu behandeln.
JavaScript try and catch
Mit der tryAnweisung können Sie einen Codeblock definieren, der während der Ausführung auf Fehler getestet werden soll.
Mit der catchAnweisung können Sie einen Codeblock definieren, der ausgeführt wird, wenn im try-Block ein Fehler auftritt.
Die JavaScript-Anweisungen tryund catch
kommen paarweise vor:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
JavaScript wirft Fehler
Wenn ein Fehler auftritt, stoppt JavaScript normalerweise und generiert eine Fehlermeldung.
Der Fachausdruck dafür lautet: JavaScript will throw an exception (throw an error) .
JavaScript erstellt tatsächlich ein Error-Objekt mit zwei Eigenschaften: name und message .
Die throw-Anweisung
Mit der throwAnweisung können Sie einen benutzerdefinierten Fehler erstellen.
Technisch gesehen können Sie eine Ausnahme auslösen (einen Fehler auslösen) .
Die Ausnahme kann ein JavaScript String, ein Number, ein Booleanoder ein sein Object:
throw "Too big"; // throw a text
throw 500; // throw a number
Wenn Sie throwzusammen mit tryund
verwenden catch, können Sie den Programmablauf steuern und benutzerdefinierte Fehlermeldungen generieren.
Beispiel für die Eingabevalidierung
In diesem Beispiel wird die Eingabe untersucht. Wenn der Wert falsch ist, wird eine Ausnahme (err) geworfen.
Die Ausnahme (err) wird von der catch-Anweisung abgefangen und eine benutzerdefinierte Fehlermeldung wird angezeigt:
<!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 == "") 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-Validierung
Der obige Code ist nur ein Beispiel.
Moderne Browser verwenden häufig eine Kombination aus JavaScript und integrierter HTML-Validierung, wobei vordefinierte Validierungsregeln verwendet werden, die in HTML-Attributen definiert sind:
<input id="demo" type="number" min="5" max="10" step="1">
Weitere Informationen zur Formularvalidierung finden Sie in einem späteren Kapitel dieses Tutorials.
Die abschließende Aussage
Mit der finallyAnweisung können Sie nach Try und Catch Code ausführen, unabhängig vom Ergebnis:
Syntax
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
}Beispiel
function myFunction() {
const message =
document.getElementById("p01");
message.innerHTML = "";
let x =
document.getElementById("demo").value;
try {
if(x == "") 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 = "";
}
}
Das Fehlerobjekt
JavaScript hat ein eingebautes Fehlerobjekt, das Fehlerinformationen bereitstellt, wenn ein Fehler auftritt.
Das Fehlerobjekt stellt zwei nützliche Eigenschaften bereit: Name und Nachricht.
Fehlerobjekteigenschaften
| Eigentum | Beschreibung |
|---|---|
| Name | Legt einen Fehlernamen fest oder gibt ihn zurück |
| Botschaft | Setzt oder gibt eine Fehlermeldung zurück (ein String) |
Fehlernamenswerte
Sechs verschiedene Werte können von der Eigenschaft error name zurückgegeben werden:
| Fehlername | Beschreibung |
|---|---|
| Bewertungsfehler | In der Funktion eval() ist ein Fehler aufgetreten |
| RangeError | Eine Zahl "außerhalb des Bereichs" ist aufgetreten |
| Referenzfehler | Es ist eine illegale Referenz aufgetreten |
| Syntax-Fehler | Es ist ein Syntaxfehler aufgetreten |
| TypeError | Ein Typfehler ist aufgetreten |
| URIFehler | In encodeURI() ist ein Fehler aufgetreten |
Die sechs verschiedenen Werte werden unten beschrieben.
Bewertungsfehler
Ein EvalErrorzeigt einen Fehler in der Funktion eval() an.
Neuere Versionen von JavaScript lösen EvalError nicht aus. Verwenden Sie stattdessen SyntaxError.
Bereichsfehler
A RangeErrorwird ausgelöst, wenn Sie eine Zahl verwenden, die außerhalb des zulässigen Wertebereichs liegt.
Beispiel: Sie können die Anzahl signifikanter Stellen einer Zahl nicht auf 500 setzen.
Beispiel
let num = 1;
try {
num.toPrecision(500); // A number cannot have 500
significant digits
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Referenzfehler
A ReferenceErrorwird geworfen, wenn Sie eine nicht deklarierte Variable verwenden (referenzieren):
Beispiel
let x = 5;
try {
x = y + 1; // y cannot be used (referenced)
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Syntax-Fehler
A SyntaxErrorwird ausgelöst, wenn Sie versuchen, Code mit einem Syntaxfehler auszuwerten.
Beispiel
try {
eval("alert('Hello)"); //
Missing ' will produce an error
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Geben Sie Fehler ein
A TypeErrorwird ausgelöst, wenn Sie einen Wert verwenden, der außerhalb des Bereichs der erwarteten Typen liegt:
Beispiel
let num = 1;
try {
num.toUpperCase(); // You cannot convert a number
to upper case
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
URI-Fehler (Uniform Resource Identifier).
A URIErrorwird ausgegeben, wenn Sie unzulässige Zeichen in einer URI-Funktion verwenden:
Beispiel
try {
decodeURI("%%%"); // You cannot URI decode
percent signs
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Nicht standardmäßige Fehlerobjekteigenschaften
Mozilla und Microsoft definieren einige nicht standardmäßige Eigenschaften von Fehlerobjekten:
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.
Vollständige Fehlerreferenz
Eine vollständige Referenz des Error-Objekts finden Sie in unserer vollständigen JavaScript-Fehlerreferenz .