簡評：Google 出的 JavaScript 代碼風格指南和 Airbnb 出的代碼風格指南，都是非常受歡迎的指南。如果平時需要經常編寫 JavaScript ，不妨花些時間研究研究。
Google 提供了一個編寫 JavaScript 代碼風格的指南，用於編寫乾淨，易懂的代碼（Google 的觀點）。
以下是我認為是谷歌 JavaScript Style 指南中最有趣的十三條指南。
使用空格，不要使用 tabs
除了行終止符序列之外，ASCII 空格字符(0x20)是在源文件中出現的唯一空白字符。這意味著…… tabs 字符不用於縮進。
Style Guide 建議使用兩個空格作為縮進。
// badfunction foo() {∙∙∙∙let name;}// badfunction bar() {∙let name;}// goodfunction baz() {∙∙let name;}分號是必須的
每個語句都必須以分號結尾
這是一個很有爭議的點，Google Style Guide 堅持每條語句中使用分號更好。
// badlet luke = {}let leia = {}[luke, leia].forEach(jedi => jedi.father = 'vader')// goodlet 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
// badvar example = 42;// goodlet example = 42;
推薦使用箭頭函數
箭頭函數提供了一個簡潔的語法，並且能夠簡化我們處理 this 的問題。我們應該優先選擇箭頭函數，特別是嵌套函數。
// 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;});使用模板字符串
處理字符串的鏈接問題，我們應該優先考慮模板字符串。
// badfunction 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.';// goodconst 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 環境下無法使用。
// badlet obj = { a: 20, b: 30 };let propName = getPropName(); // returns "a" or "b"eval( 'var result = obj.' + propName );// goodlet obj = { a: 20, b: 30 };let propName = getPropName(); // returns "a" or "b"let result = obj[ propName ]; // obj[ "a" ] is the same as obj.a常量命名應該全部大寫，並且使用下劃線分隔
如果你確定一個變量不應該被改變，你可以通過大寫的常量來表明這一點。
這個規則一個明顯的例外是如果該常量是函數作用域的應該使用小駝峰的寫法。
// badconst number = 5;// goodconst NUMBER = 5;
// badlet a = 1, b = 2, c = 3;// goodlet a = 1;let b = 2;let c = 3;
使用單引號而不是雙引號
普通的字符串文字使用（'）分隔，而不是雙引號（"）。注意：如果某個字符串包含單引號，請考慮使用模板字符串來避免轉義。
// badlet directive = "No identification of self or mission."// badlet saying = 'Say it ain\\u0027t so.';// goodlet directive = 'No identification of self or mission.';// goodlet saying = `Say it ain't so`;
分享到:
閱讀更多 3T教育編程猿 的文章
關鍵字: Google 編程語言 JavaScript
