Query Parameters 介紹與實作 - 網址後面一長串參數是什麼？

前言

不知道你有沒有注意過，有時候網址後面會帶一大串參數，比如下面 Uniqlo 的網址：

https://www.uniqlo.com/tw/zh_TW/c/all_men-tops-sweat-collection.html?categoryDesc=%2C%2C%2Call_men-tops-sweat-collection-anchor01&colorDesc=BLACK&goodFlagDesc=pickUp&high=1000&rank=overall&sizeDesc=SMA006

他並不是什麼有毒的連結，而是網頁很常使用的技巧，叫做 Query Parameters（Query Param & 查詢參數）

如果你仔細看網址，可以看到中間有一個 ?，如果把 ? 的前半部分會是正常的網址：

https://www.uniqlo.com/tw/zh_TW/c/all_men-tops-sweat-collection.html

而 ? 後面，就是 Query Parameters 本人了！

categoryDesc=%2C%2C%2Call_men-tops-sweat-collection-anchor01&colorDesc=BLACK&goodFlagDesc=pickUp&high=1000&rank=overall&sizeDesc=SMA006

今天這篇就來好好聊聊 Query Parameters 的實務應用，

幫你一次搞懂它的概念、應用場景與技巧。

Query Parameters 是什麼？

簡單來說，它是網址中用來傳遞「查詢條件」的格式，像是從剛剛 uniqlo 的網址中，我們可以看到：

• 顏色（colorDesc=BLACK）
• 價格範圍（high=1000）
• 衣服尺寸（sizeDesc=SMA006）

而一個網址可以帶很多參數，彼此用 & 串接。

所以當你在 uniqlo 中使用他的過濾功能時，可以發現每點一個條件，網址就會增加一個 Query Parameter。

這種技巧很常用在需要過濾資料或是切換分頁的地方，比如電商網站、部落格等等

為什麼要用 Query Params？

他最大的優點是可以保留網頁當下的狀態，什麼意思呢？

繼續拿剛剛 uniqlo 的網址當例子，前面提到你每新增一個過濾功能，網址就會增加一個 Query Parameter。

這代表當你重新整理、儲存頁面或分享網址給其他人的時候，因為過濾的條件會被儲存在網址中，所以別人打開來也會是相同的過濾條件，你可以打開上面 uniqlo 的網站試試看，就會發現是我設置的過濾條件了。

另一個功能是可以用來追蹤或傳一些參數，如果你有訂閱電子報，當你打開電子報的連結時，通常會看到類似這樣的 URL

https://open.substack.com/pub/systemdesignone/p/llm-concepts?utm_source=post-email-title&utm_campaign=email-post-title&token=eyJ1c2VyX2lkIjoxMzg3NTg0OTYsInBvc3RfaWQiOjE3NjM2MDEyOSwiaWF0IjoxNzYyMTY5NDYwLCJleHAiOjE3NjQ3NjE0NjAsImlzcyI6InB1Yi0xNTExODQ1Iiwic3ViIjoicG9zdC1yZWFjdGlvbiJ9.ok0MoVWCHo0tu4IH7zNI-DajW-6GJnpiK_Z1F2MRzeE

認真看就可以看到像是 utm_source、utm_campaign 的 Query Parameters，他是 Google Analytics 用來追蹤用戶數據以及來源的，這樣就可以幫網站分析數據了

而你還可以看到 token ，他就是網站前端和後端交流用的東西啦！

Query Params 的常見應用場景

對於前端工程師來說，Query Params 是很好用一種狀態管理方法。

除了把狀態儲存在 JS、local storage 以外，我們還能放在 Query Params 中，比如以下幾種場景：

一、篩選與查詢條件

就像是前面 uniqlo 的例子，用來傳遞使用者的搜尋條件

/products?category=shoes&brand=nike&price_min=100&price_max=500

可以應用在：

• 商品篩選
• 使用者列表查詢
• 文章搜尋（標籤、作者、關鍵字）

這樣查詢條件可以被複製分享，刷新頁面時條件也不會消失。

二、分頁與排序

第二個場景是分頁與排序，很常使用在部落格的文章中

/users?page=2&limit=20&sort=created_at_desc

前端可以根據參數顯示第幾頁的資料、用什麼欄位排序，後端也可以根據這些參數組成 SQL 查詢。

三、狀態儲存與分享

也可以用來儲存前端的組件狀態，比如我想記錄當下的 sidebar 是否打開，又或是使用者是否使用黑暗模式。把資料儲存在 URL，就可以很方便地讓所有組件都抓到當下的狀態。

/dashboard?sidebar=open&theme=dark

四、驗證與登入流程

有些第三方服務會把驗證的結果放在 URL 裡回傳，比如 Email 登入（Magic Link）、Email 的驗證按鈕等等，直接把 token 放在 URL 後讓，讓後端驗證，這樣使用者就可以透過 Email 的連結實現快速登入。

/auth/callback?token=xxxx

五、行銷追蹤

以及前面提到的 GA 分析，也是一種應用

/landing?utm_source=google&utm_medium=cpc&utm_campaign=winter

這些參數可以串接 Google Analytics、Facebook Pixel 等工具，助你追蹤廣告效果與使用者來源。

在前端怎麼用 Query Parameters？

我們可以直接使用 window.location.search 來獲取 ? 後面的字串。假設你現在在這個網址：

https://example.com/products?category=shoes&page=2

console.log(window.location.search)
// 👉 輸出："?category=shoes&page=2"

接著可以使用 URLSearchParams 來製作物件更好管理 Query Parameters

const params = new URLSearchParams(window.location.search)
params.get('category') // => 'shoes'
params.set('page', 3)
params.delete('price')
params.toString() // category=shoes&page=3

最後當然要記得同步 UI 的狀態與 URL，使用者才能分享或儲存當前狀態哦！

結論

所以有時候網址超長，就是因為 Query Parameters 啦！他讓我們可以輕鬆保留網頁的狀態、追蹤數據、登入授權等，是非常方便的用法！