JavaScript-fel Prova Catch Throw

Innehållsförteckning

    Visa innehållsförteckning

kasta och försök...fånga...äntligen

try-satsen definierar ett kodblock som ska köras (att försöka).

catch-satsen definierar ett kodblock för att hantera eventuella fel.

finally-satsen definierar ett kodblock som ska köras oavsett resultatet.

throw-satsen definierar ett anpassat fel.

Fel kommer att hända!

När JavaScript-kod körs kan olika fel inträffa.

Fel kan vara kodningsfel gjorda av programmeraren, fel som beror på fel input och andra oförutsägbara saker.

Exempel

I det här exemplet stavade vi fel "alert" som "adddler" för att medvetet skapa ett fel:

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

Prova själv →

<!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 fångar adddlert som ett fel och kör fånga kod till hantera det.

try ... catch

try-satsen låter dig definiera ett kodblock som ska vara testas för fel medan den körs.

catch-satsen låter dig definiera ett kodblock till exekveras, om ett fel uppstår i försöksblocket.

JavaScript-satserna try och catch kom i par:

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

JavaScript kastar fel

När ett fel uppstår kommer JavaScript normalt stoppa och generera ett felmeddelande.

Den tekniska termen för detta är: JavaScript kommer att kasta en undantag (släng ett fel).

JavaScript skapar faktiskt ett Felobjekt med två egenskaper: namn och meddelande.

kast-utlåtandet

throw-satsen låter dig skapa ett anpassat fel.

Tekniskt sett kan du kasta ett undantag (kasta ett fel).

Undantaget kan vara en sträng för JavaScript, ett nummer, ett Boolean eller ett objekt:

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

Om du använder kast tillsammans med försök och fångst, du kan styra programmet flöde och generera anpassade felmeddelanden.

Exempel på ingångsvalidering

Detta exempel undersöker input. Om värdet är fel, ett undantag (err) kastas.

Undantaget (err) fångas upp av catch-satsen och ett anpassat felmeddelande visas:

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

Prova själv →

<!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 ovan är bara ett exempel.

Moderna webbläsare använder ofta en kombination av JavaScript och inbyggd HTML validering, med fördefinierade valideringsregler definierade i HTML-attribut:

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

Du kan läsa mer om formulärvalidering i ett senare kapitel i denna handledning.

äntligen uttalande

finally-satsen låter dig köra kod efter att ha försökt och fånga, oavsett resultatet:

Syntax

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
}

Exempel

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

Prova själv →

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

Felobjektet

JavaScript har ett inbyggt felobjekt som ger felinformation när ett fel uppstår.

Felobjektet har två användbara egenskaper: namn och meddelande.

Fel Objektegenskaper

name

Ställer in eller returnerar ett felnamn

message

Ställer in eller returnerar ett felmeddelande (en sträng)

Felnamnsvärden

Sex olika värden kan returneras av egenskapen error name:

EvalError

Ett fel har inträffat i eval()-funktionen

RangeError

Ett nummer "utom räckvidd" har inträffat

ReferenceError

En olaglig referens har inträffat

SyntaxError

Ett syntaxfel har uppstått

TypeError

Ett typfel har uppstått

URIError

Ett fel i encodeURI() har inträffat

De sex olika värdena beskrivs nedan.

Eval fel

En EvalError indikerar ett fel i eval()-funktionen.

Nyare versioner av JavaScript ger inte EvalError. Använd SyntaxError istället.

Områdesfel

En RangeError visas om du använder ett nummer som är utanför rättsliga värden.

Till exempel: Du kan inte ställa in antalet signifikanta siffror i ett nummer till 500.

Exempel

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

Prova själv →

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

Referensfel

En ReferenceError visas om du använder (referens) en variabel som inte har deklarerats:

Exempel

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

Prova själv →

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

Syntaxfel

En SyntaxError visas om du försöker utvärdera kod med en syntaxfel.

Exempel

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

Prova själv →

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

Skrivfel

Ett TypeError visas om du använder ett värde som ligger utanför utbud av förväntade typer:

Exempel

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

Prova själv →

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

Ett URIERror visas om du använder olagliga tecken i en URI-funktion:

Exempel

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

Prova själv →

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

Egenskaper för icke-standardfelobjekt

Mozilla och Microsoft definierar några icke-standardiserade felobjektegenskaper:

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

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

Fyll i felreferens

För en fullständig referens till Error-objektet, gå till vår Complete JavaScript-felreferens.