The URL API

The URL constructor parses a URL string into structured, editable parts. URLSearchParams handles query strings without manual string splitting.

const url = new URL('https://example.com/search?q=js&page=2');

console.log(url.hostname);  // 'example.com'
console.log(url.pathname);  // '/search'
console.log(url.search);    // '?q=js&page=2'

// Read query params
console.log(url.searchParams.get('q'));    // 'js'
console.log(url.searchParams.get('page')); // '2'

Modifying and Rebuilding URLs

url.searchParams.set('page', '3');
url.searchParams.append('lang', 'en');
url.searchParams.delete('q');

console.log(url.toString());
// 'https://example.com/search?page=3&lang=en'

Parsing the Current Page URL

const current = new URL(window.location.href);
const tab = current.searchParams.get('tab') || 'home';
activateTab(tab);

Never concatenate query strings manually - use URLSearchParams. It handles encoding of special characters, spaces, and Unicode automatically.