JavaScript Fejl - Throw og Try to Catch

try Sætning lader dig teste for fejl i kodeblokken.

catch Sætning lader dig håndtere fejl.

throw Sætningen tillader dig at oprette en brugerdefineret fejl.

finally Lader dig udføre kode, efter try og catch, uanset resultatet.

Fejl sker altid!

Forskellige fejl opstår, når JavaScript-kode udføres.

Fejl kan være programmørfejl, fejl forårsaget af forkert input, eller andre uforudsete problemer.

Eksempel

I dette eksempel bruger vi adddlert Skriv en advarsel kode for at med vilje skabe en fejl:

<p id="demo"></p>
<script>
try {
    adddlert("Velkommen til besøg!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

Prøv det selv

JavaScript fanger adddlert som en fejl og udfører kode til at håndtere fejlen.

JavaScript try og catch

try Sætning lader dig definere en kodeblok, der skal kontrolleres for fejl under udførelse.

catch Sætning lader dig definere en kodeblok, der skal køres, hvis der opstår en fejl i try-kodeblokken.

JavaScript Statement try og catch Opdeler sig i par:

try {
     Kodeblokken til test
}
 catch(err) {
     Kodeblokken til håndtering af fejl
}

JavaScript kaster en fejl

Når en fejl opstår, stopper JavaScript normalt og genererer en fejlmeddelelse.

Tekniske termer beskrives sådan:JavaScript kaster en undtagelse (kast fejl).

JavaScript opretter faktisk en undtagelse med to egenskaber: Error objekt:name og message.

throw sætning

throw Sætningen tillader dig at oprette en brugerdefineret fejl.

Teknisk set kan duKast undtagelse (kast fejl).

En undtagelse kan være en JavaScript-streng, tal, bool eller objekt:

throw "For stor";    // Kast tekst
throw 500;          // Kast et tal

hvis man bruger throw med try og catch Brug sammen kan de kontrollere programflowet og generere brugerdefinerede fejlmeddelelser.

Inputvalideringscase

Dette eksempel kontrollerer input. Hvis værdien er forkert, kastes en undtagelse (fejl).

Denne undtagelse (fejl) fanges af catch sætningen og viser en brugerdefineret fejlmeddelelse:

<!DOCTYPE html>
<html>
<body>
<p>Indtast et tal mellem 5 og 10:</p>
<input id="demo" type="text">
<button type="button" onclick="minFunktion()">Test input</button>
<p id="besked"></p>
<script>
function minFunktion() {
    var besked, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "Tom";
         if(isNaN(x)) throw "Ikke et tal";
         x = Number(x);
        if(x < 5) throw "For lille";
        if(x > 10) throw "For stor";
    }
    catch(err) {
        besked.innerHTML = "Indtastning er " + fejl;
    }
}
</script>
</body>
</html>

Prøv det selv

HTML-validering

Dette kodeeksempel er kun et eksempel.

Moderne browsere kombinerer ofte JavaScript med indbygget HTML-validering ved hjælp af foruddefinerede valideringsregler defineret i HTML-attributter:

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

Du vil lære mere om formularvalidering i senere kapitler i denne vejledning.

finally sætning

finally En sætning tillader dig at udføre kode efter try og catch, uanset resultat:

try {
     // Kodeblok til test
}
 catch(err) {
     // Kodeblok til fejlhåndtering
} 
finally {
     // Uanset resultat udføres denne kodeblok
}

Eksempel

function minFunktion() {
    var besked, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "Er tom";
        if(isNaN(x)) throw "Ikke et tal";
         x = Number(x);
        if(x >  10) throw "For stor";
        if(x <  5) throw "For lille";
    }
    catch(err) {
        message.innerHTML = "Fejl: " + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

Prøv det selv

Error objekt

JavaScript har et indbygget error objekt, der giver fejlinformation, når en fejl opstår.

error objektet tilbyder to nyttige egenskaber:name og message.

Error objekt egenskaber

Egenskab Beskrivelse
name Indstil eller returner fejlnavn
message Indstil eller returner fejlmeddelelse (en streng)

Error Name Values

error's name egenskab kan returnere seks forskellige værdier:

Fejlnavn Beskrivelse
EvalError Fejl, der er opstået i eval() funktionen
RangeError Fejl, der er opstået ved tallets rækkevidde, er opstået
ReferenceError Ugyldig reference er opstået
SyntaxError Syntaksfejl er opstået
TypeError Typfejl er opstået
URIError Fejl, der er opstået i encodeURI()

Nedenfor beskriver vi de seks forskellige værdier.

Eval fejl

EvalError fejlindikationer fra eval() funktionen.

Nyere versioner af JavaScript vil ikke kaste nogen EvalErrorBrug venligst SyntaxError erstat.

Rangefejl

RangeError vil blive kastet ud, når du bruger et tal uden for den gyldige værdibeskrænkelse.

For eksempel: Du kan ikke sætte et tal til at have 500 gyldige cifre.

Eksempel

var num = 1;
try {
    num.toPrecision(500);   // Et tal kan ikke have 500 gyldige cifre
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Prøv det selv

Refereringsfejl

Hvis du bruger (refererer til) en ikke-deklareret variabel, vil ReferenceError vil blive kastet ud:

Eksempel

var x;
try {
    x = y + 1;   // y kan ikke bruges (refereres til)
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Prøv det selv

Syntaksfejl

Hvis du beregner kode med syntaksfejl, vil SyntaxError Kastes:

Eksempel

try {
    eval("alert('Hello)");   // Manglende ' vil føre til en fejl
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

Prøv det selv

Typfejl

Hvis du bruger en værdi, der ikke er inden for den forventede værdibeskrænkelse TypeError Kastes:

Eksempel

var num = 1;
try {
    num.toUpperCase();   // Du kan ikke konvertere nummeret til store bogstaver
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Prøv det selv

URI-fejl

Hvis du bruger ulovlige tegn i URI-funktionen, så URIError Kastes:

Eksempel

try {
    decodeURI("%%%");   // Du kan ikke URI-kodecere disse procenttegn
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Prøv det selv

Ikke-standard Error objekt egenskaber

Mozilla og Microsoft har defineret ikke-standard error objekt egenskaber:

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

Brug ikke disse egenskaber på offentlige websteder. De virker ikke i alle browsere.