MUAZHAN
Home

Add Query String To Current Url Javascript

4 min read Jun 22, 2024
Add Query String To Current Url Javascript

Cara Menambahkan Query String ke URL Saat Ini dengan JavaScript

Query string adalah bagian dari URL yang berisi informasi tambahan yang dikirim ke server. Informasi ini biasanya ditampilkan setelah tanda tanya (?) dan dipisahkan oleh tanda ampersand (&).

Berikut adalah beberapa cara untuk menambahkan query string ke URL saat ini dengan JavaScript:

1. Menggunakan URLSearchParams Object

Metode ini lebih mudah dan mudah dibaca:

const urlParams = new URLSearchParams(window.location.search);
urlParams.set('key', 'value');
window.location.search = urlParams.toString();

Penjelasan:

  1. new URLSearchParams(window.location.search): Membuat objek URLSearchParams baru dari query string URL saat ini.
  2. urlParams.set('key', 'value'): Menambahkan atau memperbarui pasangan key-value pada query string.
  3. window.location.search = urlParams.toString(): Mengganti query string URL saat ini dengan string yang dihasilkan oleh objek URLSearchParams.

2. Memanipulasi String URL Langsung

Jika Anda lebih suka pendekatan manual, Anda dapat memanipulasi string URL secara langsung:

const currentUrl = window.location.href;
const queryString = currentUrl.includes('?') ? '&' : '?';
const newUrl = currentUrl + queryString + 'key=value';
window.location.href = newUrl;

Penjelasan:

  1. const currentUrl = window.location.href;: Mendapatkan URL saat ini.
  2. const queryString = currentUrl.includes('?') ? '&' : '?';: Menentukan apakah query string sudah ada di URL. Jika ya, tambahkan tanda ampersand (&). Jika tidak, tambahkan tanda tanya (?).
  3. const newUrl = currentUrl + queryString + 'key=value';: Membentuk URL baru dengan menambahkan query string baru.
  4. window.location.href = newUrl;: Mengarahkan pengguna ke URL baru.

3. Menggunakan Pustaka

Beberapa pustaka JavaScript menyediakan fungsi tambahan untuk memanipulasi URL. Contohnya:

// Menggunakan 'query-string' library
const qs = require('query-string');

const newQueryString = qs.stringify({ key: 'value' });
const newUrl = `${window.location.origin}${window.location.pathname}?${newQueryString}`;
window.location.href = newUrl;

Penjelasan:

  1. const qs = require('query-string');: Memuat pustaka 'query-string'.
  2. const newQueryString = qs.stringify({ key: 'value' });: Mengubah objek JavaScript menjadi string query string.
  3. const newUrl = ${window.location.origin}${window.location.pathname}?${newQueryString};: Membentuk URL baru dengan menambahkan query string baru.
  4. window.location.href = newUrl;: Mengarahkan pengguna ke URL baru.

Tips Tambahan

  • Gunakan metode URLSearchParams jika Anda ingin bekerja dengan pasangan key-value.
  • Gunakan metode manual jika Anda hanya perlu menambahkan satu atau dua parameter ke query string.
  • Gunakan pustaka jika Anda membutuhkan lebih banyak fungsionalitas, seperti penguraian dan penggabungan query string.

Pilih metode yang paling sesuai dengan kebutuhan Anda dan pastikan untuk menguji kode Anda dengan cermat sebelum menggunakannya dalam produksi.

Javascript

Latest Posts

Featured Posts