Manipulasi URL yang mudah dengan URLSearchParams

API URLSearchParams menyediakan antarmuka yang konsisten untuk bit dan potongan URL, serta memungkinkan manipulasi string kueri dengan mudah (yang terjadi setelah ?).

Biasanya, developer menggunakan ekspresi reguler dan pemisahan string untuk mengambil parameter kueri dari URL. Jika kita semua jujur pada diri sendiri, itu tidak menyenangkan. Hal ini bisa merepotkan dan rawan kesalahan untuk memperbaikinya. Salah satu rahasia gelap saya adalah saya telah menggunakan kembali get|set|removeURLParameter metode bantuan yang sama di beberapa aplikasi besar Google.com, termasuk Google Pelacak Sinterklas dan web Google I/O 2015.

Saatnya membuat API yang tepat yang akan melakukannya untuk kita!

API URLSearchParams

Coba demonya

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

Jadi, apa yang dapat dilakukan dengan model tersebut? Dengan mempertimbangkan string URL, Anda dapat dengan mudah mengekstrak nilai parameter:

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

set sebuah nilai parameter:

params.set('version', 2);

append nilai lain untuk parameter yang ada:

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

delete parameter:

params.delete('person');

Menangani URL

Biasanya, Anda mungkin akan menggunakan URL lengkap atau mengubah URL aplikasi. Konstruktor URL dapat sangat berguna untuk kasus-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 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, saya telah menggunakan string template ES6 untuk merekonstruksi URL yang telah diupdate dari jalur URL aplikasi yang ada dan parameter yang dimodifikasi.

Integrasi dengan URL tempat lain digunakan

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

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 rekan baru kita dengan memberikan 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, saya merekomendasikan yang ada di github.com/WebReflection/url-search-params.

Demo

Coba contohnya.

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