Building and Parsing Query Strings in JavaScript

Last reviewed on July 17, 2019

The URLSearchParams and URL classes can be used to build and parse query strings in JavaScript in both the browser and Node.

Building a Query String

Not too long ago, in order to build a query string we had to do messy string concatenation (although it got much better with template literals) or rely on a library. Now, we can use the URLSearchParams class.

let qs = new URLSearchParams();
qs.append('start', 'now-2m');
qs.append('end', 'now');
qs.toString(); // 'start=now-2m&end=now'

Parsing a Query String

Now let's say we have a URL and we need to manually parse the query string. Instead of manually parsing the URL string, we can use the URL class.

let url = new URL('https://mysite.com/results?page=1&page-size=10');
let qs = url.searchParams;
qs.get('page'); // 1
qs.get('page-size'); // '10'

The searchParams property on a URL instance is an instance of URLSearchParams.

One last thing to mention is browser support, which is pretty good for both of these classes. Check out their support on Can I use.