Query String Parsing and Manipulation

Query strings are the part of the URL after ?. They're used for parameters, filtering, and passing data.

URLSearchParams API

const params = new URLSearchParams('page=2&sort=name&order=asc');

console.log(params.get('page'));  // '2'
console.log(params.get('sort'));  // 'name'
console.log(params.has('order')); // true

Building Query Strings

const params = new URLSearchParams();

// Add parameters
params.set('page', '1');
params.set('limit', '20');

// Multiple values (same key)
params.append('tag', 'javascript');
params.append('tag', 'tutorial');

console.log(params.toString());
// page=1&limit=20&tag=javascript&tag=tutorial

Common Operations

Parse from Current URL

// Browser
const params = new URLSearchParams(window.location.search);

// Or in React/Next.js
const { searchParams } = useSearchParams();
const page = searchParams.get('page');

Update Query Parameter

function updateParam(key, value) {
  const params = new URLSearchParams(window.location.search);
  params.set(key, value);
  window.location.search = params.toString();
}

Remove Parameter

const params = new URLSearchParams('page=2&limit=20');
params.delete('limit');
// 'page=2'

Sort Parameters

const params = new URLSearchParams('z=1&a=2&b=3');
params.sort();
// 'a=2&b=3&z=1'

Encoding

const params = new URLSearchParams();

// Special characters are auto-encoded
params.set('search', 'hello world');
console.log(params.toString());
// search=hello+world

// Manual encoding
const encoded = encodeURIComponent('特殊字符');

Array Parameters

// Multiple values for same key
const params = new URLSearchParams();
params.append('tags', 'js');
params.append('tags', 'react');
params.append('tags', 'node');

// Get all values
console.log(params.getAll('tags')); // ['js', 'react', 'node']

// In URL: ?tags=js&tags=react&tags=node

Pagination Example

function buildPagination(baseUrl, currentPage, totalPages) {
  const params = new URLSearchParams();
  params.set('page', currentPage);

  const links = [];

  // Previous
  if (currentPage > 1) {
    params.set('page', currentPage - 1);
    links.push({ url: `${baseUrl}?${params}`, text: 'Previous' });
  }

  // Next
  if (currentPage < totalPages) {
    params.set('page', currentPage + 1);
    links.push({ url: `${baseUrl}?${params}`, text: 'Next' });
  }

  return links;
}

Filtering Example

function buildFilters(filters) {
  const params = new URLSearchParams();

  if (filters.category) {
    params.set('category', filters.category);
  }
  if (filters.minPrice) {
    params.set('minPrice', filters.minPrice);
  }
  if (filters.maxPrice) {
    params.set('maxPrice', filters.maxPrice);
  }
  if (filters.sort) {
    params.set('sort', filters.sort);
  }

  return params.toString();
}

// Usage
const query = buildFilters({
  category: 'electronics',
  minPrice: '100',
  maxPrice: '500',
  sort: 'price'
});
// category=electronics&minPrice=100&maxPrice=500&sort=price

Server-side Parsing

// Node.js
const url = require('url');

const parsed = url.parse('https://example.com?page=2&limit=20', true);
console.log(parsed.query.page); // '2'
console.log(parsed.query.limit); // '20'

// Express.js
app.get('/search', (req, res) => {
  const { q, page, limit } = req.query;
  // Use the parameters
});

Common Mistakes

// Wrong - not encoding special characters
const bad = '?name=John Smith';

// Correct - use URLSearchParams
const params = new URLSearchParams();
params.set('name', 'John Smith');
const good = '?' + params.toString();

Conclusion

Use URLSearchParams for all query string operations. It handles encoding automatically. Keep parameters organized and validate input on the server side.