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 :

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

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

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

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

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

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

Vérifions un paramètre inexistant :

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

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

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

Vérifions les modifications :

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

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

Vérifions les modifications :

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

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

Vérifions les modifications :

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

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

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

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

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

javascriptsearchParams.delete('b');

Vérifions les modifications :

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

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

Plusieurs paramètres identiques

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

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

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

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

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