踩坑描述:
采用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 规则时才会将新行视为独立的语句
主要有以下自动插入规则:
- 当新的一行并入当前行将构成非法语句不能正确解析时,将自动插入分号
- 当新行以}开头时,即代码块的结束位置,将自动插入分号
- 当以return语句结束时, 在行末自动插入分号
- 当以break语句结束时, 在行末自动插入分号
- 当以throw语句结束时,在行末自动插入分号
- 当以continue语句结束时, 在行末自动插入分号
- 当以 ES6 的 yield 语句结尾时,在行末自动插入分号
- ++、-- 后缀表达式作为新行的开始,在行首自动插入分号
- 源代码文件末尾自动插入号
如上所示,如果没加分号,运行这段代码这段代码将报错。
但归根到底,这都是ASI解析器"猜测"的结果。ASI机制毕竟只是死规则,有时也会‘会错意’。
本次踩坑记录就属于:在前置括号的情况下,解析器不会自动插入分号。导致解析错误,将打印语句和第二行的逻辑代码当做一句代码进行执行。
推荐贺师俊的回答 - 知乎 https://www.zhihu.com/question/20298345/answer/14670020