Manipulasi URL yang mudah dengan URLSearchParams

URLSearchParams API menyediakan antarmuka yang konsisten ke berbagai bagian URL dan memungkinkan manipulasi sederhana string kueri (hal-hal setelah ?).

Secara tradisional, developer menggunakan ekspresi reguler dan pemisahan string untuk mengambil parameter kueri dari URL. Jika kita jujur pada diri sendiri, hal itu tidak menyenangkan. Proses ini bisa merepotkan dan rentan error. Salah satu rahasia gelap saya adalah saya telah menggunakan kembali metode helper get|set|removeURLParameter yang sama di beberapa aplikasi Google.com besar, termasuk Google Santa Tracker dan web Google I/O 2015.

Saatnya menggunakan API yang tepat yang melakukan hal ini untuk kita.

URLSearchParams API

Coba demo

Chrome 49 menerapkan URLSearchParams dari spesifikasi URL, API yang berguna untuk mengutak-atik parameter kueri URL. Saya menganggap URLSearchParams sebagai kemudahan yang setara dengan URL seperti FormData untuk formulir.

Jadi, apa yang dapat Anda lakukan dengan fitur ini? Dengan string URL, Anda dapat dengan mudah mengekstrak parameter value:

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

setel nilai parameter:

params.set('version', 2);

tambahkan nilai lain untuk parameter yang ada:

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

menghapus parameter:

params.delete('person');

Menggunakan URL

Sebagian besar waktu, Anda mungkin akan menggunakan URL lengkap atau mengubah URL aplikasi. Konstruktor URL dapat sangat berguna untuk kasus berikut:

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'

Untuk melakukan perubahan sebenarnya pada URL, Anda dapat mengambil parameter, memperbarui nilainya, lalu menggunakan history.replaceState untuk memperbarui 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

Di sini, saya telah menggunakan string template ES6 untuk merekonstruksi URL yang diperbarui dari jalur URL aplikasi yang ada dan parameter yang diubah.

Integrasi dengan URL tempat lain digunakan

Secara default, pengiriman FormData dalam permintaan API fetch() akan membuat isi multipart. Jika Anda memerlukannya, URLSearchParams menyediakan mekanisme alternatif untuk data POST yang dienkode URL, bukan mime multipart.

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

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

Meskipun belum diterapkan di Chrome, URLSearchParams juga terintegrasi dengan konstruktor URL dan tag a. Keduanya mendukung buddy baru kita dengan menyediakan properti hanya baca, .searchParams untuk mengakses parameter kueri:

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

Link juga mendapatkan properti .searchParams:

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

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

Deteksi fitur dan dukungan browser

Saat ini, Chrome 49, Firefox 44, dan Opera 36 mendukung URLSearchParams.

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

Untuk polyfill, sebaiknya gunakan polyfill di github.com/WebReflection/url-search-params.

Demo

Coba contoh.

Untuk melihat URLSearchParams di aplikasi nyata, lihat Generator Iconset desain material Polymer. Saya menggunakannya untuk menyiapkan status awal aplikasi dari deep link. Cukup berguna :)