JavaScript 错误 - Throw 和 Try to Catch

news2024/9/23 5:35:03

try 语句使您能够测试代码块中的错误。

catch 语句允许您处理错误。

throw 语句允许您创建自定义错误。

finally 使您能够执行代码,在 try 和 catch 之后,无论结果如何。

实例

在本例中,我们通过 adddlert 编写警告代码来故意制造了一个错误

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>

    <script>
        try {
            adddlert("欢迎您,亲爱的用户!");
        }
        catch (err) {
            document.getElementById("demo").innerHTML = err.message;
        }
    </script>

</body>

</html>
//adddlert is not defined

JavaScript 将 adddlert 捕获为一个错误,然后执行代码来处理该错误。

JavaScript try 和 catch

try 语句允许您定义一个代码块,以便在执行时检测错误。

catch 语句允许你定义一个要执行的代码块,如果 try 代码块中发生错误。

JavaScript 语句 trycatch 成对出现:

try {
     供测试的代码块
}
 catch(err) {
     处理错误的代码块
}

JavaScript 抛出错误

当发生错误时,JavaScript 通常会停止并产生错误消息。

技术术语是这样描述的:JavaScript 将抛出异常(抛出错误)

JavaScript 实际上会创建带有两个属性的 Error 对象namemessage

throw 语句

throw 语句允许您创建自定义错误。

从技术上讲您能够抛出异常(抛出错误)

异常可以是 JavaScript 字符串、数字、布尔或对象:

throw "Too big";    // 抛出文本
throw 500;          //抛出数字

如果把 throwtrycatch 一同使用,就可以控制程序流并生成自定义错误消息。

<!DOCTYPE html>
<html lang="en">

<body>
    <p>请输入5-10之间的数字</p>
    <input id="demo" type="text">
    <button type="button" onclick="myFunction()">请输入</button>
    <P id="p01"></P>
    <script>
        function myFunction(){
            var message,x;
            message=document.getElementById("p01");
            message.innerHTML="";
            x=document.getElementById("demo").value;
            try{
                if(x=="")throw "是空的";
                if(isNaN(x))throw "不是数字";
                x=Number(x);
                if(x<5) throw "太小";
                if(x>10)throw "太大";
            }
            catch(err){
                message.innerHTML="输入:"+err;
            }
        }
    </script>
</body>
</html>

输入前:

输入后:

HTML 验证

以上代码仅仅是一个例子。

现代浏览器通常会结合 JavaScript 与内置的 HTML 验证,通过使用在 HTML 属性中定义的预定义的验证规则:

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

finally 语句

finally 语句允许您在 try 和 catch 之后执行代码,无论结果:

try {
     // 供测试的代码块
}
 catch(err) {
     // 处理错误的代码块
} 
finally {
     // 无论结果如何都执行的代码块
}

实例

<!DOCTYPE html>
<html lang="en">

<body>
    <p>请输入5-10之间的数字</p>
    <input id="demo" type="text">
    <button type="button" onclick="myFunction()">请输入</button>
    <P id="p01"></P>
    <script>
        function myFunction() {
            var message, x;
            message = document.getElementById("p01");
            message.innerHTML = "";
            x = document.getElementById("demo").value;
            try {
                if (x == "") throw "是空的";
                if (isNaN(x)) throw "不是数字";
                x = Number(x);
                if (x < 5) throw "太小";
                if (x > 10) throw "太大";
            }
            catch (err) {
                message.innerHTML = "输入:" + err;
            }
            finally {
                document.getElementById("demo").value = "";
            }
        }
    </script>
</body>

</html>

Error 对象

JavaScript 拥有当错误发生时提供错误信息的内置 error 对象。

error 对象提供两个有用的属性:namemessage

Error 对象属性

属性

描述

name

设置或返回错误名

message

设置或返回错误消息(一条字符串)

Error Name Values

error 的 name 属性可返回六个不同的值:

错误名

描述

EvalError

已在 eval() 函数中发生的错误

RangeError

已发生超出数字范围的错误

ReferenceError

已发生非法引用

SyntaxError

已发生语法错误

TypeError

已发生类型错误

URIError

在 encodeURI() 中已发生的错误

Eval 错误

EvalError 指示 eval() 函数中的错误。

更新版本的 JavaScript 不会抛出任何 EvalError。请使用 SyntaxError 代替。

范围错误

RangeError 会在您使用了合法值的范围之外的数字时抛出。

例如:您不能将数字的有效位数设置为 500。

实例

var num = 1;
try {
    num.toPrecision(500);   // 数无法拥有 500 个有效数
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}
//RangeError

引用错误

假如您使用(引用)了尚未声明的变量,则 ReferenceError 会被抛出:

实例

var x;
try {
    x = y + 1;   // y 无法被引用(使用)
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}
//ReferenceError

语法错误

假如您计算带语法错误的代码,会 SyntaxError 被抛出:

实例

try {
    eval("alert('Hello)");   // 缺少 ' 会产生错误
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}
//SyntaxError

类型错误

假如您使用的值不在期望值的范围之内,则 TypeError 被抛出:

实例

var num = 1;
try {
    num.toUpperCase();   // 您无法将数字转换为大写
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}
//TypeError

URI 错误

假如您在 URI 函数中使用非法字符,则 URIError 被抛出:

实例

try {
    decodeURI("%%%");   // 您无法对这些百分号进行 URI 编码
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}
//URIError

非标准的 Error 对象属性

Mozilla 和 Microsoft 定义了非标准的 error 对象属性:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2050802.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

实用库/函数之string的用法

目录 1.使用: 2.定义 3.访问(两种方式) (1)通过下标访问(像字符数组那样) (2)通过迭代器访问 4.常用函数 (1)operator+=:string的加法,将两个string直接拼接起来 (2)compare operator:两个string类型可以直接使用==、!=、<、<=、>、>=比较大…

<数据集>红绿灯识别数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;7884张 标注数量(xml文件个数)&#xff1a;7884 标注数量(txt文件个数)&#xff1a;7884 标注类别数&#xff1a;3 标注类别名称&#xff1a;[light_green, light_red, light_yellow] 序号类别名称图片数框数1lig…

数据结构与算法 - 分治

一、概述 分治思想 将大问题划分为两个到多个子问题子问题可以继续拆分成更小的子问题&#xff0c;直到能简单求解如有必要&#xff0c;将子问题的解进行合并&#xff0c;得到原始问题的解 1. 二分查找 public static int binarySearch(int[] a, int target) {return recursi…

遇到的几个iOS问题

1 unable to boot the simulator 跑模拟器的时候遇到这个报错&#xff0c; 解决方法 处理办法&#xff1a; 删除升级之前的模拟器缓存&#xff0c;重启模拟器。删除路径&#xff1a;~/Library/Developer/CoreSimulator/Cache 注意&#xff1a;后面可能还会复现这个报错&#x…

计算机毕业设计选题推荐-养老院管理系统-Java/Python项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

vue2项目支持@用户的文本域,使用at-textarea实现

vue2项目支持用户的文本域&#xff0c;使用at-textarea 第一步安装at-textarea npm install at-textarea第二步引入并注册 import AtTextarea from "at-textarea" components:{AtTextarea }第三步使用 <AtTextarea:AtList"AtList":AtConfig"{k…

CData Drivers for Cosmos DB Crack

CData Drivers for Cosmos DB Crack   Key Features of CData Drivers for Cosmos DB: Multi-API Support: Compatibility with various Cosmos DB APIs, such as SQL, MongoDB, Cassandra, Gremlin, and Table, allows for data model flexibility. SQL Query Execution: A…

Frida 的下载和安装

首先要安装好 python 环境 安装 frida 和 工具包 pip install frida frida-tools 查看版本&#xff1a; frida --version 16.4.8 然后到 github 上下载对应 server &#xff08; 和frida 的版本一致 16.4.8&#xff09; Releases frida/frida (github.com) 查看手机或…

计算机毕业设计选题推荐-高校实验室管理系统-Java/Python项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

CommunityToolkit.MVVM

