# 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.

← →
↑
en ru