如何從url中提取參數值？1.使用urlsearchparams是現代推薦方法，適用于大多數瀏覽器，能輕松解析參數并處理編碼；2.正則表達式適用于兼容老瀏覽器或高性能場景，但需手動解碼；3.第三方庫如qs適合處理復雜結構，支持嵌套對象和數組，但會增加依賴。例如，urlsearchparams可直接解析”tag=JavaScript&tag=nodejs“獲取多個同名參數，正則表達式需通過特殊匹配提取，而qs則能解析出完整對象結構。
直接從URL中提取參數值，聽起來簡單，但實際應用中卻藏著不少小技巧。最直接的方法是使用URLSearchParams，現代瀏覽器都支持，用起來非常方便。當然，如果兼容性要求高，正則表達式也能派上大用場。還有一些庫，比如qs，可以更方便地處理復雜的參數結構。
解決方案
1. 使用 URLSearchParams (推薦)
這是最現代、最簡潔的方法，適用于大多數現代瀏覽器。
function getParameterByName(name, url = window.location.href) { name = name.replace(/[[]]/g, '$&'); const urlParams = new URLSearchParams(new URL(url).search); return urlParams.get(name) || null; } // 示例 const url = "https://www.example.com/page?name=John&age=30&city=New%20York"; const name = getParameterByName('name', url); // John const age = getParameterByName('age', url); // 30 const city = getParameterByName('city', url); // New York console.log("Name:", name); console.log("Age:", age); console.log("City:", city); // 獲取多個相同參數名的值 const url2 = "https://www.example.com/page?tag=javascript&tag=nodeJS&tag=react"; const urlParams2 = new URLSearchParams(new URL(url2).search); const tags = urlParams2.getAll('tag'); // ['javascript', 'nodejs', 'react'] console.log("Tags:", tags);
這個方法的好處是簡單易懂，而且URLSearchParams對象提供了一系列方便的方法來操作URL參數。注意，new URL(url).search 確保了能正確解析包含復雜字符的URL。
2. 使用正則表達式
如果需要兼容老版本的瀏覽器，或者對性能有極致要求，可以使用正則表達式。
function getParameterByNameRegex(name, url = window.location.href) { name = name.replace(/[[]]/g, '$&'); const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'); const results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/+/g, ' ')); } // 示例 const url = "https://www.example.com/page?name=John&age=30"; const name = getParameterByNameRegex('name', url); // John const age = getParameterByNameRegex('age', url); // 30 console.log("Name:", name); console.log("Age:", age);
正則表達式方法稍微復雜一些，但它不依賴于任何新的API，因此兼容性更好。需要注意的是，要使用decodeURIComponent來解碼URL編碼的參數值。
3. 使用第三方庫 (例如 qs)
對于更復雜的URL參數，例如嵌套的對象或數組，使用第三方庫可能更方便。qs 是一個流行的庫，可以用來解析和序列化URL參數。
首先，安裝 qs:
npm install qs
然后，在你的代碼中使用它：
import qs from 'qs'; function getParameterByNameQs(name, url = window.location.href) { const queryString = url.split('?')[1]; if (!queryString) return null; const parsedQuery = qs.parse(queryString); return parsedQuery[name] || null; } // 示例 const url = "https://www.example.com/page?name=John&age=30&address[city]=New%20York&address[country]=USA"; const name = getParameterByNameQs('name', url); // John const age = getParameterByNameQs('age', url); // 30 const city = getParameterByNameQs('address[city]', url); // New York console.log("Name:", name); console.log("Age:", age); console.log("City:", city); // 解析整個query string const url2 = "https://www.example.com/page?name=John&age=30&address[city]=New%20York&address[country]=USA"; const queryString2 = url2.split('?')[1]; const parsedQuery2 = qs.parse(queryString2); console.log("Parsed Query:", parsedQuery2); // 輸出: // { // name: 'John', // age: '30', // address: { city: 'New York', country: 'USA' } // }
qs 庫可以處理更復雜的URL結構，讓代碼更簡潔易懂。但需要注意的是，引入第三方庫會增加項目的依賴。
如何處理URL中包含特殊字符的參數值？
URL中的某些字符（例如空格、#、&）需要進行編碼才能正確傳遞。通常，這些字符會被編碼成 %20、%23、%26 等形式。在獲取參數值之后，需要對這些編碼進行解碼，才能得到原始的參數值。
URLSearchParams 和 decodeURIComponent 都能自動處理這些編碼，因此使用它們可以避免手動解碼的麻煩。但如果使用正則表達式，則需要手動使用 decodeURIComponent 進行解碼。
例如：
const url = "https://www.example.com/page?message=Hello%20World%231&name=John%26Doe"; // 使用 URLSearchParams const urlParams = new URLSearchParams(new URL(url).search); const message = urlParams.get('message'); // Hello World#1 const name = urlParams.get('name'); // John&Doe console.log("Message:", message); console.log("Name:", name); // 使用正則表達式 (需要手動解碼) function getParameterByNameRegex(name, url = window.location.href) { name = name.replace(/[[]]/g, '$&'); const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'); const results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/+/g, ' ')); } const messageRegex = getParameterByNameRegex('message', url); // Hello World#1 const nameRegex = getParameterByNameRegex('name', url); // John&Doe console.log("Message (Regex):", messageRegex); console.log("Name (Regex):", nameRegex);
如何獲取URL中的哈希值（#后面的部分）？
哈希值（也稱為錨點）是URL中 # 符號后面的部分。它通常用于在頁面內跳轉到特定的位置。要獲取哈希值，可以使用 window.location.hash 屬性。
const url = "https://www.example.com/page#section2"; const hash = window.location.hash; // #section2 console.log("Hash:", hash); // 去掉 # 符號 const hashWithoutPound = hash.substring(1); // section2 console.log("Hash without #: ", hashWithoutPound);
需要注意的是，哈希值不會被發送到服務器，它只在客戶端起作用。
什么時候應該使用哪種方法？
選擇哪種方法取決于你的具體需求：
- URLSearchParams: 如果你的目標是現代瀏覽器，并且不需要處理非常復雜的URL結構，那么 URLSearchParams 是最佳選擇。它簡單易用，而且性能也不錯。
- 正則表達式: 如果你需要兼容老版本的瀏覽器，或者對性能有極致要求，那么可以使用正則表達式。但需要注意的是，正則表達式的編寫和維護可能會比較困難。
- 第三方庫 (qs): 如果你需要處理非常復雜的URL結構，例如嵌套的對象或數組，那么使用第三方庫可能更方便。但需要注意的是，引入第三方庫會增加項目的依賴。
總的來說，URLSearchParams 是一個不錯的起點，只有在它無法滿足你的需求時，才考慮使用其他方法。
