Modern and Classic Approaches to Retrieve GET Request Parameters in JavaScript

Fundamental Concepts of URL Query Parameters

In web development, GET request parameters are typically appended to the URL as query strings in the format ?key1=value1&key2=value2. JavaScript provides multiple ways to access and parse these parameters, and developers need to choose appropriate methods based on browser compatibility and project requirements.

Modern Browser Native API: URLSearchParams

Modern browsers (mainstream versions after April 2018) natively support the URLSearchParams interface, providing a standardized solution for handling URL query parameters. This API features concise design and ease of use, making it the currently recommended primary method.

Basic usage is as follows:

// Create URLSearchParams instance
let params = new URLSearchParams(document.location.search);

// Retrieve individual parameter values
let name = params.get("name");
let age = parseInt(params.get("age"), 10);

The URLSearchParams.get() method takes the parameter name as input and returns the corresponding first value. If the parameter does not exist, it returns null. For parameters requiring numerical processing, it's recommended to use parseInt() or parseFloat() for type conversion.

Traditional Parsing Method: Regular Expression Approach

When support for older browsers or specific environments (such as Opera Mini) is required, custom functions based on regular expressions can be used to parse query strings. This method directly operates on the window.location.search property and offers better compatibility.

Implementation code:

function getQueryParam(name) {
    // Construct regular expression matching pattern
    let regex = new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)');
    
    // Execute matching
    let result = regex.exec(location.search);
    
    // Return decoded value or undefined
    return result ? decodeURIComponent(result[1]) : undefined;
}

This function first URL-encodes the parameter name to prevent interference from special characters, then constructs a regular expression to find matches in the query string. After finding a match, it URL-decodes the value and returns it; if no match is found, it returns undefined.

Solution Comparison and Selection Recommendations

URLSearchParams Advantages:

• Native browser support, no additional code required
• Standardized API design, easy to understand and maintain
• Supports more operations, such as has(), getAll(), append() methods
• Better performance

Regular Expression Approach Applicable Scenarios:

• Need to support older browsers (IE, etc.)
• Limited runtime environments (certain mobile browsers)
• Only require simple parameter retrieval functionality

Practical Application Examples

Assuming current URL: https://example.com/?product=laptop&price=1200&category=electronics

Using URLSearchParams:

let params = new URLSearchParams(window.location.search);
console.log(params.get("product"));    // "laptop"
console.log(params.get("price"));      // "1200"
console.log(params.get("category"));   // "electronics"
console.log(params.get("color"));      // null

Using custom function:

console.log(getQueryParam("product"));  // "laptop"
console.log(getQueryParam("color"));    // undefined

Encoding and Decoding Considerations

When handling URL parameters, character encoding issues must be considered. Special characters in query strings (such as spaces, Chinese characters, etc.) are typically URL-encoded. Using encodeURIComponent() and decodeURIComponent() ensures correct parameter transmission and parsing.

For example, parameter value containing spaces:

// URL: ?search=hello%20world
let params = new URLSearchParams(window.location.search);
console.log(params.get("search"));  // "hello world" (automatically decoded)

Framework Integration Considerations

Although libraries like jQuery and YUI provide convenient DOM manipulation features, for simple URL parameter retrieval, using native JavaScript solutions is more lightweight and efficient. Modern frontend frameworks (such as React, Vue) typically recommend using native APIs or specialized routing libraries to handle URL parameters.

Developers should weigh the pros and cons of using third-party libraries versus native solutions based on project technology stack and performance requirements. In most cases, native URLSearchParams can meet requirements without introducing additional dependencies.