Manipulasi URL yang mudah dengan URLSearchParams

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

Biasanya, developer menggunakan regex dan pemisahan string untuk mengambil parameter kueri dari URL. Jika kita jujur pada diri sendiri, hal itu tidak menyenangkan. Proses ini bisa jadi membosankan dan rentan terhadap error. Salah satu rahasia gelap saya adalah saya telah menggunakan kembali get|set|removeURLParameter metode bantuan yang sama di beberapa aplikasi Google.com besar, termasuk Google Pelacak Sinterklas dan web Google I/O 2015.

Saatnya menggunakan API yang tepat untuk melakukan hal ini.

URLSearchParams API

Coba demo

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

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

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

menetapkan parameter value:

params.set('version', 2);

menambahkan nilai lain untuk parameter yang ada:

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

menghapus parameter:

params.delete('person');

Menggunakan URL

Sering kali, 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 membuat perubahan aktual 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, kami telah menggunakan string template ES6 untuk merekonstruksi URL yang diperbarui dari jalur URL aplikasi yang ada dan parameter yang diubah.

Integrasi dengan tempat lain yang menggunakan URL

Secara default, mengirim FormData dalam permintaan API fetch() akan membuat isi multibagian. Jika Anda membutuhkannya, URLSearchParams menyediakan mekanisme alternatif untuk mem-POSTING data 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 teman 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 yang ada di github.com/WebReflection/url-search-params.

Demo

Coba contohnya.

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