使用urlsearchparams处理javascript中的url查询参数

This story was originally published on phiilu.com.

这个故事最初在phiilu.com上发布 。

Overview on how to use URLSearchParams

有关如何使用URLSearchParams的概述

Often in Single Page Applications, you will have to interact with the URL to implement some functionality like pagination or filtering.

通常，在单页应用程序中，您将必须与URL交互以实现某些功能，例如分页或过滤。

The URL is a great place to put some of your applications state on it. The advantages are that users can copy the URL and share it and getting back to it with the set filters and page where they left off.

URL是在其上放置一些应用程序状态的好地方。 优点是用户可以复制URL并共享它，并使用设置的过滤器和他们上次退出的页面返回该URL。

The hard part is, how you get and update those URL parameters. Frankly, in modern browsers, there is a neat API named URLSearchParams. It allows us to extremely easy to retrieve or update the URL parameters. URLSearchParams is available in node.js and most browsers.

困难的部分是如何获取和更新这些URL参数。 坦白说，在现代浏览器中，有一个名为URLSearchParams的简洁API。 它使我们能够非常轻松地检索或更新URL参数。 URLSearchParams在node.js和大多数浏览器中可用。

Recently we had an issue with an npm package named query-string in production which would throw an error in IE11, so we decided to remove it and use URLSearchParams with a polyfill instead. We could have switched to the older version 5 and support older browsers, but I wanted to try out something new.

最近，我们在生产环境中遇到了一个名为query-string的npm包问题，该包会在IE11中引发错误 ，因此我们决定将其删除，然后将URLSearchParams与URLSearchParams一起使用。 我们可以切换到较旧的版本5并支持较旧的浏览器，但是我想尝试一些新的东西。

query-string is a great library and you can still use it, but it is more focused to be used on the backend with node.js and for newer browsers.

query-string是一个很棒的库，您仍然可以使用它，但是它更侧重于与node.js在后端一起使用以及用于较新的浏览器。

例 (Example)

I have put together a simple example of the most commonly used methods in this CodeSandBox. The example will list all the provided search parameters, adds one parameter, and allows the user to add or delete a certain parameter. Open it on CodeSandBox directly to see the URL.

我在此CodeSandBox中汇总了最常用方法的简单示例。 该示例将列出所有提供的搜索参数，添加一个参数，并允许用户添加或删除某个参数。 直接在CodeSandBox上打开它以查看URL。

入门 (Getting Started)

First, you will have to initialize the URLSearchParams class with a string that has the format of a query string like ?page=10&offset=5

首先，您必须使用具有查询字符串格式的字符串(如?page=10&offset=5初始化URLSearchParams类。

To get the query string from the current website you have to pass URLSearchParams the query string from the window.location object.

要从当前网站获取查询字符串，您必须传递URLSearchParams从window.location对象获取查询字符串。

Now you have an instance of URLSearchParams saved to params which you can use to read and modify query parameters.

现在，您已将URLSearchParams的实例保存到params ，可用于读取和修改查询参数。

读取参数 (Reading parameters)

If you just want to get one specific parameter you can use the method get()

如果只想获取一个特定参数，则可以使用方法get()

To get a list of all values you can use values()

要获取所有值的列表，可以使用values()

values() will return an Iterator which you can use to loop over the values in a foreach or like in the example to create a new array with Array.from

values()将返回一个Iterator，您可以使用它foreach的值，或者像示例中一样使用Array.from创建一个新数组。

There is also an entries() method which you can use. It is similar to values(), but it will also return you the key of the query parameter.

您还可以使用entries()方法。 它类似于values() ，但它还会返回您查询参数的键。

更新参数 (Updating parameters)

To modify URL parameters you can use functions like append(), delete() or set().

要修改URL参数，可以使用诸如append() ， delete()或set()类的函数。

In my example, I delete the parameter page using a button like this

在我的示例中，我使用类似的按钮删除参数page

The methods modify the current URLSearchParams instance. If you want to explore the whole API check out the documentation on MDN.

这些方法修改当前的URLSearchParams实例。 如果要浏览整个API，请查看MDN上的文档。

产生网址 (Generating a URL)

Another useful use case is to generate a URL with URL and under the hood URLSearchParams.

另一个有用的用例是使用URLSearchParams生成带有URL的URL 。

Using toString() will generate a URL as you would expect!

如您所料，使用toString()将生成一个URL！

浏览器支持 (Browser Support)

If you don’t have to support Internet Explorer 11 you can use URLSearchParams right away because it is supported in all modern browsers. It's been in Chrome since version 49 and in Firefox since version 44.

如果您不必支持Internet Explorer 11，则可以立即使用URLSearchParams ，因为所有现代浏览器都支持URLSearchParams 。 自49版以来，它已在Chrome中使用，自44版以来，已在Firefox中使用。

For you poor developers who still have to maintain IE11, you can still use URLSearchParams by using a polyfill.

对于仍然需要维护IE11的贫穷开发人员，您仍然可以通过使用URLSearchParams来使用URLSearchParams 。

结论 (Conclusion)

There are a lot of APIs already built into browsers and sometimes they are just the right tool for the job. I think learning a few of them or just being aware that they exist will make your developer life a bit easier. URLSearchParams is really cool and very easy to use. I am happy that it exists.

浏览器中已经内置了许多API，有时它们只是完成工作的正确工具。 我认为学习其中的一些或仅仅知道它们的存在将使您的开发人员生活变得更轻松。 URLSearchParams确实很酷，而且非常易于使用。 我很高兴它存在。

翻译自: https://medium.com/weekly-webtips/dealing-with-url-query-parameters-in-javascript-using-urlsearchparams-eb14825f87a4