Paramètres URL en JavaScript : analyse détaillée sous le capot

Paramètres URL en JavaScript : de la base à la maîtrise

Chaque développeur a un jour besoin d'extraire des données depuis la barre d'adresse du navigateur. Vous ouvrez une page, vous voyez quelque chose comme /products?id=42&category=books — et vous comprenez que derrière cette chaîne se cachent des informations essentielles. Comment les récupérer ? Cette question, qui a recueilli des milliers de votes sur Stack Overflow, se résume à : "How can I get query string values in JavaScript?". Aujourd'hui, nous ne nous contentons pas de donner une réponse toute faite — nous allons explorer les mécanismes internes du parsing d'URL en JavaScript à tous les niveaux.

Pourquoi est-ce si important ? Parce que les paramètres d'URL sont le socle du web moderne. Transmission de données entre pages, filtrage de produits, analytics, liens de parrainage — tout repose sur ces simples chaînes après le point d'interrogation. Si vous codez en JavaScript, savoir manipuler la query string n'est pas une option, c'est une compétence indispensable.

Qu'est-ce qu'une query string et comment la visualiser dans le navigateur

Commençons par clarifier les termes. La query string (chaîne de requête) est la partie de l'URL qui commence après le point d'interrogation. Par exemple, dans l'adresse :

https://example.com/search?q=javascript&lang=fr&page=1

tout ce qui suit ? est la query string. Elle est composée de paires clé=valeur, séparées par une esperluette (&). Chaque clé peut apparaître plusieurs fois — un point crucial à retenir.

Pour obtenir cette chaîne en JavaScript, il suffit d'accéder à la propriété :

const queryString = window.location.search;\nconsole.log(queryString); // "?q=javascript&lang=fr&page=1"

Notez que la propriété renvoie la chaîne avec le point d'interrogation. C'est le point de départ pour toutes les manipulations à venir.

Méthode n°1 : URLSearchParams — moderne et simple

Si vous codez pour les navigateurs récents (ce qui est le cas dans 99% des situations), utilisez l'API native URLSearchParams. Apparue en 2016, elle est devenue le standard de facto pour travailler avec les paramètres d'URL. Voici comment elle fonctionne :

// Récupération de la chaîne de requête\nconst queryString = window.location.search;\n\n// Création d'un objet URLSearchParams\nconst params = new URLSearchParams(queryString);\n\n// Obtention de la valeur par clé\nconst q = params.get('q');       // "javascript"\nconst lang = params.get('lang'); // "fr"\nconst page = params.get('page'); // "1"\n\n// Vérification de l'existence d'un paramètre\nconsole.log(params.has('lang')); // true\n\n// Récupération de toutes les valeurs si la clé se répète\nparams.append('q', 'python');\nconsole.log(params.getAll('q')); // ["javascript", "python"]\n\n// Parcours de tous les paramètres\nfor (const [key, value] of params) {\n    console.log(`${key}: ${value}`);\n}\n// Affichage :\n// q: javascript\n// lang: fr\n// page: 1\n// q: python

Sous le capot, URLSearchParams décode automatiquement les caractères encodés (par exemple, %20 devient un espace) et gère correctement les cas complexes comme les clés répétées. C'est non seulement pratique, mais aussi sécurisé.

Comment ça marche sous le capot ?

Lorsque vous créez new URLSearchParams(queryString), le moteur JavaScript exécute les étapes suivantes :

\n
• Supprime le point d'interrogation initial (s'il est présent).
\n
• Découpe la chaîne au niveau du caractère &, obtenant un tableau de paires.
\n
• Divise chaque paire au niveau du premier caractère = pour séparer la clé et la valeur.
\n
• Décode les composants URI — remplace %20 par un espace, %23 par #, etc.
\n
• Stocke le tout dans une structure où chaque clé correspond à un tableau de valeurs (même s'il n'y en a qu'une).
\n

Ce processus est entièrement réversible. Vous pouvez modifier les paramètres