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.