如何在 JavaScript 中獲取查詢字符串參數

在之前的文章中，我們了解瞭如何使用 URLSearchParams 添加和更新查詢字符串參數 在 JavaScript 中。今天，你將學習如何在 JavaScript 中從 URL 中獲取查詢字符串參數。

要從當前瀏覽器 URL 中獲取完整的查詢字符串，可以使用 window.location.search ：

// URL: http://example.com?size=M&size=XL&price=29&sort=desc

console.log(window.location.search);
// ?size=M&size=XL&price=29&sort=desc

創建 URLSearchParams 的實例 ，只需將完整的查詢字符串傳遞給它的構造函數：

const params = new URLSearchParams(window.location.search);

URLSearchParams 提供了幾種可用於操作查詢字符串參數的方法：

// get parameter
params.get('price');    // 29

// get multi-valued parameter
params.getAll('size');    // [ 'M', 'XL' ]

// check if parameter exists
params.has('sort');    // true

// iterate over all parameters
for (const p of params) {
    console.log(p);
    
}

// [ 'size', 'M' ]
// [ 'size', 'XL' ]
// [ 'price', '29' ]
// [ 'sort', 'desc' ]

而 URLSearchParams 是處理查詢字符串的理想解決方案，但並非所有瀏覽器都支持。如果你想支持像 Internet Explorer 這樣的舊瀏覽器，可以使用 polyfill。

或者，您可以編寫一個小的 JavaScript 函數，接收查詢字符串參數名稱並返回其值：

function queryParam(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(window.location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

queryParam('price');    // 29
queryParam('sort');    // desc