JS代码在什么位置能够换行

2024年2月10日 226次阅读 来源: flowmemo

一行太长的代码会影响浏览体验. 现实项目中，我们每每把太长的代码分红多行去写.
比如在js中, promise链常常要分红多行写. 对此本人想到一个题目, 就是js中, 在什么处所换行是正当并且不损坏原有代码逻辑的.

探讨这个题目过程当中本人造了一个小玩具, breakline, 望文生义, 它的作用就是在不破话代码的逻辑的状况下把js代码拆成多行. 项目地点：https://github.com/flowmemo/b…

我们接下来照样谈换行的题目. 为了简朴起见, 本文不议论解释中的换行符.

换行符的作用

在平常的语言中, 换行符平常是意味着一个statement1的完毕, 分号也一般有这个作用. 然则js中换行符并没有代表statement的完毕的意义. 事实上在范例中, 换行符（范例中称为line terminator)在多半状况下和空格、tab的作用是一样的, 是为了分开token以及轻易浏览, 除了…

  1. 换行符在某些状况下会触发自动分号插进去（Automatic Semicolon Insertioin, 以下简称ASI）

  2. 换行符自身是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了2.

Restricted Production

Restricted production划定了触发ASI的几种特殊状况.

以下几个位置涌现换行符, 纵然以后的token能够继承被正当parse, 也会触发ASI

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

  2. continue, break, return, throw, yield以后

  3. 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…

    原文作者：flowmemo
    原文地址: https://segmentfault.com/a/1190000006001304
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