Lavorare con URLSearchParams in JavaScript

Come già sapete, quando si lavora con moduli e richieste GET in JavaScript, si generano stringhe di questo tipo:

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

A volte è necessario modificare a livello di codice il valore di un parametro in questa stringa. Scrivere codice che fa questo non è molto conveniente. Pertanto, in JavaScript è integrata una speciale classe URLSearchParams per lavorare con questo tipo di stringhe.

Creiamo un oggetto di questa classe, passando come parametro la nostra stringa con i parametri:

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

Vediamo quali metodi ha l'oggetto creato.

Ottenere il valore di un parametro

Utilizzando il metodo get si può ottenere il valore di un parametro:

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

Proviamo a ottenere il valore di un parametro inesistente:

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

Verificare la presenza di un parametro

Utilizzando il metodo has si può verificare la presenza di un parametro. Verifichiamo un parametro esistente:

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

Verifichiamone uno inesistente:

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

Convertire in stringa

Utilizzando il metodo toString si può convertire il nostro oggetto nuovamente in una stringa:

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

Modificare i parametri

Utilizzando il metodo set si può modificare il valore di un parametro:

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

Verifichiamo le modifiche:

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

Aggiungere parametri

Utilizzando il metodo set si può anche aggiungere un nuovo parametro:

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

Verifichiamo le modifiche:

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

Aggiungere parametri

Utilizzando il metodo append si può anche aggiungere un nuovo parametro:

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

Verifichiamo le modifiche:

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

Proviamo ad aggiungere un parametro già esistente:

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

In questo caso, il nostro metodo aggiungerà semplicemente un parametro con lo stesso nome alla fine:

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

In questo sta la differenza tra i metodi set e append. Il primo modificherà il parametro esistente, mentre il secondo aggiungerà semplicemente un suo duplicato alla fine.

Eliminare parametri

Utilizzando il metodo delete si possono eliminare parametri:

searchParams.delete('b');

Verifichiamo le modifiche:

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

Iterare sui parametri con un ciclo

I parametri possono essere iterati con un ciclo:

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

Parametri multipli con lo stesso nome

Supponiamo che nella nostra stringa ci siano più parametri con lo stesso nome:

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

Utilizzando il metodo getAll si può ottenere un array dei valori di questi parametri:

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

Compiti pratici

Sia data la seguente stringa con parametri:

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

Aggiungete a questa stringa un altro parametro test3.

Rimuovete da questa stringa il parametro test2.

Modificate il parametro test1 con un nuovo valore.