JavaScript-fejl Prøv Catch Throw

Indholdsfortegnelse

    Vis indholdsfortegnelse

kast, og prøv...fang...til sidst

try-sætningen definerer en kodeblok, der skal køres (for at prøve).

catch-sætningen definerer en kodeblok til at håndtere enhver fejl.

finally-sætningen definerer en kodeblok, der skal køres uanset resultatet.

throw-sætningen definerer en tilpasset fejl.

Der vil ske fejl!

Ved udførelse af JavaScript-kode kan forskellige fejl forekomme.

Fejl kan være kodefejl lavet af programmøren, fejl som skyldes forkert input og andre uforudsigelige ting.

Eksempel

I dette eksempel har vi stavet "alert" forkert som "adddler" for bevidst at producere en fejl:

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

Prøv det selv →

<!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 fanger adddlert som en fejl og udfører fange kode til Håndter det.

try ... catch

try-sætningen giver dig mulighed for at definere en kodeblok, der skal være testet for fejl, mens den udføres.

catch-sætningen giver dig mulighed for at definere en kodeblok til udføres, hvis der opstår en fejl i prøveblokken.

JavaScript-sætningerne try og catch komme i par:

try {
    Block of code to try
}
catch(err) {
    Block of code to handle errors
}

JavaScript kaster fejl

Når der opstår en fejl, vil JavaScript normalt stoppe og generere en fejlmeddelelse.

Den tekniske term for dette er: JavaScript vil kaste en undtagelse (smid en fejl).

JavaScript vil faktisk oprette et Fejlobjekt med to egenskaber: navn og besked.

kast-erklæringen

throw-sætningen giver dig mulighed for at oprette en brugerdefineret fejl.

Teknisk set kan du smide en undtagelse (smid en fejl).

Undtagelsen kan være en JavaScript streng, et nummer, et Boolean eller et objekt:

throw "Too big";    // throw a text
throw 500;          // throw a number

Hvis du bruger kast sammen med try og fangst, du kan styre programmet flow og generere brugerdefinerede fejlmeddelelser.

Eksempel på inputvalidering

Dette eksempel undersøger input. Hvis værdien er forkert, en undtagelse (err) kastes.

Undtagelsen (err) fanges af catch-sætningen, og en brugerdefineret fejlmeddelelse vises:

<!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>

Prøv det selv →

<!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 validering

Koden ovenfor er kun et eksempel.

Moderne browsere vil ofte bruge en kombination af JavaScript og 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 kan læse mere om formularvalidering i et senere kapitel i denne øvelse.

endelig-erklæringen

finally-sætningen lader dig udføre kode, efter at have prøvet og fangst, uanset resultatet:

Syntaks

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
}

Eksempel

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 = "";
    }
}

Prøv det selv →

<!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>

Fejlobjektet

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

Fejlobjektet giver to nyttige egenskaber: navn og meddelelse.

Fejl Objektegenskaber

name

Indstiller eller returnerer et fejlnavn

message

Indstiller eller returnerer en fejlmeddelelse (en streng)

Fejlnavneværdier

Seks forskellige værdier kan returneres af egenskaben fejlnavn:

EvalError

Der er opstået en fejl i eval()-funktionen

RangeError

Et tal "uden for rækkevidde" er opstået

ReferenceError

Der er opstået en ulovlig reference

SyntaxError

Der er opstået en syntaksfejl

TypeError

Der er opstået en typefejl

URIError

En fejl i encodeURI() er opstået

De seks forskellige værdier er beskrevet nedenfor.

Eval fejl

En EvalError indikerer en fejl i eval()-funktionen.

Nyere versioner af JavaScript kaster ikke EvalError. Brug SyntaxError i stedet.

Områdefejl

En RangeError vises, hvis du bruger et tal, der er uden for rækken af juridiske værdier.

For eksempel: Du kan ikke indstille antallet af signifikante cifre i et tal til 500.

Eksempel

let num = 1;
try {
    num.toPrecision(500);   // A number cannot have 500 significant digits
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Prøv det selv →

<!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>

Referencefejl

En ReferenceError vises, hvis du bruger (reference) en variabel der ikke er deklareret:

Eksempel

let x = 5;
try {
  x = y + 1;   // y cannot be used (referenced)
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Prøv det selv →

<!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>

Syntaks fejl

En SyntaxError vises, hvis du forsøger at evaluere kode med en syntaks fejl.

Eksempel

try {
  eval("alert('Hello)");   // Missing ' will produce an error
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

Prøv det selv →

<!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>

Skriv fejl

En TypeError vises, hvis du bruger en værdi, der er uden for række forventede typer:

Eksempel

let num = 1;
try {
  num.toUpperCase();   // You cannot convert a number to upper case
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

Prøv det selv →

<!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-fejl (Uniform Resource Identifier).

En URIERror fremkommer, hvis du bruger ulovlige tegn i en URI-funktion:

Eksempel

try {
    decodeURI("%%%");   // You cannot URI decode percent signs
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

Prøv det selv →

<!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>

Ikke-standard fejlobjektegenskaber

Mozilla og Microsoft definerer nogle ikke-standard fejlobjektegenskaber:

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

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

Fuldfør fejlreference

For en fuldstændig reference til Error-objektet, gå til vores Complete JavaScript-fejlreference.