今天分享一段優質 JS 程式碼片段簡化獲取url中引數流程！
const getQueryByName = (name) => {
const query = new URLSearchParams(location.search)
return decodeURIComponent(query.get(name))
}
// url: https://sunday.com/?name=fatfish&age=100
const name = getQueryByName('name') // fatfish
const age = getQueryByName('age') // 100
const gender = getQueryByName('gender') // null
分享原因
這段程式碼透過 URLSearchParams 物件簡化了從 URL 中獲取查詢引數的過程。
透過這種方法，可以更方便地在 JavaScript 中解析和獲取 URL 查詢引數，特別適用於處理需要從 URL 中提取引數的場景，比如讀取使用者在網頁中的輸入或搜尋關鍵字等。
這是專案中一個很常見的操作，之前我們經常會使用 正規表示式 或者 拆分字串 來完成，現在有了更簡單的方式！
程式碼解析
1. const query = new URLSearchParams(location.search);
建立 URLSearchParams 物件。
URLSearchParams 是 Web API 的一部分，用於操作 URL 的查詢字串。
location.search 返回當前 URL 的查詢字串（例如 ?name=value&key=value）。
URLSearchParams 物件將其解析為一個可以操作的查詢引數物件。
2. decodeURIComponent(query.get(name));
query.get(name) 方法從查詢引數物件中獲取名稱為 name 的引數值。
decodeURIComponent 用於對引數值進行解碼，以確保返回的值是一個人類可讀的字串，避免 URL 編碼帶來的問題（例如 %20 代表空格）。
