Working with URLSearchParams in JavaScript

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

javascriptlet 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:

javascriptlet 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:

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

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

javascriptlet 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:

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

And check the non-existent one:

javascriptlet 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:

javascriptlet 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:

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

Let's check the changes:

javascriptlet 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:

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

Let's check the changes:

javascriptlet 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:

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

Let's check the changes:

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

Let's try to add an already existing parameter:

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

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

javascriptlet 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:

javascriptsearchParams.delete('b');

Let's check the changes:

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

Iterating over parameters in a loop

Parameters can be looped through:

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

Several identical parameters

Let our string have several identical parameters:

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

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

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

Practical tasks

Let the following string with parameters be given:

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