Errori JavaScript - Throw e Try to Catch

try La frase ti permette di testare gli errori nel blocco di codice.

catch La frase ti permette di gestire gli errori.

lancia La frase permette di creare errori personalizzati.

finally Ti permette di eseguire il codice, dopo try e catch, indipendentemente dal risultato.

Gli errori sempre accadono!

Quando si esegue il codice JavaScript, possono verificarsi vari errori.

Gli errori possono essere errori di codifica dell'utente, errori causati da input errati o da altri problemi imprevisti.

Esempio

In questo esempio, attraverso adddlert Scrivi un codice di avviso per creare deliberatamente un errore:

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

Prova tu stesso

JavaScript cattura adddlert come un errore e poi esegue il codice per gestire l'errore.

JavaScript try e catch

try La frase ti permette di definire un blocco di codice per rilevare gli errori durante l'esecuzione.

catch La frase ti permette di definire un blocco di codice da eseguire, se si verifica un errore nel blocco di codice try.

Espressioni JavaScript try e catch Apparire in coppia:

try {
     Blocco di codice per il test
}
 catch(err) {
     Blocco di codice per la gestione degli errori
}

JavaScript lancia un errore

Quando si verifica un errore, JavaScript di solito si ferma e genera un messaggio di errore.

Il termine tecnico è descritto in questo modo:JavaScript lancia un'eccezione (lancia un errore)。

JavaScript crea effettivamente un'eccezione con due proprietà: Oggetto Error:name e message。

Frase lancia

lancia La frase permette di creare errori personalizzati.

In teoria, è possibileLancia un'eccezione (lancia un errore)。

Un'eccezione può essere una stringa, un numero, un booleano o un oggetto JavaScript:

lancia "Troppo grande";    // Lancia un testo
lancia 500;          // Lancia un numero

se si mette lancia con try e catch Utilizzati insieme, possono controllare il flusso del programma e generare messaggi di errore personalizzati.

Caso di convalida dell'input

Questo esempio verifica l'input. Se il valore è errato, viene lanciata un'eccezione (err).

L'eccezione (err) viene catturata dalla frase catch e visualizzata un messaggio di errore personalizzato:

<!DOCTYPE html>
<html>
<body>
<p>Inserisci un numero tra 5 e 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test input</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 "vuoto";
         if(isNaN(x)) throw "non è un numero";
         x = Number(x);
        if(x < 5) throw "troppo piccolo";
        if(x > 10) throw "troppo grande";
    }
    catch(err) {
        message.innerHTML = "Input è " + err;
    }
}
</script>
</body>
</html>

Prova tu stesso

Convalida HTML

Il codice sopra è solo un esempio.

I browser moderni combinano spesso JavaScript con la convalida HTML integrata, utilizzando regole di convalida predefinite definite nelle proprietà HTML:

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

Imparerai di più sulla convalida dei moduli nei capitoli successivi di questa guida.

Esegue una frase finally

finally La frase permette di eseguire codice dopo try e catch, indipendentemente dal risultato:

try {
     // Esegue un blocco di codice per il test
}
 catch(err) {
     // Esegue un blocco di codice per gestire gli errori
} 
finally {
     // Esegue un blocco di codice indipendentemente dal risultato
}

Esempio

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "è vuoto";
        if(isNaN(x)) throw "non è un numero";
         x = Number(x);
        if(x >  10) throw "troppo grande";
        if(x <  5) throw "troppo piccolo";
    }
    catch(err) {
        message.innerHTML = "Errore: " + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

Prova tu stesso

Oggetto Error

JavaScript ha un oggetto built-in error che fornisce informazioni di errore quando si verifica un errore.

l'oggetto error fornisce due proprietà utili:name e message。

Proprietà dell'oggetto Error

Proprietà Descrizione
name Imposta o restituisce il nome dell'errore
message Imposta o restituisce il messaggio di errore (una stringa)

Valori del Nome dell'Errore

L'attributo name dell'oggetto error può restituire sei valori diversi:

Nome dell'errore Descrizione
EvalError Errore verificatosi nel funzione eval()
RangeError Si è verificato un errore al di fuori dell'intervallo numerico
ReferenceError Si è verificato un riferimento illegale
SyntaxError Si è verificato un errore di sintassi
TypeError Si è verificato un errore di tipo
URIError Errore verificatosi in encodeURI()

Di seguito ti spiegherò questi sei valori diversi.

Errore Eval

EvalError indicazione di errore nel funzione eval().

Le versioni aggiornate di JavaScript non lanciano alcun tipo di EvalError。Utilizza SyntaxError invece di questo.

Errore di intervallo

RangeError verrà lanciato quando utilizzi un numero al di fuori dell'intervallo di valori validi.

Ad esempio: non puoi impostare il numero di cifre significative su 500.

Esempio

var num = 1;
try {
    num.toPrecision(500);   // Un numero non può avere 500 cifre significative
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Prova tu stesso

Errore di riferimento

Se utilizzi (riferisci) a una variabile non dichiarata, allora ReferenceError verrà lanciato:

Esempio

var x;
try {
    x = y + 1;   // y non può essere riferita (usata)
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Prova tu stesso

Errore di sintassi

Se calcoli un codice con errori di sintassi, allora SyntaxError Lanciato:

Esempio

try {
    eval("alert('Hello')");   // La mancanza di 'causerà un errore
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

Prova tu stesso

Errore di tipo

Se il valore che stai utilizzando non si trova all'interno dell'intervallo dei valori attesi, allora TypeError Lanciato:

Esempio

var num = 1;
try {
    num.toUpperCase();   // Non è possibile convertire il numero in maiuscolo
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Prova tu stesso

Errore URI

Se usi caratteri non validi nelle funzioni URI, allora URIError Lanciato:

Esempio

try {
    decodeURI("%%%");   // Non è possibile effettuare l'encoding URI su questi percento
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Prova tu stesso

Proprietà non standard dell'oggetto Error

Mozilla e Microsoft hanno definito proprietà non standard dell'oggetto error:

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

Non utilizzare queste proprietà sui siti pubblici. Non funzionano su tutti i browser.