Strings

How to Work with URL Parameters

Use URLSearchParams to parse and build query strings

Quick Answer (2024 ES6+ Way)

javascript

const params = new URLSearchParams('?name=John&age=30');
console.log(params.get('name')); // "John"
params.append('city', 'NYC');
console.log(params.toString()); // "name=John&age=30&city=NYC"

Live Example

javascript

// Parse URL parameters
const url = 'https://example.com?search=javascript&page=2&sort=date';
const params = new URLSearchParams(url.split('?')[1]);

console.log(params.get('search')); // "javascript"
console.log(params.get('page'));   // "2"

// Iterate parameters
params.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// Build query string
const newParams = new URLSearchParams({
  query: 'hello world',
  limit: 10,
  offset: 0
});
const queryString = newParams.toString();
console.log(queryString);

// Update URL without reload
const url = new URL(window.location);
url.searchParams.set('page', '3');
window.history.pushState({}, '', url);

Common Variations

Get All Values

javascript

const tags = params.getAll('tag');
// Gets array of all 'tag' parameters

Convert to Object

javascript

const obj = Object.fromEntries(params.entries());

❌ Don't Do This (Outdated Way)

Avoid manual query string parsing

javascript

// DON'T DO THIS
var params = {};
var query = url.split('?')[1];
var pairs = query.split('&');
for (var i = 0; i < pairs.length; i++) {
  var pair = pairs[i].split('=');
  params[pair[0]] = pair[1];
}

Browser Support

✓ Works in all modern browsers (IE10+)

#strings#url#params