Encodage et décodage d’URL en JavaScript

L’encodage d’URL dépend du contexte. Un segment de chemin, une valeur de requête et des données application/x-www-form-urlencoded ne suivent pas exactement les mêmes règles ; utilisez donc l’API adaptée au composant manipulé.

Démarrage rapide#

L’exemple suivant utilise l’API standard de JavaScript ou une bibliothèque couramment utilisée pour cette tâche.

Exemple#

1const value = "café & tea + cake";2const encoded = encodeURIComponent(value);3const decoded = decodeURIComponent(encoded);45console.log(encoded);6console.log(decoded);

Opérations courantes#

Ce second exemple couvre une opération fréquente en production ou une manière plus sûre de traiter des entrées réelles.

Variante courante#

1const params = new URLSearchParams({2  q: "café & tea",3  page: "1",4});5const url = `https://example.com/search?${params.toString()}`;6console.log(url);

Points importants#

Encodez le composant approprié plutôt qu’une URL structurée entière. Les chemins, les valeurs de requête et les formulaires n’emploient pas exactement les mêmes règles.

Bonnes pratiques#

1. Considérez toute entrée externe comme non fiable et gérez explicitement les erreurs d’analyse ou de validation.
2. Rendez explicites l’encodage, les unités, les formats et les conventions propres aux bibliothèques aux frontières du système.
3. Ajoutez des tests couvrant l’entrée vide, le texte Unicode, les entrées invalides et des données représentatives de la production.

Références#

• RFC 3986: URI Generic Syntax
• MDN JavaScript