关于 Google 发布的 JS 代码规范

清疚 2022-05-27 04:16 238阅读 0赞

Google为了那些还不熟悉代码规范的人发布了一个[JS代码规范][JS]。其中列出了编写简洁易懂的代码所应该做的最佳实践。

代码规范并不是一种编写正确JavaScript代码的规则，而是为了保持源代码编写模式一致的一种选择。对于JavaScript语言尤其如此，因为它灵活并且约束较少，允许开发者使用许多不同的编码样式。

Google和Airbnb各自占据着当前最流行的编码规范的半壁江山。如果你会在编写JS代码上投入很长时间的话，我强烈推荐你通读一遍这两家公司的编码规范。

接下来要写的是我个人认为在Google的代码规范中，与日常开发密切相关的十三条规则。

它们处理的问题都非常具有争议性，包括tab与空格、是否强制使用分号等等。还有一些令我感到惊讶的规则，往往最后都改变了我编写JS代码的习惯。

对于每一条规则，我都会先给出规范的摘要，然后引用规范中的详细说明。我还会举一些适当的反例论证遵守这些规则的重要性。

# 使用空格代替tab #

> 除了每一行的终止符序列，ASCII水平空格符（0x20）是唯一一个可以出现在源文件中任意位置的空格字符。这也意味着，tab字符不应该被使用，以及被用来控制缩进。

规范随后指出应该使用2个，而不是4个空格带实现缩进。

# 不能省略分号 #

> 每个语句必须以分号结尾。不允许依赖于JS自动添加分号的功能。

尽管我不明白为什么会有人反对这个规则，但目前分号的使用问题显然已经像“空格 vs tab”这个问题一样产生了巨大的争议。而Google对此表示分号是必须的，是不可省略的。

<table style="margin-left:0px;font-size:13px;border:none;margin-top:0px;margin-right:0px;margin-bottom:0px;padding:0px;border-spacing:0px;width:auto;background:none;table-layout:auto;"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;"> 
   <td style="font-size:13px;text-align:center;background-image:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;background-color:rgb(238,238,238);"> 
    <div style="border:none;margin:0px;padding-right:0px;padding-left:0px;background:none;text-align:left;white-space:nowrap;padding-top:5px;padding-bottom:3px;line-height:15px;"> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       1 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       2 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       3 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       4 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       5 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       6 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       7 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       8 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       9 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       10 
     </div> 
    </div></td> 
   <td style="font-size:13px;text-align:center;width:580.8px;background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;"> 
    <div style="margin:0px;padding-right:0px;padding-left:0px;text-align:left;color:rgb(0,0,0);white-space:pre;border:none;padding-top:5px;padding-bottom:3px;background:none;line-height:15px;"> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">// bad</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">let </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">luke</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">let </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">leia</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">[</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">luke</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">leia</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">]</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;font-weight:bold;">forEach</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">jedi</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">jedi</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">father</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">'vader'</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">// good</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">let </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">luke</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">let </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">leia</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">[</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">luke</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">leia</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">]</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;font-weight:bold;">forEach</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">jedi</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">jedi</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">father</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">'vader'</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

# 暂时不要使用ES6 module #

> 由于ES6模块的语义尚不完全确定，所以暂时不要使用，比如export和import关键字。一旦它们的相关规范制定完成，那么请忽略这一条规则。

> 译者注：感觉遵守这条规范不大现实，毕竟现在已经有babel了。而且使用React时，最佳实践就是使用ES6模块吧。

# 不推荐代码水平对齐 #

> Google的代码规范允许但不推荐对代码进行水平对齐。即使之前的代码中做了水平对齐的处理，以后也应该避免这种行为。

对代码进行水平对齐会在代码中添加若干多余的空格，这让相邻两行的字符看上去处于一条垂直线上。

# 杜绝var #

> 使用const或let来声明所有局部变量。如果变量不需要被重新赋值，默认应该使用const。应该拒绝使用关键字var。

我不知道是因为没有人能说服他们，还是说因为旧习难改。目前我仍能看到许多人在StackOverFlow或其他地方使用var声明变量。

# 优先使用箭头函数 #

> 箭头函数提供了一种简洁的语法，并且避免了一些关于this指向的问题。相比较与function关键字，开发者应该优先使用箭头函数来声明函数，尤其是声明嵌套函数。

坦白说，我曾以为箭头函数的作用只在于简洁美观。但现在我发现原来它们还有更重要的作用。

<table style="margin-left:0px;font-size:13px;border:none;margin-top:0px;margin-right:0px;margin-bottom:0px;padding:0px;border-spacing:0px;width:auto;background:none;table-layout:auto;"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;"> 
   <td style="font-size:13px;text-align:center;background-image:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;background-color:rgb(238,238,238);"> 
    <div style="border:none;margin:0px;padding-right:0px;padding-left:0px;background:none;text-align:left;white-space:nowrap;padding-top:5px;padding-bottom:3px;line-height:15px;"> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       1 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       2 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       3 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       4 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       5 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       6 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       7 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       8 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       9 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       10 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       11 
     </div> 
    </div></td> 
   <td style="font-size:13px;text-align:center;width:580.8px;background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;"> 
    <div style="margin:0px;padding-right:0px;padding-left:0px;text-align:left;color:rgb(0,0,0);white-space:pre;border:none;padding-top:5px;padding-bottom:3px;background:none;line-height:15px;"> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">// bad</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">[</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,153,153);">1</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,153,153);">2</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,153,153);">3</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">]</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">map</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;font-weight:bold;color:rgb(128,0,128);">function</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">x</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(128,0,128);">const</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">y</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">x</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">+</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,153,153);">1</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;font-weight:bold;">return</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">x *</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">y</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;">
       &nbsp; 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">// good</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">[</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,153,153);">1</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,153,153);">2</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,153,153);">3</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">]</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">map</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">x</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&gt;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(128,0,128);">const</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">y</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">x</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">+</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,153,153);">1</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;font-weight:bold;">return</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">x *</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">y</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

