Travail avec URLSearchParams en JavaScript

Comme vous le savez déjà, lorsque vous travaillez avec des formulaires et des requêtes GET en JavaScript, des chaînes de caractères de ce type apparaissent :

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

Parfois, il est nécessaire de modifier programmatiquement la valeur d'un paramètre quelconque dans cette chaîne. Écrire du code qui fait cela n'est pas très pratique. C'est pourquoi JavaScript intègre une classe spéciale URLSearchParams pour travailler avec de telles chaînes.

Créons un objet de cette classe en passant notre chaîne de paramètres en paramètre :

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

Voyons quelles méthodes possède l'objet créé.

Obtention de la valeur d'un paramètre

Avec la méthode get, on peut obtenir la valeur d'un paramètre :

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

Essayons d'obtenir la valeur d'un paramètre inexistant :

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

Vérification de la présence d'un paramètre

Avec la méthode has, on peut vérifier la présence d'un paramètre. Vérifions un paramètre existant :

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

Vérifions un paramètre inexistant :

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

Conversion en chaîne de caractères

Avec la méthode toString, on peut convertir notre objet en chaîne de caractères :

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

Modification des paramètres

Avec la méthode set, on peut modifier la valeur d'un paramètre :

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

Vérifions les modifications :

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

Ajout de paramètres

Avec la méthode set, on peut également ajouter un nouveau paramètre :

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

Vérifions les modifications :

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

Ajout de paramètres

Avec la méthode append, on peut également ajouter un nouveau paramètre :

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

Vérifions les modifications :

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

Essayons d'ajouter un paramètre déjà existant :

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

Dans ce cas, notre méthode ajoutera simplement un paramètre homonyme à la fin :

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

C'est là que se manifeste la différence entre les méthodes set et append. La première modifiera le paramètre existant, tandis que la seconde ajoutera simplement son doublon à la fin.

Suppression de paramètres

Avec la méthode delete, on peut supprimer des paramètres :

searchParams.delete('b');

Vérifions les modifications :

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

Parcours des paramètres par une boucle

Les paramètres peuvent être parcourus par une boucle :

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

Plusieurs paramètres identiques

Supposons que notre chaîne contienne plusieurs paramètres identiques :

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

Avec la méthode getAll, on peut obtenir un tableau des valeurs de ces paramètres :

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

Tâches pratiques

Supposons que la chaîne de paramètres suivante soit donnée :

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

Ajoutez à cette chaîne un autre paramètre test3.

Supprimez de cette chaîne le paramètre test2.

Modifiez le paramètre test1 avec une nouvelle valeur.