Add Query String Parameter To Url Javascript

MUAZHAN

4 min read

·

Jun 22, 2024

44

Share

Menambahkan Parameter Query String ke URL dengan JavaScript

Parameter query string adalah bagian dari URL yang digunakan untuk mengirimkan informasi tambahan ke server. Biasanya, parameter query string diawali dengan tanda tanya (?) dan terdiri dari pasangan kunci-nilai yang dipisahkan oleh tanda ampersand (&). Contohnya, URL https://www.example.com/search?q=javascript&page=2 memiliki dua parameter query string: q dengan nilai javascript dan page dengan nilai 2.

Cara Menambahkan Parameter Query String ke URL dengan JavaScript

Berikut adalah beberapa cara untuk menambahkan parameter query string ke URL menggunakan JavaScript:

1. Menggunakan Objek URLSearchParams

Objek URLSearchParams adalah cara yang direkomendasikan untuk memanipulasi parameter query string dalam JavaScript. Anda dapat membuat objek URLSearchParams dari URL yang ada atau dari string parameter query string:

// Membuat objek URLSearchParams dari URL yang ada
const url = new URL('https://www.example.com/search?q=javascript');
const params = new URLSearchParams(url.search);

// Menambahkan parameter baru
params.append('page', '2');

// Mengatur nilai parameter yang ada
params.set('q', 'javascript+programming');

// Menghapus parameter
params.delete('page');

// Mendapatkan semua parameter sebagai string
const queryString = params.toString();

// Menggabungkan parameter query string ke URL asli
url.search = queryString;

console.log(url.toString()); // Output: https://www.example.com/search?q=javascript+programming

2. Menggunakan String Manipulation

Anda juga dapat memanipulasi parameter query string dengan menggunakan string manipulation:

// URL asli
const url = 'https://www.example.com/search?q=javascript';

// Menambahkan parameter baru
const newUrl = url + '&page=2';

// Mengatur nilai parameter yang ada
const updatedUrl = url.replace('q=javascript', 'q=javascript+programming');

// Menghapus parameter
const removedUrl = url.replace(/&page=[^&]+/, '');

console.log(newUrl); // Output: https://www.example.com/search?q=javascript&page=2
console.log(updatedUrl); // Output: https://www.example.com/search?q=javascript+programming
console.log(removedUrl); // Output: https://www.example.com/search?q=javascript

3. Menggunakan Library Eksternal

Beberapa library JavaScript seperti qs dan query-string dapat membantu Anda dalam memanipulasi parameter query string dengan lebih mudah. Library ini menyediakan fungsi yang lebih terstruktur dan fleksibel untuk menambahkan, menghapus, dan mengedit parameter query string.

Kapan Harus Menggunakan Parameter Query String?

Parameter query string biasanya digunakan untuk:

• Mengirimkan data pencarian: Contohnya, q untuk kata kunci pencarian dan page untuk nomor halaman.
• Mengirimkan filter: Contohnya, category untuk filter kategori dan price untuk filter harga.
• Mengirimkan informasi tambahan: Contohnya, locale untuk bahasa yang digunakan dan utm_source untuk sumber kampanye pemasaran.

Kesimpulan

Menambahkan parameter query string ke URL dengan JavaScript adalah tugas yang sederhana dengan menggunakan objek URLSearchParams atau string manipulation. Pastikan untuk memilih metode yang paling sesuai dengan kebutuhan Anda dan pertimbangkan untuk menggunakan library eksternal untuk fungsi yang lebih canggih.