製作Bug的筆記本

使用 URLSearchParams (現代推薦方式)

URLSearchParams 是一個內建的 API，適合用來解析和處理 URL 參數。簡單易用，且支援現代瀏覽器。

// 假設 URL 是：https://example.com?name=John&age=25
const urlParams = new URLSearchParams(window.location.search);

// 取得特定參數值
const name = urlParams.get('name'); // "John"
const age = urlParams.get('age');   // "25"

// 檢查參數是否存在
if (urlParams.has('name')) {
    console.log('有 name 參數');
}

// 遍歷所有參數
urlParams.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

優點：

• 語法簡單，易於閱讀。
• 自動處理 URL 編碼 (例如 name=John%20Doe 會解碼為 "John Doe")。
• 支援多值參數 (例如 ?color=red&color=blue)。
   

2. 使用 window.location.search 手動解析

如果不使用 URLSearchParams，可以直接從 window.location.search 取得原始查詢字串，然後自己解析。

// 假設 URL 是：https://example.com?name=John&age=25
const queryString = window.location.search; // "?name=John&age=25"
const params = {};

// 移除 "?" 並分割成鍵值對
const pairs = queryString.slice(1).split('&');
pairs.forEach(pair => {
    const [key, value] = pair.split('=');
    params[key] = value;
});

console.log(params.name); // "John"
console.log(params.age);  // "25"

3. 使用完整 URL 物件 (URL)

如果你需要處理完整的 URL，可以使用 URL 物件。

• 目標從 http://localhost/geturlparameter.html?id=21&name=Tom

var getUrlString = location.href;

url.searchParams.get('id'); // 回傳 21
url.searchParams.get('name'); //回傳 Tom

或是

let params = (new URL(document.location)).searchParams;
let name = params.get('id'); // 21.
let age = parseInt(params.get('name')); // Tom