前言
不知道你有沒有注意過，有時候網址後面會帶一大串參數，比如下面 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 啦！他讓我們可以輕鬆保留網頁的狀態、追蹤數據、登入授權等，是非常方便的用法！