注:本文为 《 JavaScript 完全手册(2018版) 》第14节,你可以查看该手册的完整目录。

JavaScript 中的分号是可选的。 我个人偏好是我的代码中避免使用分号,但也有很多人使用分号。

有一件大家看起来不可思议的事情就是,JavaScript 因为该不该使用分号而划分成了2个社区。 有些人无论如何都喜欢随时使用分号。 其他人则更喜欢避免使用它们。

我也是使用分号多年,在 2017 年秋天,我决定尝试尽量地避免使用它们,我确实设置了 Prettier 来自动删除代码中的分号,除非有特定的代码构造需要它们。

现在我发现避免使用分号是很自然的,我认为代码看起来更好,阅读更清晰。

JavaScript 并不严格要求使用分号。 当有一个需要分号的地方时,JavaScript 会在解析时自动添加。

执行此操作的过程称为自动插入分号。

了解必须使用分号的规则非常重要,以避免编写产生错误的代码,因为它们的行为可能会与您预期的不同。

JavaScript 自动插入分号 的规则

JavaScript 并不是在所有换行处都填补分号:只有在缺少了分号就无法正确解析代码的时候,JavaScript才会填补分号。在解析源代码期间,要是发现以下特定的情况时,JavaScript 解析器 将会自动添加分号 :

当下一行代码开始会破坏当前一行的代码时( JavaScript 代码可以写在多行中 )。如果一条语句以(、[、/、+或-开始,那么它极有可能和前面一条语句合在一起解析。

当下一行以 } 开头时,或者以 } 结束闭合当前代码块时

当解析到达源代码文件的末尾时

当前行 return 语句后面紧跟着换行时

当前行 break 语句后面紧跟着换行时

当前行 throw 语句后面紧跟着换行时

当前行 continue 语句后面紧跟着换行时

不符合你预期的代码示例

基于上面这些规则,这里有一些例子。

先来看看这个:

const hey = 'hey'

const you = 'hey'

const heyYou = hey + ' ' + you

['h', 'e', 'y'].forEach((letter) => console.log(letter))

您将收到错误 Uncaught TypeError: Cannot read property 'forEach' of undefined ,因为基于规则1 JavaScript 尝试将代码解析为:

const hey = 'hey';

const you = 'hey';

const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

还有类似下面的代码:

(1 + 2).toString()

这里会打印 3。

const a = 1

const b = 2

const c = a + b

(a + b).toString()

而这里的代码会引发 TypeError: b is not a function 异常,因为 JavaScript 试图将其解释为:

const a = 1

const b = 2

const c = a + b(a + b).toString()

您认为此代码在 alert 中显示为“0”:

1 + 1

-1 + 1 === 0 ? alert(0) : alert(2)

但其实显示 2 ,因为规则1 的 JavaScript 将其解释为:

1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)

再来看看下面的注释

var // 这一行不会插入分号 ,因为 下一行的代码不会破坏当前行的代码

a = 1 // 这一行会插入分号

let b = 2

// 再比如这种情况,你的原意可能是定义 `a` 变量,再执行 `(a + 3).toString()`,

// 但是其实 JavaScript 解析器解析成了,`var a = 2(a + 3).toString()`,

// 这时会抛出错误 Uncaught TypeError: 2 is not a function

var a = 2

(a + 3).toString()

// 同理,下面的代码会被解释为 `a = b(function(){...})()`

a = b

(function(){

...

})()

另一个基于规则 4 的例子:

(() => {

return

{

color: 'white'

}

})()

您希望这个立即调用函数的返回值是一个包含 color 属性的对象,但事实并非如此。 相反,它是 undefined ,因为 JavaScript 在 return 后插入分号。

