如何防止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 相关文章推荐
javascript中的void运算符语法及使用介绍
Mar 10 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
vue-router懒加载的3种方式汇总
Feb 28 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 分页分组类
2009/12/10 PHP
第五章 php数组操作
2011/12/30 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
详解javascript高级定时器
2015/12/31 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
JS实现浏览上传文件的代码
2017/08/23 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
python实现简单爬虫功能的示例
2016/10/24 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
大学生实习思想汇报
2014/01/12 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
自立自强的名人事例
2014/02/10 职场文书
大学生工作自荐书
2014/06/16 职场文书
十佳家长事迹材料
2014/08/26 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
职工培训工作总结
2015/08/10 职场文书
如何撰写创业策划书
2019/06/27 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis