URL and URLSearchParams

Syntax

new URL(urlString)
new URLSearchParams(queryString)

Examples

const url = new URL("https://example.com:8080/products?category=shoes&sort=price#reviews");

console.log(url.protocol); // "https:"
console.log(url.hostname); // "example.com"
console.log(url.port);     // "8080"
console.log(url.pathname); // "/products"
console.log(url.search);   // "?category=shoes&sort=price"
console.log(url.hash);     // "#reviews"

const url = new URL("https://example.com/search?q=javascript&page=1");

console.log(url.searchParams.get("q"));    // "javascript"
console.log(url.searchParams.get("page")); // "1"

url.searchParams.set("page", "2");
url.searchParams.append("sort", "recent");

console.log(url.toString());
// "https://example.com/search?q=javascript&page=2&sort=recent"

const params = new URLSearchParams();
params.set("name", "Alice Smith"); // spaces are correctly encoded
params.set("role", "admin");

console.log(params.toString()); // "name=Alice+Smith&role=admin"

fetch(`/api/users?${params.toString()}`);

Best practices

• Use the URL and URLSearchParams objects instead of manually splitting and concatenating query strings - they correctly handle encoding edge cases
• Use searchParams.set() to overwrite a parameter and searchParams.append() to add an additional value for the same key
• Always construct URLs this way when building requests with dynamic query parameters, to avoid manual encoding bugs
• Remember getAll() (not get()) is needed to retrieve multiple values for the same parameter key

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation