Facile manipolazione degli URL con URLSearchParams

L'API URLSearchParams fornisce un'interfaccia coerente con i bit e le parti dell'URL e consente una banale manipolazione della stringa di query (l'elemento dopo ?).

Tradizionalmente, gli sviluppatori utilizzano le espressioni regolari e la suddivisione delle stringhe per estrarre i parametri di query dall'URL. Se siamo onesti con noi stessi, non è divertente. Può essere noioso e soggetto a errori. Uno dei miei oscuri segreti è che ho riutilizzato gli stessi get|set|removeURLParameter metodi di supporto in diverse grandi app di Google.com, tra cui Segui Babbo Natale e Google I/O 2015 web.

È arrivato il momento di un'API adeguata che faccia tutto per noi.

API URLSearchParams

Prova la demo

Chrome 49 implementa URLSearchParams dalla specifica URL, un'API utile per manipolare i parametri di query dell'URL. Penso che URLSearchParams sia una praticità degli URL equivalente ai moduli di FormData.

Cosa puoi fare con questa funzionalità? Data una stringa URL, puoi estrarre facilmente i valori dei parametri:

// 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);
}

Imposta un valore parametro:

params.set('version', 2);

append un altro valore per un parametro esistente:

params.append('person', 'Tim');
params.getAll('person') === ['Eric', 'Tim']

Elimina uno o più parametri:

params.delete('person');

Utilizzo degli URL

La maggior parte delle volte, probabilmente utilizzerai URL completi o modificherai l'URL dell'app. Il costruttore URL può essere particolarmente utile nei seguenti casi:

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'

Per apportare modifiche effettive all'URL, puoi acquisire i parametri, aggiornarne i valori e poi utilizzare history.replaceState per aggiornare 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

Qui ho utilizzato le stringhe di modello ES6 per ricostruire un URL aggiornato dal percorso dell'URL esistente dell'app e dai parametri modificati.

Vengono utilizzati gli URL di integrazione con altri luoghi

Per impostazione predefinita, l'invio di FormData in una richiesta API fetch() crea un corpo con più parti. Se necessario, URLSearchParams fornisce un meccanismo alternativo per eseguire il POST dei dati con codifica url anziché mime multiparte.

const params = new URLSearchParams();
params.append('api_key', '1234567890');

fetch('https://example.com/api', {
    method: 'POST',
    body: params
}).then(...)

Anche se non è ancora implementato in Chrome, URLSearchParams si integra anche con il costruttore URL e i tag a. Entrambi supportano il nostro nuovo amico fornendo una proprietà di sola lettura, .searchParams, per accedere ai parametri di query:

const url = new URL(location);
const foo = url.searchParams.get('foo') || 'somedefault';

I link ricevono anche una proprietà .searchParams:

const a = document.createElement('a');
a.href = 'https://example.com?filter=api';

// a.searchParams.get('filter') === 'api';

Rilevamento delle funzionalità e supporto dei browser

Al momento, Chrome 49, Firefox 44 e Opera 36 supportano URLSearchParams.

if ('URLSearchParams' in window) {
    // Browser supports URLSearchParams
}

Per i polyfill, ti consiglio quello all'indirizzo github.com/WebReflection/url-search-params.

Demo

Prova il campione.

Per vedere URLSearchParams in un'app reale, prova il generatore di icone di material design di Polymer. L'ho utilizzato per configurare lo stato iniziale dell'app da un link diretto. Piuttosto utile :)