Bagaimana Mendapatkan Query String Dalam JavaScript

 

 

Dalam artikel singkat kali ini, kita akan membahas beberapa cara berbeda untuk mendapatkan query string dalam JavaScript.

Saat kalian bekerja dengan JavaScript, terkadang kalian perlu mengakses parameter query string di dalam script kalian. Tidak ada cara langsung untuk mencapai ini, karena tidak ada fungsi atau metode JavaScript bawaan yang memungkinkan kalian untuk mencapainya. Tentu saja, kalian bisa menemukan banyak skrip utilitas pihak ketiga (third-party utility scripts) yang memenuhi persyaratan kalian, akan tetapi lebih baik jika kalian bisa mengimplementasikannya dengan vanilla JavaScript.

Dalam postingan kali ini, kita akan membahas bagaimana kalian bisa membangun fungsi kustom (custom function) untuk mendapatkan query string parameters dalam JavaScript vanilla. Nanti, kita juga akan menjelajahi URLSearchParams interface untuk memahami cara kerjanya dan bagaimana hal itu dapat membantu dengan query string parameters.

Cara Mendapatkan query string di Vanilla JavaScript

Di bagian ini, kita akan melihat bagaimana kalian bisa mendapatkan nilai query string dengan JavaScript vanilla.

Mari kita lihat contoh JavaScript berikut.

1:  function getQueryStringValues(key) {<font></font>  
2:    var arrParamValues = [];<font></font>  
3:    var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');<font></font>  
4:  <font></font>  
5:    for (var i = 0; i < url.length; i++) {<font></font>  
6:      var arrParamInfo = url[i].split('=');<font></font>  
7:  <font></font>  
8:      if (arrParamInfo[0] == key || arrParamInfo[0] == key+'[]') {<font></font>  
9:        arrParamValues.push(decodeURIComponent(urlparam[1]));<font></font>  
10:      }<font></font>  
11:    }<font></font>  
12:  <font></font>  
13:    return (arrParamValues.length > 0 ? (arrParamValues.length == 1 ? arrParamValues[0] : arrParamValues) : null);<font></font>  
14:  }<font></font>  
15:  <font></font>  
16:  // index.php?keyword=FooBar&hobbies[]=sports&hobbies[]=Reading<font></font>  
17:  console.log(getQueryStringValues('keyword')); // "FooBar"<font></font>  
18:  console.log(getQueryStringValues('hobbies')); // Array [ "sports", "Reading" ]<font></font>  
19:  console.log(getQueryStringValues('keyNotExits')); // null  

 

Kita telah membuat getQueryStringValues fungsi, yang bisa kalian gunakan untuk mendapatkan nilai parameter query string yang tersedia di URL.

Baca Juga : Cara Parsing File CSV dengan JavaScript

 

Mari kita lihat fungsinya untuk melihat cara kerjanya.

Cuplikan code berikut adalah salah satu cuplikan terpenting dalam fungsi.

1:  var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');  

 

Pertama, kita telah menggunakan metode indexOf  untuk menemukan posisi  karakter ? di URL. Selanjutnya, kita telah menggunakan metode slice untuk mengekstrak bagian query string di URL. Terakhir, kita telah menggunakan metode split  untuk membagi query string berdasarkan karakter &. Dengan demikian, variabel url diinisialisasi dengan array parameter query string.

Selanjutnya, kita mengulang semua elemen url array. Dalam loop, kita menggunakan metode split untuk membagi nilai array dengan karakter =. Dan dengan itu, variabel arrParamInfo diinisialisasi dengan array, di mana kunci array adalah nama parameter dan nilai array adalah nilai parameter. Kalian bisa melihatnya dalam cuplikan code berikut.

1:  var arrParamInfo = url[i].split('=');  

 

