JS代码在什么位置可以换行

chaos_G 发布于2019-08-21 10:54 / 3111人阅读

摘要：一行过长的代码会影响阅读体验实际项目中，我们往往把过长的代码分成多行去写比如在中链经常要分成多行写对此本人想到一个问题就是中在什么地方换行是合法并且不破坏原有代码逻辑的探究这个问题过程中本人造了一个小玩具顾名思义它的作用就是在不破话代码的逻

一行过长的代码会影响阅读体验. 实际项目中，我们往往把过长的代码分成多行去写.
比如在js中, promise链经常要分成多行写. 对此本人想到一个问题, 就是js中, 在什么地方换行是合法并且不破坏原有代码逻辑的.

探究这个问题过程中本人造了一个小玩具, breakline, 顾名思义, 它的作用就是在不破话代码的逻辑的情况下把js代码拆成多行. 项目地址：https://github.com/flowmemo/b...

我们接下来还是谈换行的问题. 为了简单起见, 本文不讨论注释中的换行符.

换行符的作用

在一般的语言中, 换行符一般是意味着一个statement¹的结束, 分号也通常有这个作用. 但是js中换行符并没有代表statement的结束的意思. 事实上在规范中, 换行符（规范中称为line terminator)在多数情况下和空格、tab的作用是一样的, 是为了分隔token以及方便阅读, 除了...

换行符在某些情况下会触发自动分号插入（Automatic Semicolon Insertioin, 以下简称ASI）

换行符本身是token的一部分, 比如在StringLiteral（单／双引号字符串, 必须通过`来escape）, Template和TemplateSubstitutionTail(这两个就是**包起来的字符串)中.

以下为ECMA－262 7.0(也就是ES7、ES2016)规范中相应的描述：

A line terminator cannot occur within any token except a StringLiteral, Template, or TemplateSubstitutionTail. Line terminators may only occur within a StringLiteral token as part of a LineContinuation.

有了这些信息, 我们就应该知道在什么情况下可以换行了：只要你的新加的换行符不在上述的两个规则内就行.

我们再继续探究这两个规则.

ASI

EMCA规范中有一部分专门讲了ASI, 在http://www.ecma-international...

对于ASI这里就不展开细讲了, 这里只说ASI和换行相关的部分.

Offending Token

一个情况是, 换行符后的token和之前的token一起进行parse会出错, 那么换行符后的token叫做offend token. Offend token前会自动插入一个分号.
举例：

var foo
foo = 2

一共5个token, 按先后顺序是var, foo, foo, =, 2. parser先解析了前两个token, 很好, 没错, 然后接着parse下一个token foo, 出错了(因为没有一个js语法中并没有一条production包含var foo foo的形式). 于是ASI被触发, 在换行符和offend token间加了个分号. var foo就被parse成了Variable Statement, 然后后面的foo = 2也被成功parse了².

Restricted Production

Restricted production规定了触发ASI的几种特殊情况.

以下几个位置出现换行符, 即使之后的token可以继续被合法parse, 也会触发ASI

后缀自增／自减运算符之前

continue, break, return, throw, yield之后

arrow function的=>之前

所以我们要比尽量避免在上述位置加换行符（除非你知道自己是在做什么）.

Template和TemplateSubstitutionTail

这部分简而言之就是不要在表示字符串内容的部分换行. 这个很好理解了.
需要注意的是对于有替换的部分, 也就是${}的花括号内部,是可以当作普通的expression换行的
也就是说

var s = `hello ${person.name}!`

var s = `hello ${
  person
  .
  name
}!`

是相同的.

玩具：breakline

在探究这个过程中本人写了breakline. 这个工具的目的就是把你的js代码拆成多行, 同时又不对代码的功能和逻辑造成实质的影响.

总结

在实际写代码过程中, 符合普通人逻辑的“正常”的换行是没有问题的. 如果说有需要注意的地方，也就是restricted production的第二条了, continue, break, return, throw, yield这几个关键字以及=>后不要换行, 其他的地方换行的话...可以说也没什么美感了, 一般人不会那么干的.

注
[1] 关于statement和expression的区别, 可以参考http://www.2ality.com/2012/09...
[2] 实际上在foo ＝ 2后也自动插入了一个分号.

原文链接：https://flowmemo.github.io/20...

混合云专线服务在防火墙中可以对什么网络进行设置在jsp中换行 asp换行代码代码位置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86394.html

通过li-canvas轻松实现单图、多图、圆角图绘制，单行文字、多行文字、竖向文字绘制，自动换行，保

摘要：新增的是个强大的功能，估计大家平时都会用到，只是频率不高，偶尔用它合成图片，但是如果不进行封装的话，代码会很乱，所以对常用的画图绘制文字保存功能进行了封装，目前还比较满意，能够快速完成绘图任务，从容应对需求变更，只需进行简单配置即可。 Html5新增的canvas是个强大的功能，估计大家平时都会用到，只是频率不高，偶尔用它合成图片，但是如果不进行封装的话，代码会很乱，所以对canva...

source 2019-08-23 13:47 评论0 收藏0
正则与JS中的正则

摘要：注意本文将正则与中的正则分开讨论。正则零宽断言更多参考各种语言对于正则不同支持参考单行模式与多行模式通过设置正则表达式后的修饰符可开启对应的匹配模式单行模式和多行模式。最近这段时间帮同学处理一些文档，涉及到一些结构化文档的工作大部分都得使用正则表达式，之前对于正则的认识大多来源于语言书上那几页的介绍，自己也没有用过几次。这里将我之前感到模糊的概念作个整理。因为对JS了解多点，所...

firim 2019-08-19 17:11 评论0 收藏0
利用 javascript 实现富文本编辑器

摘要：考察了下现有的富文本编辑器，桌面端的很多，移动端的几乎没有。为此决定自研一个富文本编辑器。本文，主要介绍如何实现富文本编辑器，和解决一些不同浏览器和设备之间的。光标操作作为富文本编辑器，开发者需要有能力控制光标的各种状态信息，位置信息等。利用 javascript 实现富文本编辑器阅读 994收藏 1482017-11-03原文链接：eux.baidu.com利用 javascri...

cyixlq 2019-08-30 15:55 评论0 收藏0
利用 javascript 实现富文本编辑器

摘要：考察了下现有的富文本编辑器，桌面端的很多，移动端的几乎没有。为此决定自研一个富文本编辑器。本文，主要介绍如何实现富文本编辑器，和解决一些不同浏览器和设备之间的。光标操作作为富文本编辑器，开发者需要有能力控制光标的各种状态信息，位置信息等。利用 javascript 实现富文本编辑器阅读 994收藏 1482017-11-03原文链接：eux.baidu.com利用 javascri...

voidking 2019-08-23 15:20 评论0 收藏0