Errores de JavaScript - Throw y Try to Catch

try La sentencia te permite probar errores en bloques de código.

catch La sentencia te permite manejar errores.

throw Una declaración permite crear errores personalizados.

finally Te permite ejecutar código, después de try y catch, sin importar el resultado.

Los errores siempre ocurren!

Al ejecutar código JavaScript, pueden ocurrir varios errores.

Los errores pueden ser errores de codificación del programador, errores causados por entradas incorrectas o problemas imprevistos de otros tipos.

Ejemplo

En este ejemplo, mediante adddlert Escribir código de advertencia para generar un error intencional:

<p id="demo"></p>
<script>
try {
    adddlert("¡Bienvenido a la visita!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

Pruebe usted mismo

JavaScript captura adddlert como un error y luego ejecuta código para manejar ese error.

JavaScript try y catch

try La sentencia te permite definir un bloque de código para detectar errores durante su ejecución.

catch La sentencia te permite definir un bloque de código a ejecutar, si ocurre un error en el bloque de código try.

Sentencias de JavaScript try y catch Aparecen en pares:

try {
     Bloque de código para pruebas
}
 catch(err) {
     Bloque de código para manejar errores
}

JavaScript lanza errores

Cuando ocurre un error, JavaScript generalmente se detiene y muestra un mensaje de error.

El término técnico se describe así:JavaScript lanzará una excepción (lanzar error)。

JavaScript realmente crea un objeto con dos propiedades Objeto Error:name y message。

throw statement

throw Una declaración permite crear errores personalizados.

Técnicamente, puedesLanzar excepción (lanzar error)。

Una excepción puede ser una cadena de JavaScript, número, booleano o objeto:

throw "Too big";    // Lanza texto
throw 500;          // Lanza un número

Si se throw con try y catch Juntos, pueden controlar el flujo del programa y generar mensajes de error personalizados.

Caso de validación de entrada

Este ejemplo verificará la entrada. Si el valor es incorrecto, lanzará una excepción (err).

Esta excepción (err) es capturada por la declaración catch y muestra un mensaje de error personalizado:

<!DOCTYPE html>
<html>
<body>
<p>Por favor, introduce un número entre 5 y 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Probar entrada</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 "Vacío";
         if(isNaN(x)) throw "no es un número";
         x = Number(x);
        if(x < 5) throw "Demasiado pequeño";
        if(x > 10) throw "Demasiado grande";
    }
    catch(err) {
        message.innerHTML = "La entrada es " + err;
    }
}
</script>
</body>
</html>

Pruebe usted mismo

Validación HTML

El código anterior es solo un ejemplo.

Los navegadores modernos suelen combinar JavaScript con la validación integrada de HTML, utilizando reglas de validación predefinidas definidas en las propiedades HTML:

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

En las secciones posteriores de este tutorial aprenderás más sobre la validación de formularios.

finally statement

finally Una declaración permite que se ejecute código después de try y catch, sin importar el resultado:

try {
     // Se ejecuta un bloque de código para pruebas
}
 catch(err) {
     // Se ejecuta un bloque de código para manejar errores
} 
finally {
     // Se ejecuta un bloque de código independientemente del resultado
}

Ejemplo

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "está vacío";
        if(isNaN(x)) throw "no es un número";
         x = Number(x);
        if(x >  10) throw "grande";
        if(x <  5) throw "pequeño";
    }
    catch(err) {
        message.innerHTML = "Error: " + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

Pruebe usted mismo

Objeto Error

JavaScript tiene un objeto error integrado que proporciona información de error cuando ocurre un error.

el objeto error proporciona dos propiedades útiles:name y message。

Atributos del objeto Error

Atributo Descripción
name Establecer o retornar el nombre del error
message Establecer o retornar el mensaje de error (una cadena de caracteres)

Valores del Nombre del Error

La propiedad name del objeto error puede retornar seis valores diferentes:

Nombre del error Descripción
EvalError Se produjo un error en la función eval()
RangeError Se produjo un error de rango numérico
ReferenceError Se produjo una referencia ilegal
SyntaxError Se produjo un error de sintaxis
TypeError Se produjo un error de tipo
URIError Error ocurrido en encodeURI()

A continuación, le explicaremos estos seis valores diferentes.

Error de eval

EvalError indicación de errores en la función eval().

Las versiones actualizadas de JavaScript no lanzarán ningún EvalError。Por favor utilice SyntaxError en su lugar.

Error de rango

RangeError se lanzará cuando utilice un número fuera del rango de valores válidos.

Por ejemplo: no puede configurar el número de dígitos significativos del número en 500.

Ejemplo

var num = 1;
try {
    num.toPrecision(500);   // Un número no puede tener 500 dígitos significativos
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Pruebe usted mismo

Error de referencia

Si utiliza (refiere) a una variable no declarada, ReferenceError se lanzará:

Ejemplo

var x;
try {
    x = y + 1;   // y no puede ser referenciado (usado)
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Pruebe usted mismo

Error de sintaxis

Si calcula un código con errores de sintaxis, SyntaxError Arrojado:

Ejemplo

try {
    eval("alert('Hello)");   // La falta de ' causará un error
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

Pruebe usted mismo

Error de tipo

Si el valor que está utilizando no está dentro del rango de valores esperados, TypeError Arrojado:

Ejemplo

var num = 1;
try {
    num.toUpperCase();   // No puede convertir el número a mayúsculas
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Pruebe usted mismo

Error URI

Si utiliza caracteres ilegales en la función URI, entonces URIError Arrojado:

Ejemplo

try {
    decodeURI("%%%");   // No puede codificar estos porcentajes en URI
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Pruebe usted mismo

Propiedades del objeto Error no estándar

Mozilla y Microsoft definieron propiedades del objeto error no estándar:

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

No utilice estas propiedades en sitios públicos. No funcionarán en todos los navegadores.