英文 | https://javascript.plainenglish.io/javascript-aesthetics-101-style-rules-for-beautiful-code-9d25642512d
翻譯 | 楊小二
你知道為什麼很多人讨厭PHP嗎？這主要是因為它的外觀。PHP 跟像你想象的一樣醜陋。因為 PHP 的建立者沒有為 PHP 建議任何大小寫或格式。一些開發人員使用 under_score，而其他開發人員使用 PascalCase。
是以，這種不一緻最終引起了人們對 PHP 的巨大仇恨。
幸運的是，JavaScript 并非如此，因為編寫 JavaScript 代碼有一些官方規則。例如，camelCase 是官方建議的 JavaScript 大小寫方法。但是，由于以下原因，将這些樣式規則提升到一個新的水準并為 JavaScript 建立一個通用的視覺效果至關重要：
在整個代碼庫中擁有一緻的風格使其易于閱讀和更改。
當另一個 JavaScript 開發人員檢視你編寫的代碼時，他/她不會感到不舒服，因為一切都很熟悉。
随着項目的進行以及你編寫的代碼越多，如果沒有樣式指南，維護和改進就會變得更加困難。
是以，這裡是我在 Airbnb 的 JavaScript 風格指南中的首選。使用這些規則将使你的代碼更具可讀性和一緻性。此外，你編寫的代碼可以在 4 個月内被其他開發人員甚至你輕松閱讀。
以下就是我列舉的10條編寫漂亮JavaScript代碼的規則。
1、對變量聲明使用 Let 和 Const
在 ES2015 中引入了 let 和 const 關鍵字，它們用于替換 var。但是 var 有什麼問題呢？嗯，很多。
var 從一開始就在JavaScript 中，但它對今天的标準有一些缺點。它是提升和功能範圍的，随着項目的發展，這會導緻全球範圍内的意外行為和污染。例如，由于 var 不是塊範圍的，它也在塊級标記之外定義，例如 if 和 for。例如，疊代變量 i 是在循環完成後定義的。
var a = 1; // bad
let a = 1; // good
// const and let only exist in the blocks they are defined in.
{
let a = 1;
const b = 1;
var c = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError
console.log(c); // Prints 1 2、盡可能使用隐式構造函數
如果你正在使用 JavaScript，你應該知道有多種方法可以完成相同的任務。例如，你可以使用三元組或 if-else 塊來建立條件邏輯。這種多樣化的選擇有時會導緻你編寫的代碼不一緻。
要建立空對象，你可以使用 Object 構造函數或隐式 {}。對于字元串、函數、數組、數字等，情況也是如此。為了在閱讀中保持一緻性和易用性，請盡可能使用隐式構造函數。
// bad
const a = new Object();
const b = new String("str");
const c = new Function('a', 'b', 'return a + b');
// good
const a = {};
const b = "str";
const c = (a,b) => a + b; 3、字元串優先使用單引号
為了保持一緻性，在所有代碼庫中使用單引号 ' 代替雙引号 " 和模闆文字（反引号）`。為了簡化這個過程，你可以利用 Prettier 立即格式化。
// bad
const name = "Edmon Dantès";
// bad - template literals should contain interpolation or newlines
const name = `Edmon Dantès`;
// good
const name = 'Edmon Dantès'; 4、盡可能使用字元串插值
在 JavaScript 中，正如我所提到的，有很多方法可以獲得相同的結果，但其中一些方法比其他方法更複雜。要連接配接字元串，你可以使用 + 運算符、數組上的 join 方法或字元串上的 concat 方法。然而，使用模闆文字是完成這項任務最複雜和最簡單的方法。
// bad
const str = 'How are you, ' + name + '?';
// bad
const str = ['How are you, ', name, '?'].join();
// good
const str = `How are you, ${name}?`; 5、選擇命名函數表達式
通常，每個人都有自己喜歡的方法來建立函數，因為 JavaScript 在方法方面非常慷慨。有箭頭函數、匿名函數表達式、函數聲明等。但是要編寫一緻且可讀的 JavaScript 代碼，你應該到處使用一種類型。
使用命名函數表達式而不是聲明具有一些關鍵優勢。函數表達式沒有被提升，這意味着使用一個函數，你需要先在頂部或另一個子產品中定義它。
此外，名稱可以很長且具有描述性，這可以防止使用單獨的注釋。是以，代碼可以更具可讀性。
// bad
function foo() { ... }
// bad
const foo = function () { ... };
// good
// lexical name distinguished from the variable-referenced invocation(s)
const short = function longUniqueMoreDescriptiveLexicalFoo() { ... }; 6、在回調中優先使用箭頭函數
有些方法如 map 或 filter 将匿名函數作為參數。在這些情況下，你有很多選擇，但使用箭頭函數是最友善和優雅的方式。
因為，它在 this 的上下文中建立了箭頭函數的一個版本，這通常是你想要的，并且是一種更簡潔的文法。
// bad
[1, 2, 3].forEach(function (x) {
const y = x ** 2;
return x + y;
});
// good
[1, 2, 3].forEach((x) => {
const y = x ** 2;
return x + y;
}); 7、使用嚴格等于進行相等比較
有兩種類型的相等運算符：松散運算符和嚴格運算符。松散的是 == 和 != ，它們在沒有關心類型的情況下進行比較。例如，根據松散比較，2 和 '2' 是相等的。但是，如果你使用嚴格的 === 和 !==，那麼它也會考慮類型，這通常是預期的結果。
// bad
console.log(2 == '2') // true
// good
console.log(2 === '2') // false 8、不要嵌套三元組
三元運算符允許您建立内聯條件語句。在 if-else 語句上使用它，你确實可以節省許多代碼行。
但是，正如定義的那樣，它必須是内聯的和簡短的。因為嵌套三元組會嚴重損害代碼的可讀性。
// bad
const foo = maybe1 > maybe2
? "bar"
: value1 > value2
? "baz"
: null;
// split into 2 separated ternary expressions
const maybeNull = value1 > value2 ? 'baz' : null;
// good
const foo = maybe1 > maybe2 ? 'bar' : maybeNull; 9、以空格開始評論
為了提高可讀性，請確定在注釋的開頭放置一個空格。
// bad
//is current tab
let isActive = true;
// good
// is current tab
let isActive = true; 10、選擇正确的套管樣式
正如我在介紹中提到的，如果代碼一緻，大小寫樣式是使代碼看起來不錯的最重要的概念之一。在 JavaScript 中，有一些大小寫樣式的約定。
命名對象、函數、變量和執行個體時使用駝峰命名法。
僅在命名構造函數或類時使用 PascalCase。
在命名不可重新配置設定的變量和枚舉時使用 UPPERCASE_VARIABLES。
根本不要使用 snake_case 或 kebab-case。
// bad
const StudentCount = 15;
class particle { ... }
function get_name() { ... }
let apiKey = 'cX25zanxsPcdjsbxX985ddXM3';
// good
const studentCount = 15;
class Particle { ... }
function getName() { ... }
const API_KEY = 'cX25zanxsPcdjsbxX985ddXM3'; 編寫計算機可以了解的代碼一點也不難。然而，編寫人類容易了解的代碼是一項具有挑戰性的工作。這就是為什麼有一些關于編碼的基本規則，真的會造成好代碼和壞代碼之間的差別。
在本文中，我嘗試使用 AirBNB 的 JavaScript 樣式指南，分享我在編寫好的 JavaScript 代碼時不可或缺的規則。這些是我的首選，但如果你看看這個綜合的風格指南，我相信你會發現一些你還不知道的東西。
謝謝各位閱讀。如果你喜歡它，請給我點個贊，如果你有一些對你很重要的風格規則，請留下你的評論。