[譯] Google JavaScript 風格指南中 13 個值得注意的細節

原文地址：13 Noteworthy Points from Google’s JavaScript Style Guide
原文做者：Daniel Simmons
譯者：命名最頭疼

對編碼風格不熟悉的人而言，Google 推出一套用於編寫 JavaScript 代碼的樣式指南， 並指出（谷歌認爲）編寫清晰易懂的代碼最佳風格。

首先聲明一點，如下規則並非編寫 Javascript 代碼的硬性要求，僅是爲了維持項目代碼的一致性，Javascript 是一種靈活而寬鬆的語言，它容許各類風格。

Google 和 Airbnb 都推出了各自的編碼風格指南，且是比較受歡迎的，若是你的項目中須要編寫大量的JS代碼，我絕對建議你閱讀。

如下列出了在 Google JS 風格指南中我認爲比較有趣且實用的 13 條規則

Google對編碼中的每一個細節點都進行了爭議(標籤, 空格,以及分號的使用)還有一些模糊的規範, 無疑, 這套風格確定會改變我寫JS的方式。

對每一條規則，我都會列出規範的摘要部分，而後是樣式指南中的支持引用和詳細描述規則，在恰當的狀況下，我將舉例說明，並與之和不遵循規則的代碼進行對比。

推薦使用空格, 而不是tab鍵

除了行終止符之外，ASCII 中的水平空格字符 (0x20) 是惟一一個表示空格的空白字符，這意味着 Tab 鍵並不適用於縮進。

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

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

    // good
    function baz() {
    ∙∙let name;
    }
複製代碼

推薦使用分號, 而不是將其省略

每條語句結束後必須帶有分號，嚴禁依賴編譯器自動插入分號。 雖然我沒法想象爲何有人會反對這個想法，可是 JS 中一向使用分號將成爲新 "spaces versus tabs" 爭論，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 模塊

不要使用 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';
複製代碼

不推薦水平對齊（但不由止）

首先水平對齊這種作法是容許的，可是在 Google 風格中並不推薦這種用法。甚至不須要在已使用過的地方保持水平對齊。 水平對齊即在代碼中添加空格，使每一列對齊。

// bad
{
  tiny:   42,  
  longer: 435, 
};
// good
{
  tiny: 42, 
  longer: 435,
};
複製代碼

不要再使用var

使用 const 或 let 聲明全部局部變量，除非須要從新分配變量，不然默認使用 const，不推薦使用 var 關鍵詞。 我仍然看見人們在 StackOverflow 和其餘地方使用 var 代碼示例。可能有人會爲此反對，或者說這是一種舊習慣，要改變，比較困難。

// bad
var example = 42;
// good
let example = 42;
複製代碼

首選箭頭函數 箭頭函數提供一個簡潔的句法，並解決了許多困難，首選箭頭函數而不是函數關鍵詞，尤爲是嵌套函數 說句真心話，我認爲箭頭函數很是棒，由於他們更加簡潔，更好看，事實證實，他們也有很重要的做用。

// 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}?`;
}
複製代碼

對長字符串不要使用行連續符

不要在普通字符串或模板字符串中使用行連續（即, 經過反斜槓結束字符串文字內的一行）儘管 ES5 容許這樣作，若是有空格尾隨在後面，它將會致使棘手的錯誤，而且對讀者來講不那麼明顯。

有趣的是，Google 和 Airbnb 都不贊同這種作法這又Airbnb規範

谷歌的建議是經過鏈接符來拆分長字符串（以下所示），而 Airbnb 則建議寫成一行，容許出現長字符串（若是須要的話）

// 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 提供了三種不一樣的 for 循環。三個可用狀況下，若是能夠， 推薦優先使用 for-of 循環

包括我在內, 也以爲這條規則有點奇怪，可是谷歌認爲它做爲 for 循環的首選將會很是優雅

我認爲，for...in 循環更適合對象，而 for...of 更適合數組

雖然 Google 的規範並不必定能和咱們想法相吻合, 可是它依舊以爲這種作法至關優雅

不要使用eval()

不要使用 eval 或 Function(...String) 構造函數（代碼加載器除外），這些功能具備潛在風險，而且在 CSP 環境中沒法正常工做。

對於 eval() 而言，在 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
複製代碼

常量應該用大寫字母和下劃線表示

常量名稱使用 CONSTANT_CASE: 所有爲大寫字母，單詞用下劃線分割。

若是你能確保一個變量不會再改變，你能夠經過大寫常量的名稱來代表這一點，這使得常量的不變性在整個代碼的使用中顯而易見。

這個規則有個值得注意的例外是，若是常量是屬於函數範圍的，在這種狀況下，應該將其用駝峯命名法來表示。

// 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;
複製代碼

使用單引號而不是雙引號

普通的字符文本使用單引號（'）來分割，而不是雙引號（"）

Tip: 若是一個字符串文本中包含單引號字符，請考慮使用模板字符串，而避免使用轉義符號。

// 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 標準源碼 」 指南，你能夠遵循這些規則，固然，不少人不一樣意，你能夠部分遵循，甚至不遵循也能夠。

我我的認爲，不少狀況下 Airbnb 比 Google 的規範更具吸引力，不管在何種狀況下，必定要牢記，整個項目的編碼風格要保持統一。