werfen
und versuchen...fangen...endlich
Die try
-Anweisung definiert einen Codeblock, der ausgeführt (ausprobiert) werden soll.
Die catch
-Anweisung definiert einen Codeblock zur Behandlung von Fehlern.
Die finally
-Anweisung definiert einen Codeblock, der unabhängig vom Ergebnis ausgeführt wird.
Die throw
-Anweisung definiert einen benutzerdefinierten Fehler.
Beim Ausführen von JavaScript-Code können unterschiedliche Fehler auftreten geschehen.
Fehler können vom Programmierer gemachte Codierungsfehler sein, Fehler aufgrund von Fehlern Eingaben und andere unvorhersehbare Dinge.
In diesem Beispiel haben wir „alert“ falsch als „adddlert“ 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>
Probieren Sie es selbst aus →
<!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 erkennt adddlert als Fehler und führt den aus Fangcode an kümmere dich darum.
try
...catch
Mit der try
-Anweisung können Sie einen Codeblock definieren während der Ausführung auf Fehler geprüft.
Mit der catch
-Anweisung können Sie einen Codeblock definieren ausgeführt werden, wenn im Try-Block ein Fehler auftritt.
Die JavaScript-Anweisungen try
und catch
kommen paarweise:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
Wenn ein Fehler auftritt, wird JavaScript dies tun normalerweise anhalten und eine Fehlermeldung generieren.
Der Fachausdruck dafür lautet: JavaScript löst eine aus Ausnahme (Fehler auslösen).
JavaScript erstellt tatsächlich ein Error-Objekt mit zwei Eigenschaften: Name und Nachricht.
throw
-AnweisungMit der Anweisung throw
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
, eine Nummer
oder ein sein Boolescher Wert
oder ein Objekt
:
throw "Too big"; // throw a text
throw 500; // throw a number
Wenn Sie throw
zusammen mit try
und verwenden catch
, Sie können das Programm steuern Fluss und generieren benutzerdefinierte Fehlermeldungen.
In diesem Beispiel wird die Eingabe untersucht. Wenn der Wert falsch ist, Es wird eine Ausnahme (err) ausgelöst.
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.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>
Probieren Sie es selbst aus →
<!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>
Der obige Code ist nur ein Beispiel.
Moderne Browser verwenden häufig eine Kombination aus JavaScript und integriertem HTML Validierung unter Verwendung vordefinierter Validierungsregeln, 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.
finally
-AnweisungMit der Anweisung finally
können Sie nach dem Ausprobieren Code ausführen fangen, unabhängig vom Ergebnis:
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 = "";
}
}
Probieren Sie es selbst aus →
<!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 verfügt über ein integriertes Fehlerobjekt, das Fehlerinformationen bereitstellt, wenn Es tritt ein Fehler auf.
Das Fehlerobjekt stellt zwei nützliche Eigenschaften bereit: Name und Nachricht.
Legt einen Fehlernamen fest oder gibt ihn zurück
Setzt eine Fehlermeldung (eine Zeichenfolge) oder gibt sie zurück.
Die Fehlernameneigenschaft kann sechs verschiedene Werte zurückgeben:
In der Funktion eval() ist ein Fehler aufgetreten
Es ist eine Zahl „außerhalb des zulässigen Bereichs“ aufgetreten
Es ist ein illegaler Verweis aufgetreten
Es ist ein Syntaxfehler aufgetreten
Es ist ein Typfehler aufgetreten
Es ist ein Fehler in encodeURI() aufgetreten
Die sechs verschiedenen Werte werden im Folgenden beschrieben.
Ein EvalError
weist auf einen Fehler in der Funktion eval() hin.
Neuere Versionen von JavaScript lösen keinen EvalError aus. Verwenden Sie stattdessen SyntaxError.
Ein RangeError
wird ausgelöst, wenn Sie eine Zahl verwenden, die außerhalb liegt der Bereich der gesetzlichen Werte.
Beispiel: Sie können die Anzahl der signifikanten Ziffern einer Zahl nicht auf festlegen 500.
let num = 1;
try {
num.toPrecision(500); // A number cannot have 500 significant digits
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Probieren Sie es selbst aus →
<!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>
Ein ReferenceError
wird ausgelöst, wenn Sie eine Variable verwenden (referenzieren). das wurde nicht deklariert:
let x = 5;
try {
x = y + 1; // y cannot be used (referenced)
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Probieren Sie es selbst aus →
<!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>
Ein SyntaxError
wird ausgelöst, wenn Sie versuchen, Code mit a auszuwerten Syntax-Fehler.
try {
eval("alert('Hello)"); // Missing ' will produce an error
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Probieren Sie es selbst aus →
<!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>
Ein TypeError
wird ausgelöst, wenn Sie einen Wert verwenden, der außerhalb von liegt Bereich der erwarteten Typen:
let num = 1;
try {
num.toUpperCase(); // You cannot convert a number to upper case
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Probieren Sie es selbst aus →
<!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>
Ein URIError
wird ausgelöst, wenn Sie unzulässige Zeichen in einer URI-Funktion verwenden:
try {
decodeURI("%%%"); // You cannot URI decode percent signs
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Probieren Sie es selbst aus →
<!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 und Microsoft definieren einige nicht standardmäßige Fehlerobjekteigenschaften:
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.
Eine vollständige Referenz des Error-Objekts finden Sie in unserem Complete JavaScript-Fehlerreferenz.