JavaScript 風格指南：撰寫乾淨且一致的代碼

你好，有志於編程的夥伴們！我很興奮能與你們一起踏上這個旅程，探索 JavaScript 風格指南的世界。作為一個教導編程多年的老師，我無法強調得足夠，撰寫乾淨、一致的代碼有多重要。這就像保持你的房間整潔一樣——這樣可以讓你更容易找到和管理一切！

JavaScript - Style Guide

我們為什麼需要風格指南？

在我們深入之前，讓我們先來討論一下我們為什麼需要風格指南。想像一下，你正在一個團隊專案中工作，而每個人寫的代碼都不同。那會是一片混亂！風格指南就像一套規則，每個人都同意遵循，這樣可以使代碼更容易閱讀和維護。

現在，讓我們來看看 JavaScript 風格指南的細節！

代碼縮進

H3：可讀代碼的基礎

縮進就像是房子的基礎——對於結構和穩定性至關重要。在 JavaScript 中，我們通常使用空格或制表符來縮進我們的代碼。讓我們看看一個例子：

function greetStudent(name) {
if (name) {
console.log("Hello, " + name + "!");
} else {
console.log("Hello, student!");
}
}

在這個例子中，我們縮進了函數內部和 if-else 說明的代碼。這樣可以清楚地看出哪些部分的代碼屬於一起。

註釋

H3：為未來的你留下面包屑

註釋就像是你在代碼中為自己（或他人）留下的小筆記。它們解釋了代碼的作用，而不影響其運行。以下是我們如何使用它們：

// 這是一行註釋

/*
這是一個
多行註釋
*/

/**
* 這是一個 JSDoc 註釋
* 它用於記錄函數
* @param {string} name - 學生的名字
*/
function greetStudent(name) {
// 代碼在這裡
}

記住，好的註釋解釋的是為什麼，而不是什麼。代碼本身應該足夠清晰，以顯示它在做什麼。

變量聲明

H3：介紹你的代碼中的角色群

變量就像是你的代碼故事中的角色。在 JavaScript 中，我們有幾種方法來聲明它們：

// 使用 'let' 來聲明可能會變化的變量
let age = 25;

// 使用 'const' 來聲明不會變化的變量
const PI = 3.14159;

// 在現代 JavaScript 中避免使用 'var'
// var oldWay = "我們不再這樣做";

總是在使用變量之前聲明它們，並且除非你知道值會變化，否則嘗試使用 const。

開發者名稱使用 camelCase

H3：符合邏輯的命名規範

在 JavaScript 中，我們對大多數標識符使用 camelCase。這就像把詞語擠在一起，但將每個新詞的首字母大寫（除了第一個）。這是它看起來的樣子：

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;

function calculateArea(width, height) {
return width * height;
}

const MAX_SIZE = 100; // 例外：常量通常使用 ALL_CAPS

空格和括號

H3：給你的代碼留出呼吸空間

恰當的間距可以使你的代碼更容易閱讀。這就像在長篇論文中添加段落。讓我們看看我們如何使用空格和括號：

// 好的間距
if (condition) {
doSomething();
} else {
doSomethingElse();
}

// 函數調用
console.log("Hello, World!");

// 數組和對象
let colors = ["red", "green", "blue"];
let person = { name: "Alice", age: 30 };

注意我們在運算符周圍和逗號後使用空格。這些小細節讓你的代碼看起來更專業！

對象規則

H3：結構你的數據

對象就像是相關數據的容器。以下是我們通常如何結構它們：

const student = {
name: "Bob",
age: 20,
grades: {
math: 90,
science: 85
},
isEnrolled: true
};

// 訪問對象屬性
console.log(student.name);
console.log(student["age"]);

保持你的對象屬性一致且組織有序。這會在後來為你省去很多麻煩！

說明規則

H3：一個想法，一行代碼

我們通常試圖讓每個說明佔據一行。這就像在論文中寫句子一樣——每個句子應該表達一個完整的思想：

let a = 5;
let b = 10;
let c = a + b;

if (c > 10) {
console.log("c 大於 10");
}

這樣可以使你的代碼更容易閱讀和調試。

行長度

H3：保持簡潔

嘗試將你的代碼行保持在合理的長度——通常是 80-100 個字符。如果一行太長，就把它拆開：

// 太長
let result = veryLongFunctionName(extremelyLongVariableName1, extremelyLongVariableName2, extremelyLongVariableName3);

// 更好
let result = veryLongFunctionName(
extremelyLongVariableName1,
extremelyLongVariableName2,
extremelyLongVariableName3
);

這可以提高可讀性，並使你的代碼看起來更整潔。

所有規則綜合

現在，我們已經介紹了所有這些風格指南，讓我們看一個完整的例子，它將所有這些元素都實踐了：

/**
* 計算購物車中商品的總價格
* @param {Object[]} items - 購物車中的商品數組
* @returns {number} 總價格
*/
function calculateTotalPrice(items) {
let total = 0;
const TAX_RATE = 0.08;

for (let i = 0; i < items.length; i++) {
let item = items[i];
let itemPrice = item.price * (1 + TAX_RATE);

total += itemPrice;

// 記錄每個商品加上稅的價格
console.log(`${item.name}: $${itemPrice.toFixed(2)}`);
}

return total.toFixed(2);
}

// 示例使用
const shoppingCart = [
{ name: "T-shirt", price: 15.99 },
{ name: "Jeans", price: 39.99 },
{ name: "Shoes", price: 59.99 }
];

let finalPrice = calculateTotalPrice(shoppingCart);
console.log(`總價格: $${finalPrice}`);

這個例子展示了正確的縮進、註釋、變量聲明、camelCase 命名、間距、對象使用和行長度指南的遵循。

記住，遵循這些風格指南將使你的代碼更具可讀性和可維護性。這是一項將在您的編程旅程中為您提供良好服務的技能。祝您編程愉快，願您的代碼永遠乾淨且一致！

Credits: Image by storyset

上一教程:

JavaScript - 性能