JavaScript Fel - Throw och Try to Catch

try Satsen gör det möjligt för dig att testa fel i kodblocket.

catch Satsen tillåter dig att hantera fel.

throw satsen tillåter dig att skapa anpassade fel.

finally Låter dig köra kod, efter try och catch, oavsett resultat.

Fel kommer alltid att inträffa!

När JavaScript-kod körs inträffar olika typer av fel.

Ett fel kan vara en kodningsfel av utvecklaren, ett fel orsakat av felaktig inmatning eller på grund av andra oförutsedda problem.

Exempel

I detta exempel använder vi adddlert Skriv en varningskod för att medvetet skapa ett fel:

<p id="demo"></p>
<script>
try {
    adddlert("Välkommen att besöka!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

Prova själv

JavaScript fångar adddlert som ett fel och utför kod för att hantera felet.

JavaScript try och catch

try Satsen tillåter dig att definiera ett kodblock för att under körning detektera fel.

catch Satsen tillåter dig att definiera ett kodblock som ska köras, om ett fel inträffar i en try-kodblock.

JavaScript-satser try och catch Parvis:

try {
     Kodblock för testning
}
 catch(err) {
     Kodblock för felhantering
}

JavaScript kastar ett fel

När ett fel inträffar, stoppar JavaScript vanligtvis och genererar ett felmeddelande.

Tekniska termer beskrivs på detta sätt:JavaScript kastar undantag (kasta fel)。

JavaScript skapar faktiskt undantag med två egenskaper: Error objekt:name och message。

throw-satsen

throw satsen tillåter dig att skapa anpassade fel.

Tekniskt sett kan duKasta undantag (kasta fel)。

Undantag kan vara JavaScript-sträng, nummer, boolean eller objekt:

throw "För stort";    // kasta text
throw 500;          // kasta nummer

om throw och try och catch Samtidigt användande kan styra programflödet och generera anpassade felmeddelanden.

Inmatningsvalideringsfall

Detta exempel kommer att kontrollera inmatningen. Om värdet är felaktigt, kommer ett undantag (err) att kastas.

Denna undantag (err) fångas av catch-satsen och visar ett anpassat felmeddelande:

<!DOCTYPE html>
<html>
<body>
<p>Ange ett nummer mellan 5 och 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Testa inmatning</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 "tom";
         if(isNaN(x)) throw "inte ett tal";
         x = Number(x);
        if(x < 5) throw "för litet";
        if(x > 10) throw "för stort";
    }
    catch(err) {
        message.innerHTML = "Input är " + err;
    }
}
</script>
</body>
</html>

Prova själv

HTML-validering

Ovanstående kod är bara ett exempel.

Modernt webbläsare sammankopplar ofta JavaScript med inbyggd HTML-validering genom att använda fördefinierade valideringsregler definierade i HTML-attributen:

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

Du kommer att lära dig mer om formulärvalidering i en senare avsnitt i denna handledning.

finally-satsen

finally En mening tillåter dig att köra kod efter try och catch, oavsett resultat:

try {
     // Koden för testning
}
 catch(err) {
     // Koden för att hantera fel
} 
finally {
     // Koden som alltid körs oavsett resultat
}

Exempel

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "är tomt";
        if(isNaN(x)) throw "inte ett tal";
         x = Number(x);
        if(x >  10) throw "för stort";
        if(x <  5) throw "för litet";
    }
    catch(err) {
        message.innerHTML = "Fel: " + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

Prova själv

Error objekt

JavaScript har ett inbyggt error -objekt som tillhandahåller felinformation när ett fel inträffar.

error -objektet tillhandahåller två användbara egenskaper:name och message。

Error objekt egenskaper

egenskap Beskrivning
name Ställ in eller returnera felnamn
message Ställ in eller returnera felmeddelande (en sträng)

Error Name Values

error -objektets name -egenskap kan returnera sex olika värden:

Felnamn Beskrivning
EvalError Fel som har inträffat i eval() -funktionen
RangeError Fel har inträffat utanför numerisk räckvidd
ReferenceError Olaglig hänvisning har inträffat
SyntaxError Syntaksfel har inträffat
TypeError Typerror har inträffat
URIError Fel som har inträffat i encodeURI()

Nedan förklarar vi de sex olika värdena.

Eval fel

EvalError indikationer på fel i eval() -funktionen.

Uppdaterade versioner av JavaScript kommer inte att kasta några EvalError。Använd SyntaxError ersätt.

Rangefel

RangeError kommer att kastas ut när du använder ett tal utanför det giltiga värdeområdet.

Till exempel: Du kan inte ställa in 500 siffror för ett tal.

Exempel

var num = 1;
try {
    num.toPrecision(500);   // Ett tal kan inte ha 500 giltiga siffror
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Prova själv

Hänvisningsfel

Om du använder (hänvisar till) en inte deklarerad variabel, då ReferenceError kommer att kastas ut:

Exempel

var x;
try {
    x = y + 1;   // y kan inte hänvisas till (användas)
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Prova själv

Syntaksfel

Om du räknar kod med syntaxfel, kommer SyntaxError kastas ut:

Exempel

try {
    eval("alert('Hello)");   // Brist på ' kommer att orsaka fel
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

Prova själv

Typerror

Om det värde du använder inte ligger inom förväntat värdeområde, då TypeError kastas ut:

Exempel

var num = 1;
try {
    num.toUpperCase();   // Du kan inte konvertera numret till stor bokstav
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Prova själv

URI-fel

Om du använder ogiltiga tecken i URI-funktionen, då URIError kastas ut:

Exempel

try {
    decodeURI("%%%");   // Du kan inte URI-koda dessa procenttecken
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Prova själv

Icke-standard Error-objekt-attribut

Mozilla och Microsoft har definierat icke-standard error-objekt-attribut:

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

Använd inte dessa egenskaper på offentliga webbplatser. De fungerar inte i alla webbläsare.