What is a query string?

A query string is the part of a URL after ? containing key-value pairs. Parameters are separated by & and keys/values by =. Example: "?page=1&sort=date".

How do I pass arrays in query strings?

Use repeated keys: colors=red&colors=blue. Or comma-separated: colors=red,blue. Or brackets: colors[]=red. The format depends on your server.

What characters are safe in query strings?

Only A-Za-z0-9 and -_.~ are safe without encoding. All other characters including spaces, &, and = should be percent-encoded.

Query String Encoder

Format key-value pairs for URL query strings. Properly encode both keys and values for safe URL inclusion.

Query String Format

``https://example.com/search?q=hello+world&sort=date&page=1 └──────── query string ────────┘`

`Query String Encoding`

`javascript // Using URLSearchParams (recommended) function encodeQueryString(params) { const searchParams = new URLSearchParams(); for (const [key, value] of Object.entries(params)) { searchParams.append(key, value); } return searchParams.toString(); }

// Example encodeQueryString({ q: 'hello world', filter: 'price>100' }); // "q=hello+world&filter=price%3E100"`

`Handling Arrays`

`javascript // Multiple values for same key const params = new URLSearchParams(); ['red', 'blue', 'green'].forEach(color => { params.append('colors', color); }); // colors=red&colors=blue&colors=green`

Use this encoder to build properly formatted query strings.

`What Percent-Encoding Escapes`

Percent-encoding replaces a byte with %followed by its two hex digits. Which bytes need escaping depends on where in the URL they appear, which is why JavaScript ships two different functions.

Character	Encoded	Why
space	%20 `(or` + `in a form body)`	Terminates the URL in some parsers
&	%26	Separates query parameters
=	%3D	Separates key from value
?	%3F	Starts the query string
#	%23	Starts the fragment
/	%2F	Path separator
+	%2B	Means a space in form encoding
é	%C3%A9	Two UTF-8 bytes

javascript
encodeURI('https://ex.com/a b?x=1&y=2');
// 'https://ex.com/a%20b?x=1&y=2' — structure preserved

encodeURIComponent('a b?x=1&y=2'); // 'a%20b%3Fx%3D1%26y%3D2' — everything escaped`

Use encodeURI on a whole URL and encodeURIComponenton each value you insert into one. Getting this backwards is the single most common URL bug:encodeURIon a query value leaves& intact, and a value containing & then splits into two parameters.

Better still, let the platform build it:

`javascript const url = new URL('https://example.com/search'); url.searchParams.set('q', 'a b & c'); // escaping handled`

`Encoding Is Not Encryption`

Base64 and percent-encoding both make data safe to *transport*. Neither makes it secret — both are trivially reversible by design, with no key involved. A Base64 string in a URL, a cookie or a header is readable by anyone who sees it.

Purpose	Use
Safe transport of binary over text	Base64
Safe transport of text in a URL	Percent-encoding
Confidentiality	AES-GCM, TLS
Integrity	HMAC, a digital signature
Password storage	bcrypt, scrypt, Argon2

`Size Costs`

Base64 expands data by exactly 4/3 — three bytes become four characters — plus padding. A 100 KB image becomes about 133 KB as a data URI, and it cannot be cached separately from the document that carries it. Inline small icons; link everything else.

Percent-encoding expands unpredictably: an ASCII character that needs escaping becomes three characters, and a non-ASCII character becomes three per UTF-8 byte.é is %C3%A9— six characters for one letter.

`UTF-8 Is the Only Sane Default`

Every encoding decision on the modern web assumes UTF-8. Where it goes wrong:

btoa throws on non-Latin-1 input. Encode to UTF-8 bytes first:

btoa(String.fromCharCode(...new TextEncoder().encode(text)))

atob returns Latin-1. Decode back with new TextDecoder().decode(bytes).


A BOM breaks parsers. Excel writes one at the start of CSV exports; strip it before

  parsing.

Length is ambiguous. "👨‍👩‍👧".length is 8 in JavaScript, 1 to a reader. Use

Intl.Segmenter` when the count is shown to a person.

Query String Encoder