Google为不是很熟悉前端JS代码标准的人发布了《JS代码标准》，文中列举了编写简单易懂的代码最佳事件。

代码标准并不是一种编写正确JavaScript代码的规矩，而是为了保持源代码编写形式共同的一种挑选。对于JavaScript言语特别如此，由于JavaScript束缚很少，开发者可以编写各种各样的编码样式。

当前最流行的编码规范Google和Airbnb各占半壁江山，如果想要深入前端学习建议学习一下这两家公司的编码规范。

使用空格代替tab

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

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

// bad
function foo() {
∙∙∙∙let name;
}
// bad
function bar() {
∙let name;
}
// good
function baz() {
∙∙let name;
}

不能省略分号

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

尽管省略了分号在浏览器里面是支持的，但目前分号的使用问题显然已经像“空格 vs tab”这个问题一样产生了巨大的争议。然而Google编码规范对此表示分号是必须的，是不能够省略的。

// bad
let luke = {}
let leia = {}
[luke, leia].forEach(jedi => jedi.father = 'vader')
// good
let luke = {};let leia = {};
[luke, leia].forEach((jedi) => {
  jedi.father = 'vader';
});

暂时不要使用ES6 module

ES6才刚刚成型整个开发社区还不够活跃一些模块的语义尚不完全确定，建议暂时不要使用，比如export和import关键字。如果后续有相关规范制定完成，可以采用。

// 暂时不要编写下面的代码：//
------ lib.js ------
export function square(x) {    
    return x * x;
}export function diag(x, y) {    
    return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from 'lib';

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

不推荐代码水平对齐

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

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

// bad
{  
  tiny:   42,  
  longer: 435, 
};
// good
{  
  tiny: 42, 
  longer: 435,
};

抛弃var

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

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

// bad
var example = 42;
// good
const example = 42;

优先使用箭头函数

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

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

// bad
[1, 2, 3].map(function (x) {  
    const y = x + 1;  return x * y;
});
// good
[1, 2, 3].map((x) => {  
    const y = x + 1;  return x * y;
});

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

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

// bad
function sayHi(name) {  
    return 'How are you, ' + name + '?';
}
// bad
function sayHi(name) {  
    return ['How are you, ', name, '?'].join();
}
// bad
function sayHi(name) {  
    return `How are you, ${ name }?`;
}
// good
function sayHi(name) {  
    return `How are you, ${name}?`;
}

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

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

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

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

// bad (建议在PC端阅读)
const longString = 'This is a very long string that \    far exceeds the 80 column limit. It unfortunately \    contains long stretches of spaces due to how the \    continued lines are indented.';
// good
const longString = 'This is a very long string that ' + 
    'far exceeds the 80 column limit. It does not contain ' + 
    'long stretches of spaces since the concatenated ' +    'strings are cleaner.';

优先使用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语句。

// bad
let obj = { a: 20, b: 30 };
let propName = getPropName();  
// returns "a" or "b"
eval( 'var result = obj.' + propName );
// good
let obj = { a: 20, b: 30 };
let propName = getPropName();  
// returns "a" or "b"
let result = obj[ propName ];  
//  obj[ "a" ] is the same as obj.a

常量的命名规范

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

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

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

// bad
const number = 5;
// good
const NUMBER = 5;

每次只声明一个变量

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

// bad
let a = 1, b = 2, c = 3;
// good
let a = 1;let b = 2;let c = 3;

使用单引号

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

// bad
let directive = "No identification of self or mission."
// bad
let saying = 'Say it ain\u0027t so.';
// good
let directive = 'No identification of self or mission.';
// good
let saying = `Say it ain't so`;

总结

规范中没有需要强制执行的命令。Google虽然是现今科技巨头之一，但这份代码规范也仅仅是用来当作参考罢了。

Google是一家人才汇聚的科技公司，雇佣着出色的程序员来编写优秀的代码。能够看到这样的公司发布的代码规范是一件很有趣的事情。

原文地址：https://medium.freecodecamp.org/google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b 
作者：Daniel Simmons 
摘要：本文总结了Google发布的JavaScript代码规范中比较重要的部分，适合想要养成良好代码规范的读者借鉴。

更多精彩内容请关注“IT实战联盟”公众号哦~~~

注意：本文归作者所有，未经作者允许，不得转载