相反,您应该在 return 后立即放置花括号 {,因为当前行 return 语句后面紧跟着换行时 ,JavaScript 解析器将会自动添加分号:

(() => {

return {

color: 'white'

}

})()

结论

有些人非常坚持使用分号。 老实说我并不喜欢使用分号,很多工具为我们提供了不使用分号的选项,我们完全可以避免使用分号。但是我们仍然需要注意一些细节,即使大多数情况下这些基本场景不会在我们的代码中出现。

当然这是个人的喜好问题,我也不会试图说服你避免使用分号。

使用分号的一些规则:

请注意 return 语句。 如果你想返回一些东西,把它添加到与 return 同一行上(同样用于 break ,throw ,continue)。

永远不要用 (、[、/、+或- 开始一行,这些可能与前一行连接以形成函数调用或数组元素引用。

最后,始终测试您的代码,以确保结果是你想要的。

html分号的作用,JavaScript 中的分号(;) – JavaScript 完全手册(2018版)相关推荐

  1. javascript 分号_让我们谈谈JavaScript中的分号

    javascript 分号 要使用它们,还是不使用它们- (To use them, or not to use them-) Semicolons in JavaScript divide the ...

  2. javascript 分号_JavaScript中的分号

    javascript 分号 Semicolons in JavaScript divide the community. Some prefer to use them always, no matt ...

  3. 理解JavaScript中的原型继承(2)

    两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...

  4. C++、Java、JavaScript中的异常处理(Exception)

    编程思想之异常处理 什么叫异常处理? 什么叫异常(Exception)?顾名思义就是非正常的情况,出现了不希望出现的意外,异常处理就是遇到这种意外时准备的对策和解决方案.比如您开着一辆劳斯莱斯在公路上 ...

  5. JavaScript中的ParseInt的用法

    JavaScript中的ParseInt JavaScript中的parseInt JavaScript数据类型转换分两种: 自动类型转换:会转换不同的类型数据的运算,自动转换为相同类型运算. 强制类 ...

  6. JavaScript 中的内存泄露模式

    JavaScript 是用来向 Web 页面添加动态内容的一种功能强大的脚本语言.它尤其特别有助于一些日常任务,比如验证密码和创建动态菜单组件.JavaScript 易学易用,但却很容易在某些浏览器中 ...

  7. 如何在 JavaScript 中实现拖放

    来源:http://www.javaeye.com/post/152142 译者说明: 终于完成了全文的翻译,由于时间比较参促,文章没有过多的校正与润色,阅读过程中难免会有些许生硬或不准确的感觉,请大 ...

  8. JavaScript中BOM操作

    Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...

  9. JavaScript中DOM操作

    Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...

最新文章

  1. 104. Maximum Depth of Binary Tree
  2. 从零写一个编译器(一):输入系统和词法分析
  3. [css] body{height:100%}和html,body{height:100%}有什么区别?为什么html要设置height:100%呢,html不就是整个窗口吗?
  4. 传智播客java测试题_传智播客Java基础综合测试题
  5. 人工智障学习笔记——深度学习(4)生成对抗网络
  6. linux proc sys,对/proc和/sys的一些理解
  7. K8S中如何跨namespace 访问服务?为什么ping不通ClusterIP?
  8. Spring Boot入口类
  9. 获取火山无水印视频方法
  10. 征服游戏 Floyd算法
  11. android自定义四边形,以编程方式在Android中创建平行四边形绘图
  12. Skype for Business Web 应用
  13. matlab中filtfilt函数解析
  14. 注册 Ironic 裸金属节点并部署裸金属实例
  15. 确定性网络:从“尽力而为”到“确定承诺”
  16. 我为什么要累死自己不挣钱?
  17. svn 插件选择 Subclipse与Subversive比较
  18. {LeetCode} 518. CoinChange2
  19. C语言 - 制作一个可以容纳一千人的本地通讯录
  20. Bank相关11_8583报文手动组包——详细分析每个示范域

热门文章

  1. python猫咪藏在哪个房间_Python 画猫咪
  2. [附源码]Python计算机毕业设计SSM慧学IT精品课程网站(程序+LW)
  3. 微信为部分iPhone用户重新支持CallKit
  4. 华为Mate 10系列发布,人工智能加持!体验如何?
  5. python读书笔记_python读书笔记1
  6. Axure9 自定义下拉列表
  7. TI CC3200 Launchpad 用UniFlash下载程序到Flash
  8. e站app里站hosts_科普e站安装运行 助推标准落地生根
  9. 酒店商场地铁站刷脸应用场景无处不在
  10. C语言文件读写模式参数