# 使用模板字符串取代连接字符串 #

> 在处理多行字符串时，模板字符串比复杂的拼接字符串要表现的更出色。

<table style="margin-left:0px;font-size:13px;border:none;margin-top:0px;margin-right:0px;margin-bottom:0px;padding:0px;border-spacing:0px;width:auto;background:none;table-layout:auto;"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;"> 
   <td style="font-size:13px;text-align:center;background-image:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;background-color:rgb(238,238,238);"> 
    <div style="border:none;margin:0px;padding-right:0px;padding-left:0px;background:none;text-align:left;white-space:nowrap;padding-top:5px;padding-bottom:3px;line-height:15px;"> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       1 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       2 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       3 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       4 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       5 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       6 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       7 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       8 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       9 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       10 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       11 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       12 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       13 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       14 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       15 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       16 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       17 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       18 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       19 
     </div> 
    </div></td> 
   <td style="font-size:13px;text-align:center;width:580.8px;background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;"> 
    <div style="margin:0px;padding-right:0px;padding-left:0px;text-align:left;color:rgb(0,0,0);white-space:pre;border:none;padding-top:5px;padding-bottom:3px;background:none;line-height:15px;"> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">// bad</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;font-weight:bold;color:rgb(128,0,128);">function</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">sayHi</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">name</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;font-weight:bold;">return</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">'How are you, '</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">+</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">name</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">+</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">'?'</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;">
       &nbsp; 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">// bad</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;font-weight:bold;color:rgb(128,0,128);">function</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">sayHi</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">name</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;font-weight:bold;">return</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">[</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">'How are you, '</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">name</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">'?'</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">]</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">.</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">join</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;">
       &nbsp; 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">// bad</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;font-weight:bold;color:rgb(128,0,128);">function</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">sayHi</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">name</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;font-weight:bold;">return</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">`</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">How </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">are </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">you</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">$</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;">name</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">?</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">`</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;">
       &nbsp; 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">// good</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;font-weight:bold;color:rgb(128,0,128);">function</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">sayHi</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">name</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;font-weight:bold;">return</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">`</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">How </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">are </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">you</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">$</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">name</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">?</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">`</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

# 不要使用续行符分割长字符串 #

