JavaScript-Fehler Versuchen Sie Catch Throw


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


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.


Fehler werden passieren!

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.

Beispiel

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
}


JavaScript löst Fehler aus

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.


Die throw-Anweisung

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


Beispiel für eine Eingabevalidierung

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>




HTML-Validierung

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.


Die finally-Anweisung

Mit der Anweisung finally können Sie nach dem Ausprobieren Code ausführen fangen, 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.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>




Das Fehlerobjekt

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.


Eigenschaften des Fehlerobjekts

name

Legt einen Fehlernamen fest oder gibt ihn zurück

message

Setzt eine Fehlermeldung (eine Zeichenfolge) oder gibt sie zurück.


Fehlernamenwerte

Die Fehlernameneigenschaft kann sechs verschiedene Werte zurückgeben:

EvalError

In der Funktion eval() ist ein Fehler aufgetreten

RangeError

Es ist eine Zahl „außerhalb des zulässigen Bereichs“ aufgetreten

ReferenceError

Es ist ein illegaler Verweis aufgetreten

SyntaxError

Es ist ein Syntaxfehler aufgetreten

TypeError

Es ist ein Typfehler aufgetreten

URIError

Es ist ein Fehler in encodeURI() aufgetreten

Die sechs verschiedenen Werte werden im Folgenden beschrieben.


Auswertungsfehler

Ein EvalError weist auf einen Fehler in der Funktion eval() hin.

Neuere Versionen von JavaScript lösen keinen EvalError aus. Verwenden Sie stattdessen SyntaxError.


Bereichsfehler

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.

Beispiel

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>

Referenzfehler

Ein ReferenceError wird ausgelöst, wenn Sie eine Variable verwenden (referenzieren). das wurde nicht deklariert:

Beispiel

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>

Syntax-Fehler

Ein SyntaxError wird ausgelöst, wenn Sie versuchen, Code mit a auszuwerten Syntax-Fehler.

Beispiel

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>

Geben Sie Fehler ein

Ein TypeError wird ausgelöst, wenn Sie einen Wert verwenden, der außerhalb von liegt Bereich der erwarteten Typen:

Beispiel

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>

URI-Fehler (Uniform Resource Identifier).

Ein URIError wird ausgelöst, 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;
}

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>

Nicht standardmäßige Fehlerobjekteigenschaften

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.


Vollständige Fehlerreferenz

Eine vollständige Referenz des Error-Objekts finden Sie in unserem Complete JavaScript-Fehlerreferenz.