ThisWeb
資深前端工程師
發佈/更新於
和 2000+ 工程師一起學習軟體、AI 開發技巧，每週一收穫 1 篇技術內容、1 段職涯分享、1 個最新資訊！
不知道你有沒有注意過，有時候網址後面會帶一大串參數，比如下面 Uniqlo 的網址：
他並不是什麼有毒的連結，而是網頁很常使用的技巧，叫做 Query Parameters（Query Param & 查詢參數）
如果你仔細看網址，可以看到中間有一個 ?，如果把 ? 的前半部分會是正常的網址：
而 ? 後面，就是 Query Parameters 本人了！
今天這篇就來好好聊聊 Query Parameters 的實務應用，
幫你一次搞懂它的概念、應用場景與技巧。
簡單來說，它是網址中用來傳遞「查詢條件」的格式，像是從剛剛 uniqlo 的網址中，我們可以看到：
colorDesc=BLACK）high=1000）sizeDesc=SMA006）而一個網址可以帶很多參數，彼此用 & 串接。
所以當你在 uniqlo 中使用他的過濾功能時，可以發現每點一個條件，網址就會增加一個 Query Parameter。
這種技巧很常用在需要過濾資料或是切換分頁的地方，比如電商網站、部落格等等
他最大的優點是可以保留網頁當下的狀態，什麼意思呢？
繼續拿剛剛 uniqlo 的網址當例子，前面提到你每新增一個過濾功能，網址就會增加一個 Query Parameter。
這代表當你重新整理、儲存頁面或分享網址給其他人的時候，因為過濾的條件會被儲存在網址中，所以別人打開來也會是相同的過濾條件，你可以打開上面 uniqlo 的網站試試看，就會發現是我設置的過濾條件了。
另一個功能是可以用來追蹤或傳一些參數，如果你有訂閱電子報，當你打開電子報的連結時，通常會看到類似這樣的 URL
認真看就可以看到像是 utm_source、utm_campaign 的 Query Parameters，他是Google Analytics用來追蹤用戶數據以及來源的，這樣就可以幫網站分析數據了
而你還可以看到 token ，他就是網站前端和後端交流用的東西啦！
對於前端工程師來說，Query Params 是很好用一種狀態管理方法。
除了把狀態儲存在 JS、local storage 以外，我們還能放在 Query Params 中，比如以下幾種場景：
就像是前面 uniqlo 的例子，用來傳遞使用者的搜尋條件
可以應用在：
這樣查詢條件可以被複製分享，刷新頁面時條件也不會消失。
第二個場景是分頁與排序，很常使用在部落格的文章中
前端可以根據參數顯示第幾頁的資料、用什麼欄位排序，後端也可以根據這些參數組成 SQL 查詢。
也可以用來儲存前端的組件狀態，比如我想記錄當下的 sidebar 是否打開，又或是使用者是否使用黑暗模式。把資料儲存在 URL，就可以很方便地讓所有組件都抓到當下的狀態。
有些第三方服務會把驗證的結果放在 URL 裡回傳，比如 Email 登入（Magic Link）、Email 的驗證按鈕等等，直接把 token 放在 URL 後讓，讓後端驗證，這樣使用者就可以透過 Email 的連結實現快速登入。
以及前面提到的 GA 分析，也是一種應用
這些參數可以串接 Google Analytics、Facebook Pixel 等工具，助你追蹤廣告效果與使用者來源。
我們可以直接使用 window.location.search 來獲取 ? 後面的字串。假設你現在在這個網址：
接著可以使用 URLSearchParams 來製作物件更好管理 Query Parameters
最後當然要記得同步 UI 的狀態與 URL，使用者才能分享或儲存當前狀態哦！
所以有時候網址超長，就是因為 Query Parameters 啦！他讓我們可以輕鬆保留網頁的狀態、追蹤數據、登入授權等，是非常方便的用法！
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=SMA006https://www.uniqlo.com/tw/zh_TW/c/all_men-tops-sweat-collection.htmlcategoryDesc=%2C%2C%2Call_men-tops-sweat-collection-anchor01&colorDesc=BLACK&goodFlagDesc=pickUp&high=1000&rank=overall&sizeDesc=SMA006https://open.substack.com/pub/systemdesignone/p/llm-concepts?utm_source=post-email-title&utm_campaign=email-post-title&token=eyJ1c2VyX2lkIjoxMzg3NTg0OTYsInBvc3RfaWQiOjE3NjM2MDEyOSwiaWF0IjoxNzYyMTY5NDYwLCJleHAiOjE3NjQ3NjE0NjAsImlzcyI6InB1Yi0xNTExODQ1Iiwic3ViIjoicG9zdC1yZWFjdGlvbiJ9.ok0MoVWCHo0tu4IH7zNI-DajW-6GJnpiK_Z1F2MRzeE/products?category=shoes&brand=nike&price_min=100&price_max=500/users?page=2&limit=20&sort=created_at_desc/dashboard?sidebar=open&theme=dark/auth/callback?token=xxxx/landing?utm_source=google&utm_medium=cpc&utm_campaign=winterhttps://example.com/products?category=shoes&page=2
console.log(window.location.search)
// 👉 輸出："?category=shoes&page=2"const params = new URLSearchParams(window.location.search);
params.get('category'); // => 'shoes'
params.set('page', 3);
params.delete('price');
params.toString(); // category=shoes&page=3