> 在JS中，`\`也代表着续行符。Google的代码规范不允许在不管是模板字符串还是普通字符串中使用续行符。尽管ES5中允许这么做，但如果在`\`后跟着某些结束空白符，这种行为会导致一些错误，而这些错误在审阅代码时很难注意到。

这条规则很有趣，因为Airbnb的规范中有一条与之不相同的[规则][Link 1]

Google推荐下面这样的写法，而Airbnb则认为应该顺其自然，不做特殊处理，该多长就多长。

# 优先使用`for...of` #

> 在ES6中，有3种不同的for循环。尽管每一种有它的应用场景，但Google仍推荐使用`for...of`。

真有趣，Google居然会特别指定一种for循环。虽然这很奇怪，但不影响我接受这一观点。

以前我认为`for...in`适合遍历Object，而`for...of`适合遍历数组。因为我喜欢这种各司其职的使用方式。

尽管Google的规范与这种使用方式相冲突，但Google对`for...of`的偏爱依然让我觉得十分有趣。

# 不要使用eval语句 #

> 除非是在code loader中，否则不用使用eval或是Function(…string)结构。这个功能具有潜在的危险性，并且在CSP环境中无法起作用。

MDN中有一节专门提到不要使用eval语句。

<table style="margin-left:0px;font-size:13px;border:none;margin-top:0px;margin-right:0px;margin-bottom:0px;padding:0px;border-spacing:0px;width:auto;background:none;table-layout:auto;"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;"> 
   <td style="font-size:13px;text-align:center;background-image:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;background-color:rgb(238,238,238);"> 
    <div style="border:none;margin:0px;padding-right:0px;padding-left:0px;background:none;text-align:left;white-space:nowrap;padding-top:5px;padding-bottom:3px;line-height:15px;"> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       1 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       2 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       3 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       4 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       5 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       6 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       7 
     </div> 
     <div style="border-top:none;border-right:1px solid rgb(222,222,222);border-bottom:none;border-left:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;text-align:right;height:inherit;min-width:1.2em;color:rgb(170,170,170);">
       8 
     </div> 
    </div></td> 
   <td style="font-size:13px;text-align:center;width:580.8px;background:none;border-style:none;margin:0px;padding:0px;vertical-align:top;font-family:Monaco, MonacoRegular, 'Courier New', monospace;"> 
    <div style="margin:0px;padding-right:0px;padding-left:0px;text-align:left;color:rgb(0,0,0);white-space:pre;border:none;padding-top:5px;padding-bottom:3px;background:none;line-height:15px;"> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">// bad</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">let </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">obj</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">a</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,153,153);">20</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">b</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,153,153);">30</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">let </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">propName</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">getPropName</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">// returns "a" or "b"</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">eval</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(221,17,68);">'var result = obj.'</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">+</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;">propName</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">// good</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">let </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">obj</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">{ </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">a</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,153,153);">20</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">,</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">b</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">:</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,153,153);">30</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">}</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">let </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">propName</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">getPropName</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">(</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">)</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">// returns "a" or "b"</span> 
     </div> 
     <div style="border:none;margin:0px;padding:0px 5px;font-family:inherit;background:none;height:inherit;"> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:#008080;">let </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">result</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">=</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,45,122);">obj</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">[</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;">propName</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);"> </span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">]</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(51,51,51);">;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(0,111,224);">&nbsp;&nbsp;</span> 
      <span style="border:0px;margin:0px;padding:0px;font-family:inherit;height:inherit;color:rgb(153,153,153);font-style:italic;">//&nbsp;&nbsp;obj[ "a" ] is the same as obj.a</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

# 常量的命名规范 #

> 常量命名应该使用全大写格式，并用下划线分割

如果你确定一定以及肯定一个变量值以后不会被修改，你可以将它的名称使用全大写模式改写，暗示这是一个常量，请不要修改它的值。

遵守这条规则时需要注意的一点是，如果这个常量是一个函数，那么应该使用驼峰式命名法。

# 每次只声明一个变量 #

> 每一个变量声明都应该只对应着一个变量。不应该出现像`let a = 1,b = 2;`这样的语句。

# 使用单引号 #

> 只允许使用单引号包裹普通字符串，禁止使用双引号。如果字符串中包含单引号字符，应该使用模板字符串。

[JS]: https://google.github.io/styleguide/jsguide.html
[Link 1]: https://github.com/airbnb/javascript#strings--line-length