URL Constructor JavaScript: Panduan & Contoh Lengkap

URL Constructor JavaScript adalah objek bawaan (built-in object) yang digunakan untuk membuat, mengurai (parsing), dan memanipulasi string URL sesuai standar WHATWG. Objek ini memungkinkan pengembang mengakses atau mengubah bagian URL seperti protokol, host, path, parameter query, dan hash tanpa harus menggunakan manipulasi string manual yang rentan terhadap kesalahan.

Dengan menggunakan new URL(), setiap komponen URL dipecah menjadi properti yang dapat dibaca dan ditulis secara langsung. Pendekatan ini sangat krusial dalam pengembangan web modern untuk menghindari masalah keamanan seperti URL injection dan memastikan pengkodean karakter (URL encoding) dilakukan secara otomatis.

Sintaks Dasar dan Cara Penggunaan

Untuk menginisialisasi URL baru, Anda memerlukan URL absolut sebagai argumen pertama. Jika menggunakan URL relatif, Anda wajib menyertakan URL basis (base URL) sebagai argumen kedua.

// Menggunakan URL absolut
const urlObj = new URL('https://example.com/pencarian?q=javascript#top');

console.log(urlObj.hostname); // Output: example.com
console.log(urlObj.pathname); // Output: /pencarian
console.log(urlObj.search);   // Output: ?q=javascript

// Menggunakan URL relatif dengan base URL
const baseObj = new URL('/api/v1/users', 'https://api.example.com');
console.log(baseObj.href); // Output: https://api.example.com/api/v1/users

Properti Utama Objek URL

Objek URL menyediakan berbagai properti yang merepresentasikan setiap bagian dari struktur URL standar. Berikut adalah tabel rincian properti utama beserta fungsinya:

Memanipulasi Query Parameters dengan URLSearchParams

Properti searchParams pada objek URL mengembalikan instance dari URLSearchParams. Antarmuka ini dirancang khusus untuk membaca, menambah, mengubah, atau menghapus parameter query dengan mudah tanpa manipulasi string manual.

const url = new URL('https://toko.com/produk');

// Menambah parameter
url.searchParams.append('kategori', 'elektronik');
url.searchParams.append('sort', 'terlaris');

// Mengubah parameter
url.searchParams.set('sort', 'termurah');

// Menghapus parameter
url.searchParams.delete('kategori');

// Memeriksa keberadaan parameter
console.log(url.searchParams.has('sort')); // Output: true

console.log(url.toString());
// Output: https://toko.com/produk?sort=termurah

Validasi URL di JavaScript

Salah satu kegunaan paling praktis dari URL Constructor adalah untuk memvalidasi apakah sebuah string merupakan URL yang sah. Karena constructor akan melemparkan (throw) error jika string tidak valid, Anda dapat membungkusnya dalam blok try...catch.

function isValidURL(string) {
  try {
    new URL(string);
    return true;
  } catch (err) {
    return false;
  }
}

console.log(isValidURL('https://azwinn.com')); // Output: true
console.log(isValidURL('bukan-url-valid'));      // Output: false

Tips Troubleshooting Lapangan

Dalam implementasi nyata, beberapa kesalahan umum sering terjadi saat mengolah URL:

• Lupa Basis URL: Jika Anda mencoba melewatkan string relatif seperti new URL('/halaman') tanpa menyertakan base URL, JavaScript akan mengeluarkan TypeError: Invalid URL. Selalu berikan argumen kedua jika domain tidak disertakan dalam string utama.
• Pengkodean Karakter Otomatis: URL Constructor otomatis melakukan encoding pada karakter khusus seperti spasi (menjadi %20). Jika Anda ingin membaca teks mentah tanpa encoding, Anda harus mendekodekannya kembali menggunakan decodeURIComponent().
• Kompatibilitas Browser: URL Constructor didukung penuh oleh seluruh browser modern (Chrome, Firefox, Safari, Edge) serta lingkungan Node.js versi 10 ke atas, sehingga aman digunakan untuk aplikasi sisi klien maupun peladen.