Facile manipolazione degli URL con URLSearchParams

L'API URLSearchParams fornisce un'interfaccia coerente per i componenti dell'URL e consente la manipolazione banale della stringa di query (la parte 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 segreti oscuri è che ho riutilizzato gli stessi get|set|removeURLParameter metodi di assistenza in diverse app di grandi dimensioni di Google.com, tra cui Google Santa Tracker e il sito web di Google I/O 2015.

È 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 un'opzione equivalente agli URL come FormData lo era per i moduli.

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');

Utilizzare gli URL

La maggior parte delle volte, probabilmente lavorerai con URL completi o modificherai l'URL della tua app. Il costruttore URL può essere particolarmente utile per i 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 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 i dati POST codificati in URL anziché in MIME multipart.

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 hanno 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, dai un'occhiata a Iconset Generator di Material Design di Polymer. L'ho utilizzato per configurare lo stato iniziale dell'app da un link diretto. Molto utile :)