如何在 JavaScript 中获取查询字符串

摘要：在本教程中，您将学习如何使用 URLSearchParams  来获取 JavaScript 中的查询字符串参数。

要获取查询字符串，您可以访问 location 对象的 search 属性

location.search
Code language: CSS (css)

假设 location.search 的值为

'?type=list&page=20'
Code language: JavaScript (javascript)

要使用查询字符串，可以使用 URLSearchParams 对象。

const urlParams = new URLSearchParams(location.search);
Code language: JavaScript (javascript)

URLSearchParams 是一个 可迭代对象，因此可以使用 for...of 结构来迭代其元素，这些元素是查询字符串参数

const urlParams = new URLSearchParams(location.search);

for (const [key, value] of urlParams) {
    console.log(`${key}:${value}`);
}
Code language: JavaScript (javascript)

输出

type:list
page:20
Code language: CSS (css)

有用的 URLSearchParams 方法

URLSearchParams 有一些有用的方法可以返回参数键、值和条目的迭代器

• keys() 返回一个迭代器，它会迭代参数键。
• values() 返回一个迭代器，它会迭代参数值。
• entries() 返回一个迭代器，它会迭代参数的 (键，值) 对。

keys() 示例

以下示例使用 keys() 方法列出查询字符串的所有参数名称

const urlParams = new URLSearchParams('?type=list&page=20');

for (const key of urlParams.keys()) {
    console.log(key);
}
Code language: JavaScript (javascript)

输出

type
page

values() 示例

以下示例使用 keys() 方法列出查询字符串的所有参数值

const urlParams = new URLSearchParams('?type=list&page=20');

for (const value of urlParams.values()) {
    console.log(value);
}
Code language: JavaScript (javascript)

输出

list
20
Code language: PHP (php)

entries() 示例

以下示例使用 entries() 方法列出查询字符串的所有参数键/值对

const urlParams = new URLSearchParams('?type=list&page=20');

for (const entry of urlParams.entries()) {
    console.log(entry);
}
Code language: JavaScript (javascript)

输出

["type", "list"]
["page", "20"]
Code language: JSON / JSON with Comments (json)

检查查询字符串参数是否存在

URLSearchParams.has() 方法如果存在具有指定名称的参数，则返回 true。

const urlParams = new URLSearchParams('?type=list&page=20');

console.log(urlParams.has('type')); // true
console.log(urlParams.has('foo'));  // false
Code language: JavaScript (javascript)

输出

true
false
Code language: JavaScript (javascript)

摘要

• URLSearchParams 提供了一个接口来处理查询字符串参数
• URLSearchParams 是可迭代的，因此可以使用 for...of 结构来迭代查询字符串参数。
• URLSearchParams 的 has() 方法确定是否存在具有指定名称的参数。