JavaScript virheet - Throw ja Try to Catch

try Lause mahdollistaa koodikappaleen virheiden testaamisen.

catch Lause sallii sinun käsitellä virheitä.

heittää Lause sallii mukautetun virheen luomisen.

finally Se mahdollistaa koodin suorittamisen, try ja catch jälkeen, riippumatta tuloksesta.

Virheet tapahtuvat aina!

JavaScript-koodin suorittamisen aikana tapahtuu monenlaisia virheitä.

Virheet voivat olla ohjelmistokehittäjän koodausvirheet, virheelliset syötteet aiheuttamat virheet tai muut ennustamattomat ongelmat.

Esimerkki

Tässä esimerkissä me adddlert Kirjoita varoituskoodi tahallaan aiheuttaaksesi virheen:

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

Kokeile itse

JavaScript kutsuu adddlert virheeksi ja suorittaa koodia virheen käsittelyyn.

JavaScript try ja catch

try Lause sallii sinun määritellä koodikappaleen, jotta voit havaita virheet suoritettaessa.

catch Lause sallii sinun määritellä suoritettavan koodikappaleen, jos try-koodikappaleessa tapahtuu virhe.

JavaScript lauseet try ja catch Tuplaparina:

try {
     Testausta varten oleva koodikappale
}
 catch(err) {
     Virheen käsittelyn koodikappale
}

JavaScript heittää virheen

Virheen tapahtuessa JavaScript keskeyttää ja näyttää virheilmoituksen.

Tekninen termi kuvaa sitä seuraavasti：JavaScript heittää poikkeuksen (heittää virheen)。

JavaScript luo todellisuudessa poikkeuksen (heittää virheen) kaksi ominaisuutta sisältävän Error objekti:name ja message。

Heittää-lause

heittää Lause sallii mukautetun virheen luomisen.

Teknisesti voitHeittää poikkeus (heittää virheen)。

Poikkeukset voivat olla JavaScript-merkkijono, numero, totuusarvo tai objekti：

heittää "Liian suuri";    // Heittää tekstin
heittää 500;          // Heittää numeron

Jos heittää heittää ja try ja catch Käytettynä yhdessä ne voivat ohjata ohjelman suoritusvirtaa ja luoda mukautettuja virheilmoituksia.

Syötteen vahvistus

Tässä esimerkissä tarkistetaan syötettä. Jos arvo on virheellinen, heitetään poikkeus (err).

Tämä poikkeus (err) otetaan catch-lauseen vastaan ja näytetään mukautettu virheilmoitus：

<!DOCTYPE html>
<html>
<body>
<p>Syötä numero 5-10 väliltä：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Testaa syötettä</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 "Tyhjä";
         if(isNaN(x)) throw "ei ole numero";
         x = Number(x);
        if(x < 5) throw "Liian pieni";
        if(x > 10) throw "Liian suuri";
    }
    catch(err) {
        message.innerHTML = "Syöte on " + err;
    }
}
</script>
</body>
</html>

Kokeile itse

HTML-vahvistus

Tämä koodi on vain esimerkki.

Nykyiset selaimet yhdistävät yleensä JavaScriptin ja sisäänrakennetun HTML-vahvistuksen käyttämällä HTML-ominaisuuksissa määriteltyjä ennakkotarkistuslakeja：

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

Opit lisää lomakkeen vahvistuksesta tämän opetusohjelman myöhemmiltä luvuista.

finally-lause

finally Lause sallii koodin suorittamisen try ja catch jälkeen, riippumatta tuloksesta：

try {
     // Testikäyttöön tarkoitettu koodikappale
}
 catch(err) {
     // Virheen käsittelyn koodikappale
} 
finally {
     // Suoritetaan aina, riippumatta tuloksesta
}

Esimerkki

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "tyhjä";
        if(isNaN(x)) throw "ei ole numero";
         x = Number(x);
        if(x >  10) throw "liian suuri";
        if(x <  5) throw "liian pieni";
    }
    catch(err) {
        message.innerHTML = "Virhe：" + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

Kokeile itse

Error objekti

JavaScriptillä on sisäänrakennettu error -objekti, joka tarjoaa virheilmoituksia virheiden tapahtuessa.

error -objekti tarjoaa kaksi hyödyllistä ominaisuutta:name ja message。

Error objektin ominaisuudet

ominaisuus kuvaus
name Aseta tai palauta virhenimi
message Aseta tai palauta virheilmoitus (yksi merkkijono)

Error Name Values

error -objektin name -ominaisuus voi palauttaa kuusi erilaista arvoa:

virhenimi kuvaus
EvalError virhe on tapahtunut eval() -funktiossa
RangeError virhe ylittää numeron alueen
ReferenceError virheellinen viittaus on tapahtunut
SyntaxError syntaxisvirhe on tapahtunut
TypeError tyyppivirhe on tapahtunut
URIError encodeURI() -toiminnossa tapahtunut virhe

Seuraavaksi selitän nämä kuusi erilaista arvoa yksityiskohtaisesti.

Eval virhe

EvalError virheitä eval() -funktiosta.

päivitetyn JavaScriptin versio ei heitä mitään EvalError。Käytä SyntaxError korvaa.

aluevirhe

RangeError Virhe heitetään, kun käytät lukuja, joilla ei ole laillista arvojen aluetta.

Esimerkiksi：Et voi asettaa luvun tarkkuutta 500.

Esimerkki

var num = 1;
try {
    num.toPrecision(500);   // Luku ei voi olla 500有效数字
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Kokeile itse

viittausvirhe

Jos käytät (viitatat) määrittelemätöntä muuttujaa, ReferenceError virhe heitetään:

Esimerkki

var x;
try {
    x = y + 1;   // y ei voi olla viitattavissa (käytettävissä)
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Kokeile itse

syntaxisvirhe

Jos laskutat virheellistä koodia, SyntaxError Heitetään virhe:

Esimerkki

try {
    eval("alert('Hello)");   // Puuttuva ' aiheuttaa virheen
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

Kokeile itse

tyyppivirhe

Jos käytämäsi arvo ei ole odotetun arvojen alueella, TypeError Heitetään virhe:

Esimerkki

var num = 1;
try {
    num.toUpperCase();   // Et voi muuntaa numeroa isoksi
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Kokeile itse

URI-virhe

Jos käytät URI-funktiota laittomien merkkien kanssa, URIError Heitetään virhe:

Esimerkki

try {
    decodeURI("%%%");   // Et voi koodata näitä prosenttimerkkejä URI:lle
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Kokeile itse

Epästandardit Error-objektin ominaisuudet

Mozilla ja Microsoft ovat määrittäneet epästandardit error-objektin ominaisuudet:

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

Älä käytä näitä ominaisuuksia julkisilla verkkosivustoilla. Ne eivät toimi kaikissa selaimissa.