在 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'
}