Day 4：git diff —— 看清楚改了什麼

17th鐵人賽 git

EO.Sean

團隊好想工作室 v 9.0

2025-09-18 18:00:26

112 瀏覽

分享至

歡迎來到《Git 起來！》系列，the Fourth Day！

前三天我們學會了把檔案：
放進購物車 (git add)、按下結帳鍵 (git commit)
用 GPS (git status / git log) 查看專案狀態。

現在，你已經能掌握檔案從工作目錄到版本庫的基本流程
也能隨時查看專案狀態和歷史紀錄。

但在提交之前，你有沒有想過：

我到底改了什麼？

我真的確認過購物車裡的商品嗎？

今天，我們要學 如何仔細檢查購物車裡的變更，避免結帳出錯。

這時候就輪到 git diff 出場，它是你的 放大鏡
幫助你精準看到每一處修改，避免不小心把錯誤程式碼送進版本庫。

`git diff` 是什麼？

簡單來說，git diff 的角色就是：

幫你對不同階段的檔案做「內容比對」，告訴你哪些部分被修改了。

首先，回顧 Git 的三階段流程：

工作目錄（Working Directory）：實際修改檔案的地方
暫存區（Staging Area / Index）：已 git add，準備提交的檔案
版本庫（Repository）：已 git commit，永久保存的歷史版本

購物網站比喻

你逛網拍，最後要結帳時突然想：

我剛剛到底挑了什麼？

購物車裡的商品和以前買過的有什麼不同？

這時候，git diff 就派上用場了！它幫你 比對前後差異：

工作目錄 vs 暫存區 👉「我手上的商品」vs「購物車裡的商品」
暫存區 vs 版本庫 👉「購物車裡的商品」vs「上次買的商品」
版本庫不同 commit 之間 👉「這次買的」vs「上上次買的」

幫助你在結帳前仔細核對購物車，確保每件商品都是你想要的。

基本用法

看工作目錄的變化（最常用）
```
git diff
```
→ 顯示工作目錄中尚未 git add 的所有變化。
看暫存區的變化
```
git diff --cached
# 或
git diff --staged
```
→ 顯示已經 git add 但還沒 commit 的變化。
看工作目錄 + 暫存區的所有變化
```
git diff HEAD
```
→ 顯示 工作目錄 + 暫存區 相對於最後一次 commit 的所有變化。
看兩個 commit 之間的變化
```
git diff <commit1> <commit2>
```
例如：
```
git diff HEAD~1 HEAD
```
→ 顯示上一個版本 (HEAD~1) 和現在版本 (HEAD) 的差異。

🔎 範例解讀

diff --git a/index.html b/index.html
--- a/index.html
+++ b/index.html
@@ -1,3 +1,4 @@
 <html>
   <head>
-    <title>My Site</title>
+    <title>My Awesome Site</title>
   </head>

解讀：

-- a/index.html：舊版本的檔案
+++ b/index.html：新版本的檔案
@@ -1,3 +1,4 @@：變更的行數範圍
- 開頭：刪除或修改前的內容
+ 開頭：新增或修改後的內容
沒有符號：沒有變更的內容（提供上下文）

進階小技巧

只看特定檔案或目錄
```
git diff index.html
git diff src/components/
```
→ 只看特定檔案或目錄的變化。
只看檔案名稱
```
git diff --name-only
```
→ 快速掃描 哪些檔案有變動，不看具體內容。
搭配分頁器
```
git diff | less
```
→ 修改過多時，方便翻閱；按 q 退出。
看統計資訊
```
git diff --stat
```
→ 顯示每個檔案 增加幾行、刪除幾行。

字詞層級的 diff

git diff --word-diff

→ 對於 長行的小修改，預設的整行 diff 可能看不清楚：

# 一般 diff
- let message = "Hello World";
+ let message = "Hello Git";

# word-diff
let message = "Hello [-World-]{+Git+}";

小提醒

搞混 git diff 與 git diff --cached
- git diff → 看 未暫存 的變更
- git diff --cached → 看 已暫存 的變更
輸出過長難閱讀
- 可加 -color-words 或用 VS Code Git 工具更直覺