前端獲取 URL 參數的通用 JavaScript 函式

頁面 A 跳轉至頁面 B 並攜帶查詢字串（?id=1&name=test），頁面 B 需解析參數。以下提供可直接複製使用的通用函式：

原生 JS 解析函式

function getUrlParams() {
    const params = {};
    const search = window.location.search.substring(1); // 去掉 '?'
    if (!search) return params;
    search.split('&').forEach(pair => {
        const [key, value] = pair.split('=');
        params[decodeURIComponent(key)] = decodeURIComponent(value || '');
    });
    return params;
}
// 使用範例
const params = getUrlParams();
console.log(params.id);   // "1"
console.log(params.name); // "test"

URLSearchParams API（現代瀏覽器）

const params = new URLSearchParams(window.location.search);
const id = params.get('id');        // "1"
const name = params.get('name');    // "test"
// 迭代所有
for (const [k, v] of params) console.log(k, v);

jQuery 版（若專案已引用 jQuery）

$.urlParam = function(name) {
    const results = new RegExp('[?&]' + name + '=([^&#]*)').exec(window.location.href);
    return results ? decodeURIComponent(results[1]) : null;
};
const id = $.urlParam('id');

注意事項

• 參數值可能包含特殊字元，務必使用 decodeURIComponent 解碼。
• 同名參數出現多次（?tag=a&tag=b），URLSearchParams.getAll('tag') 可取得陣列。
• Hash 模式路由（#/page?id=1）需解析 location.hash。

掌握這幾種寫法，涵蓋從傳統專案到現代 SPA 的所有參數解析需求。