重磅干货，第一时间送达
每日干货
每日分享，获取相关面试资料，在“程序员Style”微信公众号后台回复文字“面试”即可！


今天小编碰到一个朋友问这么一个问题，怎么在一个页面中获取另外一个页面url传过来的参数呢？最初一开始很本能的想到了用 split("?")，这样一步步的分解出需要的参数。但是想了一下，这样写起来比较绕，也不易懂，肯定会有更加简单的方法的！最后在网上找到了几个简单实用的方法，通过小编的测试验证是没有问题的，现在将具体的方法总结如下:
01
split拆分法
通过对返回的URL字符串采用split方法截取的方式获取参数值。


1）、函数一：获取URL中的参数名及参数值的集合
/** * [获取URL中的参数名及参数值的集合] * 示例URL:"http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪"; * @param {[string]} urlStr [当该参数不为空的时候，则解析该url中的参数集合] * @return {[string]}       [参数集合] */function GetRequest(urlStr) {    if (typeof urlStr == "undefined") {        // 获取url中"?"符后的字符串        var url = decodeURI(location.search);    } else {        var url = "?" + urlStr.split("?")[1];    }    var theRequest = new Object();    if (url.indexOf("?") != -1) {        var str = url.substr(1);        strs = str.split("&");        for (var i = 0; i < strs.length; i++) {            theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);        }    }    return theRequest;}


测试调用方法：
let url = "http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪";function urlTest01() {    // 第一种：无参数（不传url，直接从当前浏览器的url获取）    let params01 = GetRequest();    console.log(params01);      // {uid: "admin", passWord: "123456", fid: "1314", name: "阿豪"}    console.log(params01['name']);  // 阿豪    // 第二种：传url    let params02 = GetRequest(url);    console.log(params02);      // {uid: "admin", passWord: "123456", fid: "1314", name: "阿豪"}    console.log(params02['name']);  // 阿豪}


2）、函数二：通过参数名获取url中的参数值
/** * [通过参数名获取url中的参数值] * 示例URL:"http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪"; * @param  {[string]} queryName [参数名] * @return {[string]}           [参数值] */function GetQueryValue(queryName) {    debugger;    var query = decodeURI('window.location.search'.substring(1));    var vars = query.split("&");    for (var i = 0; i < vars.length; i++) {        var pair = vars[i].split("=");        if (pair[0] == queryName) {            return pair[1];        }    }    return null;}


测试调用方法：
function urlTest02() {    let name = GetQueryValue('name');    console.log(name);   // 阿豪}
02
正则法
通过对返回的URL字符串，采用正则表达式的方式获取到参数值。


1）、正则法用法一：
/** * [通过参数名获取url中的参数值] * 示例URL:"http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪"; * @param  {[string]} queryName [参数名] * @return {[string]}           [参数值] */function GetQueryValue(queryName) {    debugger    var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");    // 获取url中"?"符后的字符串并正则匹配    var r = window.location.search.substr(1).match(reg);    if (r != null) {        return decodeURI(r[2]);    } else {        return null;    }}


测试调用方法： 
function urlTest03() {    let queryVal = GetQueryValue('name');    console.log(queryVal);   // 阿豪}


2）、正则法用法二：
/** * [通过参数名获取url中的参数值] * 示例URL:"http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪"; * @param  {[string]} queryName [参数名] * @return {[string]}           [参数值] */function GetQueryString(name) {    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");    var r = window.location.search.substr(1).match(reg);    var context = "";    if (r != null)        context = r[2];    reg = null;    r = null;    return context == null || context == "" || context == "undefined" ? "" : context;}


测试调用方法： 
function urlTest04() {    let value = GetQueryString('name');    console.log(value);     // 阿豪}

03
单个参数获取法
当返回的URL中只有一个参数时，直接采用单个参数获取的方法获取参数值。


/** * 获取url中只有一个参数的参数值] * 示例URL: "http://test/getIndex/indexRequest.html?name=阿豪"; * @return {[string]}     [参数值] */function GetRequestValue() {    // 获取url中"?"符后的字串    var url = location.search;    // 判断是否有参数    if (url.indexOf("?") != -1) {        // 从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串        var str = url.substr(1);        strs = str.split("=");        return strs[1];    }    return null;}


测试调用方法：
function urlTest05() {    let value = GetRequestValue();    console.log(value);     // 阿豪}
感觉不错的话，麻烦动动小手关注一下小编啦