Encodage des URL et chaînes de requête : un guide pratique

Les URL n'autorisent qu'un ensemble limité de caractères dans le chemin et la requête. Tout le reste doit être encodé en pourcentage (ex. espace → %20, & → %26). Une erreur à ce niveau entraîne des erreurs 404, des balises analytiques cassées et des bugs subtils dans les API.

Que faut-il encoder ?

• Les valeurs de requête contenant des espaces, &, =, # ou du texte non-ASCII (emojis, accents) doivent être encodées.
• Les segments de chemin comprenant des barres obliques ou des caractères spéciaux doivent également être encodés—sinon le routeur interprète mal la fin d'un segment.

Les navigateurs affichent souvent une URL « lisible » dans la barre d'adresse, tout en envoyant une version encodée sur le réseau. Les API, en revanche, s'attendent à ce que vous encodiez explicitement lorsque vous construisez des chaînes manuellement.

encodeURIComponent vs encodeURI

En JavaScript :

• encodeURIComponent — À utiliser pour les valeurs des paramètres de requête (et généralement les clés). Il encode presque tout ce qui pourrait casser une URL.
• encodeURI — À utiliser pour une URL entière uniquement lorsque vous devez conserver des délimiteurs comme ? et #. Rare dans le travail quotidien avec les API.

const q = "hello world & friends";
const params = new URLSearchParams({ q });
console.log(params.toString()); // q=hello+world+%26+friends

URLSearchParams gère l'encodage pour les requêtes au format standard application/x-www-form-urlencoded et est préférable à la concaténation manuelle de chaînes.

Construire des URL avec de nombreux paramètres

Lorsque vous ajoutez des balises UTM, des filtres ou des clés API, les erreurs s'accumulent : ? en double, & non encodé ou ordre ambigu. Un petit utilitaire—ou un générateur visuel—permet de garder la chaîne finale valide.

Essayez notre outil URL Encode / Decode pour observer comment les chaînes sont transformées, et le URL & Query String Builder pour assembler un lien complet avec un encodage UTF-8 sécurisé.

cURL et fetch

Lorsque vous copiez des requêtes depuis les outils de développement du navigateur, faites attention aux chaînes de requête déjà encodées. Les coller dans du code peut parfois double-encoder les valeurs. Notre convertisseur cURL to fetch() vous aide à transformer un cURL fonctionnel en JavaScript pendant que vous vérifiez l'URL séparément.

Si un lien « fonctionne dans Chrome » mais échoue dans votre script, comparez la chaîne de requête brute octet par octet.

Liste de contrôle rapide

• Encodez les valeurs avant de les concaténer dans ?a=...&b=...
• Privilégiez URL + URLSearchParams plutôt que la construction manuelle de chaînes
• Pour les noms de domaine internationalisés (IDN), le navigateur gère le punycode dans le nom d'hôte—concentrez l'encodage sur le chemin et la requête