Urlsearchparams Javascript W3

Urlsearchparams Javascript W3

4 min read Jun 18, 2024
Urlsearchparams Javascript W3

URLSearchParams: Memanipulasi Query String dengan Mudah

URLSearchParams adalah objek JavaScript yang dirancang untuk membuat manipulasi query string dalam URL menjadi mudah dan efisien. Objek ini menyediakan metode yang intuitif untuk membaca, menambahkan, mengubah, dan menghapus parameter dalam query string.

Mengapa Menggunakan URLSearchParams?

  • Mudah Dibaca dan Dipahami: Kode yang menggunakan URLSearchParams lebih mudah dibaca dan dipahami dibandingkan dengan metode tradisional seperti menggunakan string split dan manipulasi string lainnya.
  • Efisien dan Cepat: Objek ini dioptimalkan untuk kinerja dan efisiensi, sehingga dapat menangani query string yang kompleks dengan cepat.
  • Dukungan Browser yang Luas: URLSearchParams didukung oleh semua browser modern, termasuk Chrome, Firefox, Safari, dan Edge.

Cara Menggunakan URLSearchParams

Berikut contoh penggunaan URLSearchParams:

// Membentuk URLSearchParams dari string query
const params = new URLSearchParams("name=John&age=30&city=New+York");

// Mengakses nilai parameter
console.log(params.get("name")); // Output: John
console.log(params.get("age")); // Output: 30
console.log(params.get("city")); // Output: New York

// Menambahkan parameter baru
params.append("occupation", "Software Engineer");

// Mengubah nilai parameter yang sudah ada
params.set("age", "31");

// Menghapus parameter
params.delete("city");

// Mendapatkan seluruh query string
console.log(params.toString()); // Output: name=John&age=31&occupation=Software+Engineer

// Membentuk URL dengan query string baru
const url = new URL("https://www.example.com");
url.search = params.toString();
console.log(url.href); // Output: https://www.example.com?name=John&age=31&occupation=Software+Engineer

Metode Utama URLSearchParams

Berikut metode utama yang disediakan oleh objek URLSearchParams:

  • get(key): Mengembalikan nilai parameter dengan kunci tertentu.
  • getAll(key): Mengembalikan array yang berisi semua nilai parameter dengan kunci tertentu.
  • has(key): Mengembalikan boolean yang menunjukkan apakah parameter dengan kunci tertentu ada.
  • append(key, value): Menambahkan parameter baru atau menambahkan nilai baru ke parameter yang sudah ada.
  • set(key, value): Mengatur nilai parameter dengan kunci tertentu.
  • delete(key): Menghapus parameter dengan kunci tertentu.
  • forEach(callback): Melakukan iterasi atas semua parameter dalam query string.
  • entries(): Mengembalikan iterator yang berisi pasangan kunci-nilai parameter.
  • keys(): Mengembalikan iterator yang berisi semua kunci parameter.
  • values(): Mengembalikan iterator yang berisi semua nilai parameter.
  • toString(): Mengembalikan string yang mewakili seluruh query string.

Kesimpulan

URLSearchParams adalah objek yang sangat berguna untuk memanipulasi query string dalam URL. Dengan menggunakan objek ini, Anda dapat dengan mudah membaca, menambahkan, mengubah, dan menghapus parameter dalam query string, sehingga membuat kode Anda lebih mudah dibaca, lebih efisien, dan lebih mudah dipelihara.

Related Post