如何防止JavaScript自动插入分号


Posted in Javascript onNovember 05, 2015

 在 JavaScript 中,行尾的分号有一种自动插入机制,这样子,可以容忍某些朋友忽略了输入分号。 当然你最好养成输入分号的习惯,同时掌握 JavaScript 是如何处理忽略输入分号的情况的,因为这种知识有助于你理解没有分号的代码。

JavaScript语言有一个机制:在解析时,能够在一句话后面自动插入一个分号,用来修改语句末尾遗漏的分号分隔符。然而,由于这个自动插入的分号与JavaScript语言的另一个机制发生了冲突,即所有空格符都被忽略,因此程序可以利用空格格式化代码。

    这两种机制的冲突,很容易掩盖更为严重的解析错误。有时会不合时宜地插入分号。例如,在return语句中自动插入分号将会导致这样的后果:如果return语句要返回一个值,这个值的表达式的开始部分必须和return在同一行上,例如:

var f = function(){
 return
 {
 status: true
 };
 }

    看起来这里要返回一个包含status成员元素的对象。不幸的是,JavaScript自动插入分号让它返回了undefined,从而导致下面真正要返回的对象被忽略。

    当自动插入分号导致程序被误解时,并不会有任何警告提醒。如果把{放在上一行的尾部而不是下一行的头部,就可以避免该问题,例如:

var f = function(){
 return {
 status: true
 };
 }

    为了避免省略分号引起的错误,建议养成好的习惯,不管一行内语句是否完整,只要是完整的语句都必须增加分号以表示句子结束。

    为了方便阅读,当长句子需要分行显示时,在分行时应确保一行内不能形成完整的逻辑语义。例如,下面代码是一条连续赋值的语句,通过分行显示可以更清楚地查看它们的关系。这种分行显示,由于一行内不能形成独立的逻辑语义,因此JavaScript不会把每一行视为独立的句子,从而不会产生歧义。

var a =
 b =
 c = 4;

    以上语句在一行内显示如下: var a = b = c = 4;

    对于下面这条语句,如果不能正确分行显示,就很容易产生歧义。该句子的含义:定义一个变量i,然后为其赋值,如果变量a为true,则赋值为1,否则就判断变量b,如果b为true,则赋值为2,否则就判断变量c,如果c为true,则赋值为3,否则赋值为4.

var i = a ? 1 : b ? 2 : c ? 3 : 4;

    下面的分行显示就是错误的,因为表达式a ? 1: b能够形成独立的逻辑语义,所以JavaScript会自动在其后添加分号来表示一个独立的句子。

var i = a ? 1: b
 ? 2 : c
 ? 3 : 4;

    安全的方法应该采用如下的分行显示,这样每一行都不能形成独立的语义。

var i = a ? 1
 : b ? 2
 : c ? 3
 : 4;

    总之,在编写代码时,应养成使用分号结束句子的良好习惯,凡是完整的句子就应该使用分号进行分隔。分行显示的句子应该确保单行不容易形成独立的合法的逻辑语义

PS:示例详解javascript自动在行尾添加分号

 分号(;),通常会用在一行语句的结尾,代码如下:

var webName = "三水点靠木";
var url = 3water.com;

上面的代码,在每一个声明语句后面都添加了分号,这不用多解释。

var webName = "三水点靠木"
var url = 3water.com

其实分号也完全可以省略,但是省略的这个分号,会在编译阶段自动为其添加分号。
再来看一段代码实例:

function done(webName){
 return
 webName
}
console.log(done("三水点靠木"));

由于编译器会在每一行后面都自动添加了分号,所以输出值undefined,不是"三水点靠木"。

Javascript 相关文章推荐
繁简字转换功能
Jul 19 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
js实现带搜索功能的下拉框
Jan 11 Javascript
javascript常用函数(2)
Nov 05 #Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 #Javascript
javascript常用函数(1)
Nov 04 #Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 #Javascript
jQuery多条件筛选如何实现
Nov 04 #Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 #Javascript
js数组去重的5种算法实现
Nov 04 #Javascript
You might like
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
Function eregi is deprecated (解决方法)
2013/06/21 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
react 父子组件之间通讯props
2018/09/08 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
财务务虚会发言材料
2014/10/20 职场文书
单位作风建设自查报告
2014/10/23 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
spring boot中nativeQuery的用法
2021/07/26 Java/Android