L'API URLSearchParams fournit une interface cohérente aux éléments de l'URL et permet une manipulation simple de la chaîne de requête (c'est-à-dire, après ?).
Traditionnellement, les développeurs utilisent des expressions régulières et le fractionnement de chaînes pour extraire les paramètres de requête de l'URL. Si nous sommes tous honnêtes avec nous-mêmes, ce n'est pas amusant.
Cela peut être fastidieux et sujet aux erreurs. L'un de mes sombres secrets, c'est que j'ai réutilisé les mêmes méthodes d'assistance get|set|removeURLParameter dans plusieurs grandes applications Google.com, y compris Google Sur la piste du père Noël et le Web Google I/O 2015.
L'heure est venue de créer une API qui s'occupe de tout !
API URLSearchParams
Essayer la version de démonstration
Chrome 49 implémente URLSearchParams à partir de la spécification d'URL, une API utile pour manipuler les paramètres de requête d'URL. Je considère URLSearchParams comme un équivalent pratique pour les URL,
comme l'était FormData pour les formulaires.
Que pouvez-vous en faire ? À partir d'une chaîne d'URL, vous pouvez facilement extraire les valeurs des paramètres:
// Can also constructor from another URLSearchParams
const params = new URLSearchParams('q=search+string&version=1&person=Eric');
params.get('q') === "search string"
params.get('version') === "1"
Array.from(params).length === 3
for (let p of params) {
console.log(p);
}
Définissez une valeur de paramètre:
params.set('version', 2);
append une autre valeur à un paramètre existant:
params.append('person', 'Tim');
params.getAll('person') === ['Eric', 'Tim']
supprimer un ou plusieurs paramètres :
params.delete('person');
Utiliser des URL
La plupart du temps, vous travaillerez probablement avec des URL complètes ou vous modifierez l'URL de votre application. Le constructeur URL peut être particulièrement utile dans les cas suivants:
const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);
params.set('baz', 3);
params.has('baz') === true
params.toString() === 'foo=1&bar=2&baz=3'
Pour apporter des modifications réelles à l'URL, vous pouvez récupérer des paramètres, mettre à jour leurs valeurs, puis utiliser history.replaceState pour mettre à jour l'URL.
// URL: https://example.com?version=1.0
const params = new URLSearchParams(location.search);
params.set('version', 2.0);
window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?version=2.0
Ici, j'ai utilisé des chaînes de modèle ES6 pour reconstruire une URL mise à jour à partir du chemin d'URL existant de l'application et des paramètres modifiés.
Intégration à d'autres emplacements où les URL sont utilisées
Par défaut, l'envoi de FormData dans une requête API fetch() crée un corps en plusieurs parties.
Si vous en avez besoin, URLSearchParams fournit un mécanisme alternatif aux données POST encodées au format URL plutôt que MIME en plusieurs parties.
const params = new URLSearchParams();
params.append('api_key', '1234567890');
fetch('https://example.com/api', {
method: 'POST',
body: params
}).then(...)
Bien qu'il ne soit pas encore implémenté dans Chrome, URLSearchParams s'intègre également au constructeur URL et aux balises a. Tous deux sont compatibles avec notre nouveau collègue grâce à une propriété en lecture seule, .searchParams, pour accéder aux paramètres de requête:
const url = new URL(location);
const foo = url.searchParams.get('foo') || 'somedefault';
Les liens obtiennent également une propriété .searchParams:
const a = document.createElement('a');
a.href = 'https://example.com?filter=api';
// a.searchParams.get('filter') === 'api';
Détection de fonctionnalités et prise en charge des navigateurs
Actuellement, Chrome 49, Firefox 44 et Opera 36 sont compatibles avec URLSearchParams.
if ('URLSearchParams' in window) {
// Browser supports URLSearchParams
}
Pour les polyfills, je vous recommande celui disponible à l'adresse github.com/WebReflection/url-search-params.
Démonstration
Essayez l'exemple.
Pour voir URLSearchParams dans une application réelle, utilisez le générateur d'ensembles d'icônes Material Design de Polymer. Je l'ai utilisé pour configurer l'état initial de l'application à partir d'un lien profond. Plutôt pratique :)