JavaScript如何获取URL查询参数的属性和值？有没有相应的插件支持？

JavaScript如何获取URL查询参数的属性和值？有没有第三方相应的插件支持？

JS获取URL查询参数的方式有很多，主要方法如下：

1、使用URLSearchParams

// 使用URLSearchParams，除了IE的大部分浏览器都支持
var urlParams = new URLSearchParams(window.location.search);
var name = urlParams.get("name");
console.log(name);

2、使用JS正则表达式获取URL查询参数

// 使用正则表达式匹配
function getParamByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) 
        return null;
    if (!results[2]) 
        return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var name = getParamByName("name");
console.log(name);

3、ES6获取URL查询参数

// ES6的方式
getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

4、使用jQuery插件

(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);

            if (param.length !== 2)
                continue;

            params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
        }

        return params;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

5、使用字符串split的方式截取URL查询参数

function get(n) {
    var half = location.search.split('&' + n + '=')[1];
    if (!half) half = location.search.split('?' + n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}