Erreurs JavaScript - Throw et Try to Catch

try La déclaration vous permet de tester les erreurs dans le bloc de code.

catch La déclaration permet de traiter les erreurs.

throw La statement permet de créer des erreurs personnalisées.

finally Vous permet deexécuter le code, après try et catch, peu importe le résultat.

Les erreurs se produisent toujours !

Des erreurs diverses se produisent lors de l'exécution du code JavaScript.

Les erreurs peuvent être des erreurs de codage des programmeurs, des erreurs causées par des entrées incorrectes, ou des problèmes imprévisibles d'autres types.

Exemple

Dans cet exemple, nous utilisons adddlert Écrire un code d'avertissement pour intentionnellement créer une erreur :

<p id="demo"></p>
<script>
try {
    adddlert("Bienvenue sur le site !");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

Essayez-le vous-même

JavaScript capture adddlert comme une erreur et exécute le code pour traiter cette erreur.

try et catch en JavaScript

try La déclaration permet de définir un bloc de code afin de détecter les erreurs lors de son exécution.

catch La déclaration permet de définir un bloc de code à exécuter, si une erreur se produit dans le bloc try.

Instructions JavaScript try et catch Apparaissent en paires :

try {
     Bloc de code pour les tests
}
 catch(err) {
     Bloc de code pour traiter les erreurs
}

JavaScript lève des erreurs

Lorsqu'une erreur se produit, JavaScript s'arrête généralement et génère un message d'erreur.

Le terme technique est décrit ainsi :JavaScript lève des exceptions (lève des erreurs)。

JavaScript crée effectivement des exceptions avec deux propriétés : Objet Error:name et message。

La statement throw

throw La statement permet de créer des erreurs personnalisées.

Techniquement, vous pouvezLancer une exception (lancer une erreur)。

Les exceptions peuvent être des chaînes de caractères JavaScript, des nombres, des booléens ou des objets :

throw "Trop grand";    // Lancer un texte
throw 500;          // Lancer un nombre

Si vous mettez throw et try et catch En les utilisant ensemble, vous pouvez contrôler le flux du programme et générer des messages d'erreur personnalisés.

Cas de validation d'entrée

Dans cet exemple, nous vérifions l'entrée. Si la valeur est incorrecte, une exception (err) est lancée.

Cette exception (err) est capturée par la statement catch et affiche un message d'erreur personnalisé :

<!DOCTYPE html>
<html>
<body>
<p>Entrez un nombre entre 5 et 10 :</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Tester l'entrée</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 "vide";
         if(isNaN(x)) throw "n'est pas un nombre";
         x = Number(x);
        if(x < 5) throw "trop petit";
        if(x > 10) throw "trop grand";
    }
    catch(err) {
        message.innerHTML = "Entrée est " + err;
    }
}
</script>
</body>
</html>

Essayez-le vous-même

Validation HTML

Ce code est simplement un exemple.

Les navigateurs modernes combinent généralement JavaScript et la validation HTML intégrée en utilisant des règles de validation prédéfinies définies dans les attributs HTML :

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

Vous apprendrez plus sur la validation des formulaires dans les chapitres suivants de ce tutoriel.

La statement finally

finally La statement permet d'exécuter du code après try et catch, peu importe le résultat :

try {
     // Le bloc de code pour les tests
}
 catch(err) {
     // Le bloc de code pour gérer les erreurs
} 
finally {
     // Le bloc de code qui s'exécute indépendamment du résultat
}

Exemple

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "est vide";
        if(isNaN(x)) throw "n'est pas un nombre";
         x = Number(x);
        if(x >  10) throw "trop grand";
        if(x <  5) throw "trop petit";
    }
    catch(err) {
        message.innerHTML = "Erreur : " + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

Essayez-le vous-même

Objet Error

JavaScript possède un objet intégré error qui fournit des informations d'erreur lorsque se produit une erreur.

l'objet error fournit deux attributs utiles :name et message。

Attributs de l'objet Error

Attribut Description
name Définir ou retourner le nom de l'erreur
message Définir ou retourner le message d'erreur (une chaîne de caractères)

Valeurs des Noms d'Erreur

L'attribut name de l'erreur peut retourner six valeurs différentes :

Nom de l'erreur Description
EvalError Une erreur s'est produite dans la fonction eval()
RangeError Une erreur en dehors de la plage numérique s'est produite
ReferenceError Une erreur de référence illicite s'est produite
SyntaxError Une erreur de syntaxe a eu lieu
TypeError Une erreur de type a eu lieu
URIError Erreur survenue dans encodeURI()

Voici une explication détaillée des six valeurs différentes.

Erreur Eval

EvalError indiquer les erreurs dans la fonction eval().

Les versions mises à jour de JavaScript ne lèveront aucune EvalError。Veuillez utiliser SyntaxError remplacez.

Erreur de plage

RangeError il sera lancé lorsque vous utilisez un nombre en dehors de la gamme de valeurs valides.

Par exemple : Vous ne pouvez pas définir le nombre de chiffres significatifs sur 500.

Exemple

var num = 1;
try {
    num.toPrecision(500);   // Un nombre ne peut pas avoir 500 chiffres significatifs
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Essayez-le vous-même

Erreur de référence

Si vous utilisez (référez-vous) à une variable non déclarée, alors ReferenceError sera lancé :

Exemple

var x;
try {
    x = y + 1;   // y ne peut pas être référencé (utilisé)
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Essayez-le vous-même

Erreur de syntaxe

Si vous calculez un code avec une erreur de syntaxe, il SyntaxError Lancé :

Exemple

try {
    eval("alert('Hello)");   // Manquer 'produira une erreur
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

Essayez-le vous-même

Erreur de type

Si la valeur que vous utilisez n'est pas dans la gamme des valeurs attendues, alors TypeError Lancé :

Exemple

var num = 1;
try {
    num.toUpperCase();   // Vous ne pouvez pas convertir un nombre en majuscules
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Essayez-le vous-même

Erreur URI

Si vous utilisez des caractères illégaux dans une fonction URI, alors URIError Lancé :

Exemple

try {
    decodeURI("%%%");   // Vous ne pouvez pas encoder ces pourcentages en URI
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Essayez-le vous-même

Propriétés non standard de l'objet Error

Mozilla et Microsoft ont défini des propriétés non standard de l'objet error :

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

Ne pas utiliser ces propriétés sur des sites publics. Elles ne fonctionnent pas sur tous les navigateurs.