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.
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.
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
}
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åtandetthrow
-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.
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>
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
uttalandefinally
-satsen låter dig köra kod efter att ha försökt och fånga, oavsett resultatet:
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
}
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>
JavaScript har ett inbyggt felobjekt som ger felinformation när ett fel uppstår.
Felobjektet har två användbara egenskaper: namn och meddelande.
Ställer in eller returnerar ett felnamn
Ställer in eller returnerar ett felmeddelande (en sträng)
Sex olika värden kan returneras av egenskapen error name:
Ett fel har inträffat i eval()-funktionen
Ett nummer "utom räckvidd" har inträffat
En olaglig referens har inträffat
Ett syntaxfel har uppstått
Ett typfel har uppstått
Ett fel i encodeURI() har inträffat
De sex olika värdena beskrivs nedan.
En EvalError
indikerar ett fel i eval()-funktionen.
Nyare versioner av JavaScript ger inte EvalError. Använd SyntaxError istället.
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.
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>
En ReferenceError
visas om du använder (referens) en variabel som inte har deklarerats:
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>
En SyntaxError
visas om du försöker utvärdera kod med en syntaxfel.
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>
Ett TypeError
visas om du använder ett värde som ligger utanför utbud av förväntade typer:
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>
Ett URIERror
visas om du använder olagliga tecken i en URI-funktion:
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>
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.
För en fullständig referens till Error-objektet, gå till vår Complete JavaScript-felreferens.