Platform under construction

JSON & Structured Data

Advanced

URL & URLSearchParams

URL and URLSearchParams help you read, build and modify web addresses without fragile string splitting.

const url = new URL("https://example.com/search?q=javascript");
url.searchParams.set("page", "2");

console.log(url.toString());

JSON & Structured Data

Use URL APIs instead of hand-building query strings.

The URL constructor parses a full address into reliable parts such as origin, pathname and search parameters.

URLSearchParams handles query string encoding for you. It is much safer than concatenating ?q= and &page= by hand.

These APIs are useful in browser routing, filters, API requests, share links and state stored in the address bar.

URL

Parses and builds complete URLs.

searchParams

Reads and writes query parameters.

set / append

set replaces a value; append adds another value.

Encoding

Special characters are encoded automatically.

Examples

Structured data code should show the boundary clearly.

URLSearchParams handles encoding

const params = new URLSearchParams();
params.set("q", "javascript basics");

const path = `/search?${params.toString()}`;

Manual query string concatenation

const path = "/search?q=" + query + "&page=" + page;

// Spaces, ampersands and special characters can break this.

Code patterns

Reusable examples for quick reference.

These patterns focus on the data boundaries you will use constantly: JSON, URLs, forms, files, fetch objects and binary buffers.

Read query value

Get a parameter by name.

const url = new URL(location.href);
const query = url.searchParams.get("q");

Set parameter

Update one query value safely.

const url = new URL("https://example.com/search");
url.searchParams.set("q", "javascript basics");

Append repeated values

Use append for multi-select filters.

const params = new URLSearchParams();
params.append("tag", "html");
params.append("tag", "css");

Build API URL

Combine URL and query parameters.

const url = new URL("/api/records", location.origin);
url.searchParams.set("limit", "10");
url.searchParams.set("status", "ready");

Rules that matter

Parse, validate and convert data at the edges.

Structured data becomes reliable when every boundary is explicit: text to object, form to values, URL to parameters, response to JSON and bytes to meaning.

Use URL for full addresses

It gives you origin, pathname, search and hash safely.

Use URLSearchParams for queries

It handles encoding and repeated values.

Use set for one value

set replaces the current parameter.

Use append for repeated values

append supports multiple values with the same key.

Convert numbers to strings

Query parameters are text.

Avoid manual parsing

String splitting breaks on edge cases.

Production thinking

Trust data only after the code has proved its shape.

Why does this matter?

URLs are user-facing state. Building them safely keeps links shareable, readable and robust.

Accessibility

Stable URLs help users share, bookmark and revisit filtered states.

Production note

Production code should centralize query building for filters, pagination and API calls.

SEO note

Clean, crawlable URLs matter for indexed pages and canonical route handling.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Add a status parameter.
Use append to add two tags.
Try a search value with spaces and an ampersand.

Practice assignment

Do this before moving to the next topic.

Create a URL object.
Read one search parameter.
Set one search parameter and print the final URL.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand URL & URLSearchParams.