如何使用URLSearchParams在JavaScript中获取查询字符串值

The HTTP protocol allows the request to a web page to be made with a query string.

HTTP协议允许使用查询字符串向网页发出请求。

Like this:

像这样：

https://test.com/?name=roger
https://test.com/hello?name=roger

In this case we have a single query parameter, named name, with the value roger.

在这种情况下，我们有一个名为name查询参数，其值为roger 。

You can have multiple parameters, like this:

您可以有多个参数，如下所示：

https://test.com/hello?name=roger&age=20

The parameters passed as a query string are normally used server-side, to generate a proper response. Here’s how you can access query parameters using Node.js.

作为查询字符串传递的参数通常在服务器端使用，以生成适当的响应。 这是使用Node.js访问查询参数的方法 。

To access the value of the query inside the browser, using JavaScript, we have a special API called URLSearchParam, supported by all modern browsers

要使用JavaScript在浏览器中访问查询的值，我们有一个特殊的API，称为URLSearchParam ，所有现代浏览器都支持

Here is how we can use it:

这是我们如何使用它：

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

Note: don’t pass the full URL as a parameter to URLSearchParams(), but only the query string part of the URL, which you access using window.location.search.

注意：请勿将完整的URL作为参数传递给URLSearchParams() ，而仅传递URL的查询字符串部分，您可以使用window.location.search访问。

In the case of:

如果是：

https://test.com/hello?name=roger

window.location.search is equal to the string ?name=roger.

window.location.search等于字符串?name=roger 。

Now that you have the params object, you can query it.

现在您有了params对象，可以查询它了。

You can check if a parameter was passed:

您可以检查是否传递了参数：

params.has('test')

You can get the value of a parameter:

您可以获取参数的值：

params.get('test')

You can iterate over all the parameters, using for..of:

您可以使用for..of遍历所有参数：

const params = new URLSearchParams(window.location.search)
for (const param of params) {
  console.log(param)
}

A parameter can have more than one value.

一个参数可以有多个值。

In this case, we pass the same parameter name multiple times, like this:

在这种情况下，我们多次传递相同的参数名称，如下所示：

https://test.com/hello?name=roger&name=flavio

We have no way to detect if a parameters is passed more than once. If we use params.get('name'), we’ll only get the first value back.

我们无法检测是否多次传递了参数。 如果我们使用params.get('name') ，我们将只获得第一个值。

We can sue params.getAll('name') to get back an array with all the values passed.

我们可以起诉params.getAll('name')来获取一个传递了所有值的数组。

In addition to has(), get() and getAll(), the URLSearchParams API offers several other methods that we can use to loop through the parameters:

除了has() ， get()和getAll() ， URLSearchParams API还提供了几种其他方法可用于循环遍历参数：

• forEach() iterates over the paramters

  forEach()遍历参数

• entries() returns an iterator containing the parameters key/values

  entries()返回包含参数key / values的迭代器

• keys() returns an iterator containing the parameters keys

  keys()返回包含参数keys的迭代器

• values() returns an iterator containing the parameters values

  values()返回包含参数值的迭代器

Other methods to alter the parameters, for use in other JavaScript running in the page (they do not change the URL):

用于在页面中运行的其他JavaScript中使用的其他更改参数的方法(它们不会更改URL)：

• append() to append a new parameter to the object

  append()将新参数附加到对象

• delete() to delete an existing parameter

  delete()删除现有参数

• set() to set the value of a parameter

  set()设置参数值

We also have sort() to sort parameters by key value, and we have the toString() method to generate a query string from the values.

我们还具有sort()来按键值对参数进行排序，并且我们具有toString()方法来根据值生成查询字符串。

We can use append() / set() / delete() to edit the query string, and generate a new one with toString().

我们可以使用append() / set() / delete()编辑查询字符串，并使用toString()生成一个新的查询字符串。

翻译自: https://flaviocopes.com/urlsearchparams/