从GET参数中获取值（JavaScript）

技术背景

在JavaScript中，自身并没有内置处理查询字符串参数的功能。但在现代开发中，我们常常需要从URL的GET参数里获取特定的值，以实现各种功能，如页面跳转传参、筛选条件传递等。在不同的浏览器环境和应用场景下，需要采用不同的方法来实现这一需求。

实现步骤

现代浏览器和Node.js环境

现代浏览器和Node.js都实现了URL对象和URLSearchParams API，可以方便地获取GET参数的值。示例代码如下：

// 你可以从window.location.href获取当前页面的URL
var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; 
var url = new URL(url_string);
var c = url.searchParams.get("c");
console.log(c);

旧浏览器环境

对于不支持URL和URLSearchParams的旧浏览器（如Internet Explorer），可以使用polyfill库，如 this polyfill 和 URLSearchParams。

手动解析查询字符串

还可以手动解析查询字符串，示例代码如下：

function parse_query_string(query) {
    var vars = query.split("&");
    var query_string = {};
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        var key = decodeURIComponent(pair.shift());
        var value = decodeURIComponent(pair.join("="));
        // 如果是该名称的第一个条目
        if (typeof query_string[key] === "undefined") {
            query_string[key] = value;
            // 如果是该名称的第二个条目
        } else if (typeof query_string[key] === "string") {
            var arr = [query_string[key], value];
            query_string[key] = arr;
            // 如果是该名称的第三个或后续条目
        } else {
            query_string[key].push(value);
        }
    }
    return query_string;
}

var query_string = "a=1&b=3&c=m2-m3-m4-m5";
var parsed_qs = parse_query_string(query_string);
console.log(parsed_qs.c);

可以通过以下方式获取当前页面URL的查询字符串：

var query = window.location.search.substring(1);
var qs = parse_query_string(query);

核心代码

使用URLSearchParams的简单函数

function getParam(param){
    return new URLSearchParams(window.location.search).get(param);
}

递归解析查询字符串

var get_params = function(search_string) {
    var parse = function(params, pairs) {
        var pair = pairs[0];
        var parts = pair.split('=');
        var key = decodeURIComponent(parts[0]);
        var value = decodeURIComponent(parts.slice(1).join('='));

        // 处理同名的多个参数
        if (typeof params[key] === "undefined") {
            params[key] = value;
        } else {
            params[key] = [].concat(params[key], value);
        }
        
        return pairs.length == 1 ? params : parse(params, pairs.slice(1))
    }

    // 去掉开头的?
    return search_string.length == 0 ? {} : parse({}, search_string.substr(1).split('&'));
}

var params = get_params(location.search);

// 最后，获取你想要的参数
params['c'];

最佳实践

• 优先使用现代API：在支持URL和URLSearchParams的环境中，优先使用这些现代API，因为它们简单、高效且符合标准。
• 考虑兼容性：如果需要支持旧浏览器，使用polyfill库或手动解析查询字符串的方法。
• URL解码：在获取参数值时，确保对参数名和参数值进行URL解码，以处理特殊字符。

常见问题

• 参数名包含特殊字符：如果参数名可能包含特殊的URL或正则表达式字符，需要对其进行转义处理。例如：

function getUrlParamWithSpecialName(paramName) {
    return getUrlParam(encodeURIComponent(paramName).replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
}

• 参数缺失或无值：不同的实现方式对参数缺失或无值的处理可能不同，需要根据具体需求进行处理。例如，URLSearchParams在参数缺失时返回null，参数存在但无值时返回空字符串。