Selanjutnya, kita membandingkannya dengan argumen yang dilewatkan dalam fungsi. Jika cocok dengan argumen yang masuk, kita akan memasukkan nilai parameter ke dalam arrParamValues array. Seperti yang kalian lihat, kita telah membahas parameter tunggal dan array juga.

 

1:  if (arrParamInfo[0] == key || arrParamInfo[0] == key+'[]') {  
2:    arrParamValues.push(decodeURIComponent(urlparam[1]));  
3:  }  

 

Akhirnya, jika variabel arrParamValues berisi nilai, kita akan mengembalikannya, jika tidak, null dikembalikan.
   

1:  return (arrParamValues.length > 0 ? (arrParamValues.length == 1 ? arrParamValues[0] : arrParamValues) : null);  

 

Kalian bisa melanjutkan dan menguji fungsi getQueryStringValues dengan nilai yang berbeda.

Seperti yang ditunjukkan pada contoh di atas, kita telah memanggilnya dengan nilai yang berbeda dan mencatat output dengan console.log fungsi tersebut. Penting untuk dicatat bahwa jika parameter yang kalian berikan dalam getQueryStringValues fungsi ada sebagai array dalam query string, kalian akan mendapatkan array sebagai respons, dan itu akan mengembalikan semua nilai parameter itu.

The URLSearchParams Way

Ini adalah salah satu cara termudah untuk mendapatkan nilai query string dalam JavaScript. Interface URLSearchParams yang menyediakan metode utilitas untuk bekerja dengan query string URL. kalian bisa memeriksa dukungan browser dengan Can I use .

Mari kita cepat melihat cara kerjanya.

1:  // index.php?keyword=Search Text&click=Submit  
2:  var urlParams = new URLSearchParams(window.location.search);  

 

Setelah kalian menginisialisasi URLSearchParams objek dengan query string, kalian siap menggunakan metode utilitas yang disediakan oleh URLSearchParams objek.

Mari kita membahas beberapa metode yang berguna dalam konteks artikel ini.

Metode get

Seperti namanya, metode get ini digunakan untuk mendapatkan nilai parameter query string.

Mari kita coba memahaminya dengan contoh berikut.
   

1:  // index.php?keyword=Search Text&click=Submit  
2:  var objUrlParams = new URLSearchParams(window.location.search);  
3:  console.log(objUrlParams.get('keyword')); // “Search Text”  

 

Dalam contoh di atas, kita telah mengambil nilai keyword parameter query string, dan itu akan menampilkan Teks Penelusuran .

Dengan cara ini, kalian bisa menggunakan metode get untuk mendapatkan nilai parameter query string apa pun.

Metode has

The metode has yang digunakan untuk mengecek keberadaan parameter dalam string.

1:  // index.php?keyword=Search Text&click=Submit  
2:  var objUrlParams = new URLSearchParams(window.location.search);  
3:  console.log(objUrlParams.has('order')); // “false”  
4:  console.log(objUrlParams.has('click')); // “true”  

 

Dalam contoh di atas, kita telah menggunakan metode has untuk memeriksa keberadaan parameter yang berbeda.

Metode getAll

Metode getAll yang digunakan untuk mendapatkan semua nilai-nilai parameter jika ada beberapa kali.

Mari kita periksa dengan contoh berikut.

1:  // index.php?keyword=Search Text&click=Submit&filter=value1&filter=value2  
2:  var objUrlParams = new URLSearchParams(window.location.search);  
3:  console.log(objUrlParams.getAll('filter')); // [“value1”,”valu2”]  

 

Seperti yang kalian lihat, saat kita menggunakan metode getAll ini, ia mengembalikan semua nilai yang terkait dengan parameter.

Kesimpulan

Hari ini, kita membahas berbagai metode yang bisa kalian gunakan untuk mendapatkan query string dalam JavaScript. Seiring dengan vanilla JavaScript, kita juga membahas bagaimana kalian bisa menggunakan interface URLSearchParams untuk mendapatkan variabel query string.