前言 MVVM工具包&#xff0c;以前名为 Microsoft.Toolkit.Mvvm 由 Microsoft 维护和发布&#xff0c;是 .NET Foundation 的一部分。 支持&#xff1a;.NET Standard 2.0、 .NET Standard 2.1 和 .NET 6(UI Framework 不可知&#xff0c;基本使用没有问题/编译特性用不了) 注…

C语言-写一函数,实现两个字符串的比较。即自己写一个strcmp函数,函数原型为 int strcmp(char *pl,char *p2);

题目要求&#xff1a; 17.写一函数,实现两个字符串的比较。即自己写一个strcmp函数,函数原型为 int strcmp(char *pl,char *p2); 设p1指向字符串s1&#xff0c;p2指向字符串s2。要求当s1s2时,返回值为0;若s1≠s2,返回它们二者第1个不同字符的 ASCI1码差值(如"BOY"与…

微信小程序--28(npm包)

目录 一、小程序对npm的支持与限制&#xff0c; 二、什么是Vant Weapp 三、安装Vant组件库 &#xff08;一&#xff09;通过npm安装 &#xff08;二&#xff09;构建npm包 &#xff08;三&#xff09;修改 app.json 一、小程序对npm的支持与限制&#xff0c; 小程序已经支…

STM32标准库学习笔记-6.定时器-输入捕获

参考教程&#xff1a;【STM32入门教程-2023版 细致讲解 中文字幕】 定时器输入捕获 IC&#xff08;Input Capture&#xff09;输入捕获输入捕获模式下&#xff0c;当通道输入引脚出现指定电平跳变时&#xff0c;当前CNT的值将被锁存到CCR中&#xff0c;可用于测量PWM波形的频率…

一起看下halcon逻辑结构

halcon中结构包括顺序结构、分支结构、循环结构三种&#xff0c;不存在跳转的结构语句。 注意cntinue:结束本次循环,break跳出本次循环 选择结构&#xff1a; 1.if…end if 2.if…else…end if 3.if…elseif…elseif…end if 循环结构&#xff1a; 1.while()…endwhile …

<STC32G12K128入门第十二步>STC32G低功耗设计

前言 本文主要讲STC32G的低功耗设计,包括软件设计和硬件设计。其中有软件有一个问题当时困扰了我几个小时。都是精华 一、STC32G低功耗硬件设计 STC32G的硬件设计思路,最基本的就是需要考虑使用低功耗的硬件,比如ldo或者dc-dc需要考虑他的静态功耗,最好选择ua级别的。然…

【Hot100】LeetCode—206. 反转链表

目录 1- 思路递归法 2- 实现⭐206. 反转链表——题解思路 3- ACM 实现 原题连接&#xff1a;206. 反转链表 1- 思路 递归法 递归三部曲 ①终止条件&#xff1a;遇到 head null || head.nextnull 的时候②递归逻辑&#xff1a;定义 cur &#xff0c;cur 执行递归逻辑&#xff…

<数据集>商品条形码识别数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;3748张 标注数量(xml文件个数)&#xff1a;3748 标注数量(txt文件个数)&#xff1a;3748 标注类别数&#xff1a;1 标注类别名称&#xff1a;[Barcode] 序号类别名称图片数框数1Barcode37484086 使用标注工具&am…

4. 寻找两个正序数组的中位数(困难)

4. 寻找两个正序数组的中位数 1. 题目描述2.详细题解3.代码实现3.1 Python3.2 Java 1. 题目描述 题目中转&#xff1a;4. 寻找两个正序数组的中位数 2.详细题解 两个有序数组&#xff0c;寻找二者的中位数&#xff0c;最直观的方法是先归并这两个数组为一个有序数组&#x…

SQLite数据库的创建和升级

SQLite数据库的创建和升级 在刚开始接触Android的时候&#xff0c;我甚至都不敢相信&#xff0c;Android系统竟然是内置了数据库的&#xff01;好吧&#xff0c;是我太孤陋寡闻了。SQLite是一款轻量级的关系型数据库&#xff0c;它的运算速度非常快&#xff0c;占用资源很少&a…