取得JavaScript中的查詢字串的方法

在這篇簡短的文章中，我們將討論在 JavaScript 中取得查詢字串的幾種不同方法。

當您使用 JavaScript 時，有時您需要存取腳本中的查詢字串參數。沒有直接的方法可以實現這一點，因為沒有內建的 JavaScript 函數或方法可以讓您實現它。當然，您可以找到許多滿足您要求的第三方實用程式腳本，但最好可以使用普通 JavaScript 來實現它。

在這篇文章中，我們將討論如何建立自訂函數以在普通 JavaScript 中取得查詢字串參數。稍後，我們還將探索 URLSearchParams 接口，以了解它的工作原理以及它如何幫助處理查詢字串參數。

如何在 Vanilla JavaScript 中取得查詢字串

#在本節中，我們將了解如何使用普通 JavaScript 取得查詢字串值。

讓我們來看看下面的 JavaScript 範例。

function getQueryStringValues(key) {
    var arrParamValues = [];
    var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    for (var i = 0; i < url.length; i++) {
        var arrParamInfo = url[i].split('=');

        if (arrParamInfo[0] == key || arrParamInfo[0] == key+'[]') {
            arrParamValues.push(decodeURIComponent(urlparam[1]));
        }
    }

    return (arrParamValues.length > 0 ? (arrParamValues.length == 1 ? arrParamValues[0] : arrParamValues) : null);
}

// index.php?keyword=FooBar&hobbies[]=sports&hobbies[]=Reading
console.log(getQueryStringValues('keyword')); // "FooBar"
console.log(getQueryStringValues('hobbies')); // Array [ "sports", "Reading" ]
console.log(getQueryStringValues('keyNotExits')); // null

我們建立了 getQueryStringValues 函數，您可以使用該函數取得 URL 中可用的查詢字串參數的值。

讓我們瀏覽一下函數，看看它是如何運作的。

以下程式碼片段是該函數中最重要的程式碼片段之一。

var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

首先，我們使用 indexOf 方法來尋找 ? 字元在 URL 中的位置。接下來，我們使用 slice 方法來提取 URL 中的查詢字串部分。最後，我們使用 split 方法透過 & 字元分割查詢字串。因此，url 變數是使用查詢字串參數陣列進行初始化的。

接下來，我們循環遍歷 url 陣列的所有元素。在循環中，我們使用 split 方法透過 = 字元來分割陣列值。這樣， arrParamInfo 變數就用一個陣列初始化，其中陣列鍵是參數名稱，陣列值是參數值。您可以在下面的程式碼片段中看到這一點。

var arrParamInfo = url[i].split('=');

接下來，我們將它與函數中傳遞的參數進行比較。如果它與傳入的參數匹配，我們會將參數值推送到 arrParamValues 陣列中。正如您所看到的，我們還介紹了單一參數和陣列參數。

if (arrParamInfo[0] == key || arrParamInfo[0] == key+'[]') {
    arrParamValues.push(decodeURIComponent(urlparam[1]));
}

最後，如果 arrParamValues 變數包含值，我們會回傳它，否則傳回 null 。

return (arrParamValues.length > 0 ? (arrParamValues.length == 1 ? arrParamValues[0] : arrParamValues) : null);

您可以繼續使用不同的值測試 getQueryStringValues 函數。

如上面的範例所示，我們使用不同的值來呼叫它，並使用 console.log 函數記錄輸出。需要注意的是，如果您在 getQueryStringValues 函數中傳遞的參數作為數組存在於查詢字串中，您將獲得一個數組作為回應，並且它將返回該參數的所有值。

URLSearchParams 方式

這是在 JavaScript 中取得查詢字串值的最簡單方法之一。 URLSearchParams 介面提供實用方法來處理 URL 的查詢字串。您可以透過「我可以使用嗎」來檢查瀏覽器支援情況。

讓我們快速看看它是如何運作的。

// index.php?keyword=Search Text&click=Submit
var urlParams = new URLSearchParams(window.location.search);

使用查詢字串初始化 URLSearchParams 物件後，您就可以使用 URLSearchParams 物件提供的實用方法了。

讓我們在本文中介紹一些有用的方法。

get 方法

顧名思義，get方法用來取得查詢字串參數的值。

讓我們嘗試透過以下範例來理解它。

// index.php?keyword=Search Text&click=Submit
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.get('keyword')); // “Search Text”

在上面的範例中，我們取得了 keyword 查詢字串參數的值，它將輸出搜尋文字。

這樣就可以使用get方法來取得任意查詢字串參數的值。

has 方法

has方法用於檢查查詢字串中是否存在參數。

// index.php?keyword=Search Text&click=Submit
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.has('order')); // “false”
console.log(objUrlParams.has('click')); // “true”

在上面的範例中，我們使用了 has 方法來檢查不同參數是否存在。

getAll 方法

getAll方法用來取得某個參數多次存在時的所有值。

讓我們透過以下範例來檢查一下。

// index.php?keyword=Search Text&click=Submit&filter=value1&filter=value2
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.getAll('filter')); // [“value1”,”valu2”]

如您所見，當我們使用 getAll 方法時，它會傳回與該參數關聯的所有值。

結論

今天，我們討論了可用於在 JavaScript 中取得查詢字串的不同方法。除了普通 JavaScript 之外，我們還討論如何使用 URLSearchParams 介面來取得查詢字串變數。

以上是取得JavaScript中的查詢字串的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！