如何防止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 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
基于Angularjs实现分页功能
May 30 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
css图片自适应大小
2007/11/28 Javascript
js计算页面刷新的次数
2009/07/20 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
Python列表解析配合if else的方法
2018/06/23 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
Python测试线程应用程序过程解析
2019/12/31 Python
python如何写try语句
2020/07/14 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
财务经理的岗位职责
2013/12/17 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
环卫工人慰问信
2015/02/15 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS