Urlsearchparams Javascript

Urlsearchparams Javascript

4 min read Jun 18, 2024
Urlsearchparams Javascript

URLSearchParams: Mengelola Parameter URL di JavaScript

URLSearchParams adalah objek JavaScript yang memungkinkan Anda untuk dengan mudah mengakses dan memanipulasi parameter query URL. Parameter query adalah bagian dari URL yang muncul setelah tanda tanya (?) dan berisi informasi tambahan dalam bentuk pasangan kunci-nilai.

Cara Membuat URLSearchParams

Anda dapat membuat objek URLSearchParams dengan beberapa cara:

  1. Dari string query:
const params = new URLSearchParams("name=John&age=30");
  1. Dari URL lengkap:
const url = "https://www.example.com?name=John&age=30";
const params = new URLSearchParams(new URL(url).search);
  1. Dari objek URL:
const url = new URL("https://www.example.com");
url.searchParams.set("name", "John");
url.searchParams.set("age", "30");
const params = url.searchParams;

Mengakses Parameter

Anda dapat mengakses parameter dengan menggunakan metode get(), getAll(), dan has():

// Mengambil nilai parameter "name"
const name = params.get("name"); // "John"

// Mengambil semua nilai parameter "age" (jika ada beberapa)
const ages = params.getAll("age"); // ["30"]

// Mengecek apakah parameter "city" ada
const hasCity = params.has("city"); // false

Memanipulasi Parameter

Anda dapat menambahkan, mengubah, dan menghapus parameter dengan menggunakan metode append(), set(), dan delete():

// Menambahkan parameter baru "city"
params.append("city", "New York");

// Mengubah nilai parameter "age"
params.set("age", "35");

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

Mendapatkan String Query

Anda dapat mendapatkan string query yang diubah dengan menggunakan metode toString() atau forEach():

// Mengubah string query
const queryString = params.toString(); // "city=New York&age=35"

// Mengubah string query dengan forEach()
let queryString = "";
params.forEach((value, key) => {
  queryString += `${key}=${value}&`;
});
queryString = queryString.slice(0, -1); // "city=New York&age=35"

Contoh Penggunaan

const url = "https://www.example.com?name=John&age=30";
const params = new URLSearchParams(new URL(url).search);

// Mengubah nilai parameter "age"
params.set("age", "35");

// Menambahkan parameter "city"
params.append("city", "New York");

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

// Mendapatkan string query yang diubah
const queryString = params.toString(); // "city=New York&age=35"

// Menggabungkan string query dengan URL dasar
const newUrl = `${url.split("?")[0]}?${queryString}`; // "https://www.example.com?city=New York&age=35"

console.log(newUrl);

Kesimpulan

URLSearchParams merupakan alat yang sangat berguna untuk mengelola parameter URL di JavaScript. Dengan menggunakan metode-metode yang tersedia, Anda dapat dengan mudah mengakses, memanipulasi, dan membangun parameter query untuk berbagai kebutuhan, seperti pengambilan data, routing, dan pengiriman formulir.