Working with URLSearchParams in JavaScript

As you already know, when working with forms and GET requests in JavaScript, you can meet such strings:

let paramsString = 'a=1&b=2&c=3';

Sometimes you need to programmatically change the value of some parameter from this string. Writing code that make this is not very convenient. Therefore, the special URLSearchParams class is built into JavaScript to work with such strings.

Let's create an object of this class by passing our string with parameters as a parameter:

let paramsString = 'a=1&b=2&c=3';
let searchParams = new URLSearchParams(paramsString);

Let's see what methods the created object has.

Getting a parameter value

Using the get method, you can get the value of a parameter:

let res = searchParams.get('a');
console.log(res);

Let's try to get the value of a non-existent parameter:

let res = searchParams.get('x');
console.log(res); // shows null

Checking if a parameter exists

Using the has method, you can check for the presence of a parameter. We check an existing parameter:

let res = searchParams.has('a');
console.log(res); // shows true

And check the non-existent one:

let res = searchParams.has('x');
console.log(res); // shows false

To string conversion

Using the toString method, we can convert our object back to a string:

let res = searchParams.toString();
console.log(res); // shows 'a=1&b=2&c=3'

Modifying a parameter

Using the set method, you can change the value of a parameter:

searchParams.set('b', 'x');

Let's check the changes:

let res = searchParams.toString();
console.log(res); // shows 'a=1&b=x&c=3'

Adding a parameter with set

You can also add a new parameter using the set method:

searchParams.set('d', '4');

Let's check the changes:

let res = searchParams.toString();
console.log(res); // shows 'a=1&b=2&c=3&d=4'

Adding a parameter with append

You can also add a new parameter using the append method:

searchParams.append('d', '4');

Let's check the changes:

let res = searchParams.toString();
console.log(res); // shows 'a=1&b=2&c=3&d=4'

Let's try to add an already existing parameter:

searchParams.append('a', '4');

In this case, our method will simply add the parameter of the same name to the end:

let res = searchParams.toString();
console.log(res); // shows 'a=1&b=2&c=3&a=4'

This shows the difference between the set and append methods. The first one will change the existing parameter, and the second will simply add its duplicate to the end.

Deleting a parameter

Using the delete method, you can delete parameters:

searchParams.delete('b');

Let's check the changes:

let res = searchParams.toString();
console.log(res); // shows 'a=1&c=3'

Iterating over parameters in a loop

Parameters can be looped through:

for (let p of searchParams) {
	console.log(p);
}

Several identical parameters

Let our string have several identical parameters:

let paramsString = 'a=1&a=2b=2&c=3';

Using the getAll method, you can get an array of values of these parameters:

let res = searchParams.getAll('a');
console.dir(res); // shows [1, 2]

Practical tasks

Let the following string with parameters be given:

let paramsString = 'test1=param1&test2=param2&test3=param3';

Add another test3 parameter to this string.

Delete the test2 parameter from this string.

Change the test1 parameter value to a new one.