Dapatkan Nilai String Kueri dalam JavaScript

Stempel Waktu: 21 Juli 2022 12:22

Di URL, nilai string kueri sering kali memberikan informasi tentang permintaan, seperti parameter untuk penelusuran atau ID objek yang Anda gunakan. Jika salah satu logika bisnis atau permintaan ditangani di frontend, penting untuk mengetahui cara mengambil nilai string kueri dari URL. Ada beberapa cara untuk mencapai ini, beberapa di antaranya akan kita lihat di sini.

URLSearchParams

Grafik URLSearchParams antarmuka didukung oleh semua versi browser utama kecuali IE 11. Ini bekerja dengan mengurai string kueri URL dan menyediakan cara untuk mengakses nilai. Sebagai contoh:

let params = new URLSearchParams('q=node&page=2');
params.get('q'); 
params.get('page');

Salah satu kelemahan antarmuka ini adalah Anda harus meneruskannya hanya string kueri URL. Jika Anda bekerja dengan URL browser saat ini, itu mudah dilakukan karena Anda bisa melewati window.location.search. Jika Anda bekerja dengan URL lain, Anda harus menguraikan dan meneruskan string kueri secara terpisah.

Untuk mengurai parameter kueri menjadi objek, gunakan URL.searchParams's .entries() metode, yang mengembalikan Iterator dari pasangan kunci/nilai, dan Object.fromEntries untuk mengubahnya menjadi objek.

let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries);

Objek URL

Grafik URL API juga didukung oleh semua versi browser utama kecuali IE 11. Ini menawarkan cara yang lebih fleksibel untuk mengurai URL, dan juga menyediakan cara untuk mengakses nilai string kueri. Sebagai contoh:

const url = new URL('https://stackabuse.com/search?q=node&page=2');
const searchParams = url.searchParams;

searchParams.get('q'); 
searchParams.get('page');

url.searchParams adalah jenis objek instance yang sama yang dikembalikan oleh URLSearchParams.

Grafik url objek di atas juga memiliki semua bagian dari URL yang dipecah menjadi bagian-bagiannya. Sebagai contoh:

url.href; 
url.origin; 
url.protocol; 
url.host; 
url.hostname; 
url.port; 
url.pathname; 
url.search; 
url.hash;

JavaScript murni

Jika karena alasan apa pun Anda tidak dapat mengakses API di atas atau ingin memiliki kontrol lebih besar atas penguraian, Anda dapat menggunakan kode berikut untuk mengurai string kueri ke dalam objek.

function getQueryParams(url) {
    const paramArr = url.slice(url.indexOf('?') + 1).split('&');
    const params = {};
    paramArr.map(param => {
        const [key, val] = param.split('=');
        params[key] = decodeURIComponent(val);
    })
    return params;
}

Note: Ada banyak cara untuk mengurai params kueri di JS biasa, beberapa lebih rumit (dan kuat) daripada yang lain. Ini hanya salah satu cara, dan diadaptasi dari intisari ini.

Kami kemudian dapat menggunakan fungsi JS biasa ini untuk mengurai satu parameter kueri menjadi string:

getQueryParams('https://stackabuse.com/search?q=node&page=2')

Stempel Waktu:

Lebih dari penyalahgunaan