Google JavaScript Style 指南中 13 个要点

2023年1月10日 140次阅读

简评：Google 出的 JavaScript 代码风格指南和 Airbnb 出的代码风格指南，都是非常受欢迎的指南。如果平时需要经常编写 JavaScript ，不妨花些时间研究研究。

Google 提供了一个编写 JavaScript 代码风格的指南，用于编写干净，易懂的代码（Google 的观点）。

以下是我认为是谷歌 JavaScript Style 指南中最有趣的十三条指南。

使用空格，不要使用 tabs

除了行终止符序列之外，ASCII 空格字符(0x20)是在源文件中出现的唯一空白字符。这意味着…… tabs 字符不用于缩进。

Style Guide 建议使用两个空格作为缩进。

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

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

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

分号是必须的

每个语句都必须以分号结尾

这是一个很有争议的点，Google Style Guide 坚持每条语句中使用分号更好。

// 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 的模块

不要使用ES6模块（即export和import关键字），因为它们的语义尚未最终确定。请注意，一旦语义是完全标准的，这个策略将被重新审视。

// Don't do this kind of thing yet:
//------ 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';

水平对齐不鼓励（但不禁止）

这种做法是允许的，但 Google Style 并不鼓励它。

// bad 
{ 
  tiny：  42，   
  longer：435，
};
// good 
{ 
  tiny：42，
  longer：435，
};

不要再使用 var

声明局部变量有两种 const 和 let。默认情况使用 const，除非需要重新分配一个变量。不要使用 var 来声明。

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

使用模板字符串

处理字符串的链接问题，我们应该优先考虑模板字符串。

// 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}?`;
}

不要对长字符串中使用续行符（\）

不要在长字符串中使用续行符。即使 ES5 允许这么做，但是如果在续航符后面出现空白字符也会造成不必要的麻烦。

// bad (sorry, this doesn't show up well on mobile)
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 是 for 循环的首选

ES6 有 3 种不同的 for 循环。我们应该优先选择 for…of。

我倾向于 for…in 更适合于 Object，而 for…of 更适合于 arrays。

不要使用 eval()

不要使用 eval 或 Function(…string) 构造函数（code loaders 除外）。这些功能具有潜在的危险性，在 CSP 环境下无法使用。

// 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;

每个变量声明符只声明一个变量

// 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`;

原文链接：13 Noteworthy Points from Google’s JavaScript Style Guide
推荐阅读：我放弃了 Google 的工作，因为他们拒绝给我买圣诞礼物

算法网