踩坑描述:

采用iframe标签来实现txt格式的文件预览,在预览方法js逻辑中,打印语句先行,再是处理预览逻辑。反复调试,都无法实现预览,控制台表现为输出了打印内容,且经检查无误。那么推测肯定是下面逻辑出问题了(整个过程中编译器和控制台都没有任何报错或者警告信息),但反复查看验证代码逻辑没有丁点问题。最后采用注释法,句句调试,发现问题:打印语句结尾没有分号。

 

由此可见,分号在js语言中是多么重要。那么,为什么分号如此重要?

关于前端开中js语句是否应该加分号这个问题上,网上众说纷纭,详情可见(https://www.zhihu.com/question/20298345):由于亲身踩坑记录,得出结论:前端开中js语句必须加分号。

前因后果:

1. 代码中分号的作用:

作为语句的断言(EOS)用于结束一个程序语句,目的是让解析器正确解析程序。

2. JavaScript 自动分号插入机制:

JavaScript 有着自动分号插入的机制(Automatic Semicolon Insertion),简称 ASI。在ECMA-262 - Automatic Semicolon Insertion中有关 Automatic Semicolon Insertion 的明确说明。

简要归纳下,自动分号插入以换行为基础,解析器会尽量将新行并入当前行,当且仅当符合 ASI 规则时才会将新行视为独立的语句

主要有以下自动插入规则:

  1. 当新的一行并入当前行将构成非法语句不能正确解析时,将自动插入分号
  2. 当新行以}开头时,即代码块的结束位置,将自动插入分号
  3. 当以return语句结束时, 在行末自动插入分号
  4. 当以break语句结束时, 在行末自动插入分号
  5. 当以throw语句结束时,在行末自动插入分号
  6. 当以continue语句结束时, 在行末自动插入分号
  7. 当以 ES6 的 yield 语句结尾时,在行末自动插入分号
  8. ++、-- 后缀表达式作为新行的开始,在行首自动插入分号
  9. 源代码文件末尾自动插入号

如上所示,如果没加分号,运行这段代码这段代码将报错。

但归根到底,这都是ASI解析器"猜测"的结果。ASI机制毕竟只是死规则,有时也会‘会错意’。

本次踩坑记录就属于:在前置括号的情况下,解析器不会自动插入分号。导致解析错误,将打印语句和第二行的逻辑代码当做一句代码进行执行。

推荐贺师俊的回答 - 知乎 https://www.zhihu.com/question/20298345/answer/14670020

posted on 2023-03-15 17:41  Will式  阅读(171)  评论(0编辑  收藏  举报