JavaScript Fehler - throw, try und catch

tryDie Anweisung testet einen Codeblock auf Fehler.

catchDie Anweisung behandelt Fehler.

throwDie Anweisung erzeugt benutzerdefinierte Fehler.

finallyDie Anweisung wird nach den try- und catch-Anweisungen ausgeführt, unabhängig davon, ob eine Ausnahme ausgelöst wurde.

JavaScript: Fehler

Wenn die JavaScript-Engine JavaScript-Code ausführt, können verschiedene Fehler auftreten.

Es können Syntaxfehler sein, normalerweise Programmierfehler oder Tippfehler von Programmierern.

Es können Rechtschreibfehler oder fehlende Sprachfunktionen sein (möglicherweise aufgrund von Browserunterschieden).

Es können Fehler sein, die durch falsche Ausgaben des Servers oder des Benutzers verursacht werden.

Natürlich können sie auch auf viele andere unvorhersehbare Faktoren zurückzuführen sein.

JavaScript-Fehler werfen (throw)

Wenn ein Fehler auftritt, wenn etwas schiefgeht, stoppt die JavaScript-Engine normalerweise und erzeugt eine Fehlermeldung.

Der technische Begriff für diese Situation ist: JavaScript wirdthroweinen Fehler.

JavaScript try und catch

tryDie Anweisung ermöglicht es uns, einen Codeblock zu definieren, der während der Ausführung auf Fehler getestet wird.

catchDie Anweisung ermöglicht es uns, einen Codeblock zu definieren, der ausgeführt wird, wenn im try-Block ein Fehler auftritt.

JavaScript-Anweisungentryundcatchkommen paarweise vor.

Syntax

try { ... //Eine Ausnahme auslösen } catch(e) { ... //Abfangen und Behandeln einer Ausnahme } finally { ... //Finalisierung }

Beispiel

Im folgenden Beispiel haben wir absichtlich einen Tippfehler in den Code des try-Blocks geschrieben.

Der catch-Block fängt den Fehler im try-Block ab und führt Code aus, um ihn zu behandeln.

Beispiel

var txt=""; function message() { try { adddlert("Willkommen, Gast!"); } catch(err) { txt="Diese Seite enthält einen Fehler.\n\n"; txt+="Fehlerbeschreibung:" + err.message + "\n\n"; txt+="Klicken Sie auf OK, um fortzufahren.\n\n"; alert(txt); } }

Selbst ausprobieren »

Die finally-Anweisung

Die finally-Anweisung führt den Codeblock unabhängig davon aus, ob im vorhergehenden try und catch eine Ausnahme aufgetreten ist.

Beispiel

function myFunction() { //Element abrufen const messageElement = document.getElementById("p01"); const inputElement = document.getElementById("demo"); //Vorherige Nachricht löschen messageElement.innerHTML = ""; //Eingabewert abrufen und Leerraum entfernen const rawValue = inputElement.value.trim(); try { //1. Prüfen, ob leer if (rawValue === "") { throw new Error("Eingabe darf nicht leer sein. Bitte geben Sie eine Zahl ein."); } //2. Prüfen, ob es eine gültige Zahl ist if (isNaN(rawValue)) { throw new Error("Bitte geben Sie eine gültige Zahl ein (z. B. 5, 10.5, -3)"); } //In Zahl umwandeln const x = Number(rawValue); //3. Prüfen, ob es eine Ganzzahl ist (bei Bedarf anpassbar) if (!Number.isInteger(x)) { throw new Error("Bitte geben Sie eine Ganzzahl ein (Dezimalzahlen werden nicht unterstützt)"); } //4. Den Zahlenbereich prüfen (bei Bedarf anpassbar) if (x > 10) { throw new Error(`Number ${x}ist zu groß, bitte geben Sie5-10eine Zahl zwischen`); } if (x < 5) { throw new Error(`Number ${x}ist zu klein, bitte geben Sie5-10eine Zahl zwischen`); } //5. Überprüfen Sie den Sonderfall negativer Zahlen if (x < 0) { throw new Error("Bitte geben Sie eine positive Zahl ein (negative Zahlen werden nicht unterstützt)"); } //Alle Validierungen bestanden messageElement.innerHTML= `Validierung bestanden! Die eingegebene Zahl ist: ${x}`; messageElement.style.color = "green"; //Bei Erfolg können weitere Operationen ausgeführt werden console.log(`Benutzer hat eine gültige Zahl eingegeben: ${x}`); } catch (err) { //Fehlermeldung anzeigen messageElement.innerHTML= `Fehler: ${err.message}`; messageElement.style.color = "red"; //Optional: Fehler in der Konsole protokollieren console.error("Eingabevalidierung fehlgeschlagen:", err.message); } finally { //Unabhängig von Erfolg oder Misserfolg das Eingabefeld leeren inputElement.value = ""; //Optional: Das Eingabefeld erneut fokussieren, um dem Benutzer die erneute Eingabe zu erleichtern inputElement.focus(); } }


Die throw-Anweisung

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

Der korrekte technische Begriff ist: eine Exception erstellen odereine Exception werfen（Exception）。

Wenn Sie throw zusammen mit try und catch verwenden, können Sie den Programmfluss steuern und benutzerdefinierte Fehlermeldungen generieren.

Syntax

throw exception

Die Exception kann ein JavaScript-String, eine Zahl, ein Boolean oder ein Objekt sein.

Beispiel

Dieses Beispiel prüft den Wert einer Eingabevariable. Wenn der Wert falsch ist, wird eine Exception (Fehler) geworfen. catch fängt diesen Fehler ab und zeigt eine benutzerdefinierte Fehlermeldung an:

Beispiel

function myFunction() { var message, x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("demo").value; try { if(x == "") throw "Wert ist 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 = "Fehler:" + err; } }

Selbst ausprobieren »

Beachten Sie, dass das obige Beispiel auch einen Fehler auslöst, wenn die Funktion getElementById fehlschlägt.

Weitere Erweiterungen