在 JavaScript 中解析查詢字串
在本教程中，我們將瞭解如何在 JavaScript 中解析查詢字串，但在深入瞭解之前，讓我們回顧一下歷史，看看為什麼我們首先需要這些查詢字串？
查詢字串 是緊跟在問號 ? 之後的超連結或 URL 的一部分。它將值設定為稱為鍵或引數的變數，有點類似於 python 字典。它將資料從一個網頁傳送到另一個網頁，同時從資料庫或網路伺服器檢索指定的資料。
虛擬超連結
www.mysite
.com // default.aspx?username=user+1&units=kgs&units=pounds&permission=false
在上面的超連結中，這部分指的是查詢：
username = user + 1 & units = kgs& units = pounds& permission = false
順便說一下，解析意味著挖出某些東西的一部分，這裡我們談論的是查詢字串，這意味著這個過程將獲取我們查詢字串的一部分並使用它。解析後的查詢字串在引用或檢索資料請求中起著重要作用。
解析後的查詢如下所示：
username = user 1
現在讓我們看一個更具體的例子，它展示了 JavaScript 如何通過多個測試用例解析給定超連結的查詢字串；在這個例子中，我們的 parseQuery 函式將超連結作為引數，並以 JavaScript 物件的形式輸出解析後的查詢。
parseQuery 的語法
parseQuery(query)
- 查詢：作為查詢傳遞的特定字串。
function parseQuery(query) {
object = {};
if (query.indexOf('?') != -1) {
query = query.split('?');
query = query[1];
}
parseQuery = query.split('&');
for (var i = 0; i < parseQuery.length; i++) {
pair = parseQuery[i].split('=');
key = decodeURIComponent(pair[0]);
if (key.length == 0) continue;
value = decodeURIComponent(pair[1].replace('+', ' '));
if (object[key] == undefined)
object[key] = value;
else if (object[key] instanceof Array)
object[key].push(value);
else
object[key] = [object[key], value];
}
return object;
};
讓我們從建立一個空物件開始，然後我們的查詢或超連結從 ? 中斷擺脫多餘的 URL。
完成後，我們將查詢從 & 中分離出來，以獲取所謂的屬性及其值，以列表的形式進行迭代，以分別提取值和屬性。
現在，鍵值對將檢查一些測試用例，最後，從剩餘的值中，我們將任何 + 符號替換為一個空格，從而為我們提供更易讀的值。
讓我們來看看我們的測試用例：
情況 1
parseQuery('username=Eren&units=kgs&permission=true');
在這種情況下，我們傳遞一個查詢而不是 URL username=Eren&units=kgs&permission=true 將會發生的是它將跳過第一個 if 塊，並且由於有多個鍵和值對，因此查詢被拆分，並且這行程式碼被檢查為真，因為我們沒有重複的鍵。
if (object[key] == undefined) object[key] = value;
輸出：
{
username: 'Eren',
units: 'kgs',
permission: 'true'
}
案例 2
parseQuery(
'http:/www.mysite.com//default.txt?username=David+Rogers&units=kgs&permission=false');
現在我們使用完整的超連結
http: /www.mysite.com/ / default.txt ? username = David + Rogers& units =
kgs& permission = false
作為引數，下面給出的 if 條件得到 True，這個塊將從我們的超連結中提取查詢
if (query.indexOf('?') != -1) {
輸出：
{
username: 'David Rogers',
units: 'kgs',
permission: 'false'
}
案例 3
parseQuery(
'http:/www.mysite.com//default.txt?username=user1&insect=%D0%B1%D0%B0%D0%B1%D0%BE%D1%87%D0%BA%D0%B0');
讓我們嘗試提供一個包含編碼訊息的 URL。
http: /www.mysite.com/ / default.txt ? username = user1& insect = % D0 % B1 %
D0 % B0 % D0 % B1 % D0 % BE % D1 % 87 % D0 % BA % D0 % B0
我們已經使用 decodeURIComponent() 函式來解碼此訊息。
輸出：
{
username: 'user 1',
insect: 'бабочка'
}
案例 4
parseQuery(
'http:/www.mysite.com//default.txt?username=Eren&units=kgs&permission=false&units=pounds');
最後，我們考慮一個包含重複鍵的超連結
http: /www.mysite.com/ / default.txt ?
username = Eren& units = kgs& permission = false& units = pounds
對於程式碼行下方的第一個重複值，將執行並建立一個陣列。
else object[key] = [object[key], value];
之後，每個重複的條目都會被推送到這個陣列中。
else if (object[key] instanceof Array) object[key].push(value);
輸出：
{
username: 'Eren',
units: [ 'kgs', 'pounds'],
permission: 'false'
}