JS如何取得URL里的参数?

11,202 阅读8分钟

有一段时间没写过技术干货文了,这两天刚好遇到一个以前没太在意的一个功能实现--前端获取URL传递的参数

毕竟平时都是在后台处理,掉了一堆头发后,想想还是写出来跟你们分享一下,以后要是你们遇到了也有个参考

要只是获取一些常规字符串到没什么难的,关键还有些乱七八糟的需求,什么同一个参数名传递了多次啊,传数组啊。搞来搞去就写了一大堆

先说说思路吧,如果你看这文章是想要解决问题,拿着代码直接用的话,就直接看最后面的Code实现以及使用方法吧

用框架思维分析问题

给你一个如下的URL:

NaoNao.com/?product=sh…

将URL里传递的参数转换为object对象,这样我们在使用参数的时候也更为方便

我曾多次强调框架思维,现在遇到这个问题了,我们就拿框架思维来分析一下,该怎样才能快速解决

首先是要了解我们的目的是什么?目的很简单,取得URL内传递的参数,并且解析成对象

接着再分析我们现在知道些什么?有一串URL

我们再来分析,如果从URL中获得传递的参数,也就是为了达到目的,我们该做些什么?

URL的特征我们大致都知道,就是第一个?后面的字符串,都是传递的参数,但是有个特殊情况请不要忘记了,URL后面有时候会带上一个#,而#后面的内容,并不是我们要传递的参数,而是网页位置的标识符

如果URL中包含了#我们只需要解析?#之间的字符串就可以了,如果不包含,那么第一个?后所有的内容都是我们需要解析的

你可能觉得我是在说废话,这么明显的事情,只要不是白痴都能看得懂

我当然知道,只要不是白痴都能看得懂,但我为什么要强调呢?因为我们想要快速的解决问题,必须具备框架思维,也可以说是工程思维

你可能有会说,这么简单的问题需要这样分析么?我们一看就知道了,闹闹你这是杀鸡用牛刀

虽说是杀鸡用牛刀,可要想培养自己的工程思维,那么必须保持刻意训练,直到随手拈来

好了,分析完后,我们按照上面的思路来逐步实现,实现的时候可能会遇到其它的问题,到时候再分析,再解决

毕竟再牛逼的工程师,也不会在动手前就想的面面俱到,只能是在动手实现前尽可能的考虑周到,遇到问题时再快速的迭代更新

JS获取URL参数的过程

先用JS拿到URL,如果函数传参了URL,那就用参数。如果没传参,就使用当前页面的URL

var queryString = url ? url.split('?')[1] : window.location.search.slice(1);

如果后面的字符串存在#,我们还得将#后面的字符串去掉,因为#后面的内容并不是我们需要获取的参数,而是网页位置的标识符

queryString = queryString.split('#')[0];

好了,把干扰的部分都移除后,我们可以开始安心的解析参数了,先将传递的参数分成数组

var arr = queryString.split('&');

现在我们可以获得一个字符串数组

['product=shirt', 'color=blue', 'newuser', 'size=m']

将字符串拆分成数组后,我们通过创建一个对象,用来存储我们所有的参数

var obj = {};

我们可以通过遍历数组arr,将它拆分成键值对。把这个字符串做成key:value的对象

var a = arr[i].split('=');

接下来就是要为每一个变量key分配对应的值value,如果我们得到的value不是一个正确的参数,我们就用true来表示这个参数名存在,当然了,你也可以根据自己的实际情况来做改变

var paramName = a[0];
var paramValue = typeof(a[1]) === 'undefined' ? true : a[1];

在这里我只是对undefined做了标记,如果是NaN,我是直接拿它当字符串处理了

在这里有一个小坑得提醒一下,我们在调用函数,获取对象取值的时候,如果URL传递的key为大写,我们取对象时写的小写,那么结果就是为undefined

比如URL为http://NaoNao.com/?NamE=NaoNao,如果不做大小写的处理,调用对象取值时getAllUrlParams().NamE才能取到值NaoNao,如果做了处理,我们使用时只需要全部写成小写/大写即可,例如getAllUrlParams().name

我在这就全部转为小写了,如果你对大小写要求区分,那到时候把这段Code给去掉就好了

paramName = paramName.toLowerCase();
if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();

接下来我们就要去处理我们接受到的paramValue这些参数可能是索引数组,非索引数组,又或者是常规字符串

如果是索引数组,我们需要将paramValue转换成数组,并且将索引对应的值,放入索引对应的位置

如果是非索引数组,我们就要将paramValue放到数组中

如果只是常规的字符串,我们就需要为我们的对象obj创建一个常规的属性,并为其分配值。

如果这个key已经存在,那么我们就要将现有的paramValuekey:value转换为数组,并将它放到数组中

拿几个实际案例,感受一下我们要做什么吧

// 索引数组
getAllUrlParams('http://NaoNao.com/?colors[0]=red&colors[2]=green&colors[6]=blue');
// { "colors": [ "red", null, "green", null, null, null, "blue" ] }

// 非索引数组
getAllUrlParams('http://NaoNao.com/?colors[]=red&colors[]=green&colors[]=blue');
// { "colors": [ "red", "green", "blue" ] }

// 多次传递同一个key
getAllUrlParams('http://NaoNao.com/?colors=red&colors=green&colors=blue');
// { "colors": [ "red", "green", "blue" ] }

// 传递了key,但是没传value
getAllUrlParams('http://NaoNao.com/?product=shirt&color=blue&newuser&size=m');
// { "product": "shirt", "color": "blue", "newuser": true, "size": "m" }

我做这写判断时用的是正则表达式,在这里就不解释正则了。。。毕竟解释起来篇幅就太长了,能看懂就尽量看吧

每个正则要解析什么,在注释中都写了例子,稍微了解点正则表达式的同学,多半也能看懂的

对应的代码实现如下:

// 如果paramName以方括号结束, e.g. colors[] or colors[2]
if (paramName.match(/\[(\d+)?\]$/)) {
    // 如果paramName不存在,则创建key
    var key = paramName.replace(/\[(\d+)?\]/, '');
    if (!obj[key]) obj[key] = [];
    // 如果是索引数组 e.g. colors[2]
    if (paramName.match(/\[\d+\]$/)) {
        // 获取索引值并在对应的位置添加值
        var index = /\[(\d+)\]/.exec(paramName)[1];
        obj[key][index] = paramValue;
    } else {
        // 如果是其它的类型,也放到数组中
        obj[key].push(paramValue);
    }
} else {
    // 处理字符串类型
    if (!obj[paramName]) {
        // 如果如果paramName不存在,则创建对象的属性
        obj[paramName] = paramValue;
    } else if (obj[paramName] && typeof obj[paramName] === 'string') {
        // 如果属性存在,并且是个字符串,那么就转换为数组
        obj[paramName] = [obj[paramName]];
        obj[paramName].push(paramValue);
    } else {
        // 如果是其它的类型,还是往数组里丢
        obj[paramName].push(paramValue);
    }
}

如果你的URL的传参包含了一些特殊字符,比如空格。例如url="NaoNao.com/?name=Nao%20Nao",拿到对象值之后,是需要解码后才能获得正确的值的

var original = getAllUrlParams().name; // 'Nao%20Nao'
var decode = decodeURIComponent(original); // 'Nao Nao'

具体实现以及使用方式

下面是JS的具体的完整实现,你们复制回去就可以用

function getAllUrlParams(url) {
    // 用JS拿到URL,如果函数接收了URL,那就用函数的参数。如果没传参,就使用当前页面的URL
    var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
    // 用来存储我们所有的参数
    var obj = {};
    // 如果没有传参,返回一个空对象
    if (!queryString) {
        return obj;
    }
    // stuff after # is not part of query string, so get rid of it
    queryString = queryString.split('#')[0];
    // 将参数分成数组
    var arr = queryString.split('&');
    for (var i = 0; i < arr.length; i++) {
        // 分离成key:value的形式
        var a = arr[i].split('=');
        // 将undefined标记为true
        var paramName = a[0];
        var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];
        // 如果调用对象时要求大小写区分,可删除这两行代码
        paramName = paramName.toLowerCase();
        if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();
        // 如果paramName以方括号结束, e.g. colors[] or colors[2]
        if (paramName.match(/\[(\d+)?\]$/)) {
            // 如果paramName不存在,则创建key
            var key = paramName.replace(/\[(\d+)?\]/, '');
            if (!obj[key]) obj[key] = [];
            // 如果是索引数组 e.g. colors[2]
            if (paramName.match(/\[\d+\]$/)) {
                // 获取索引值并在对应的位置添加值
                var index = /\[(\d+)\]/.exec(paramName)[1];
                obj[key][index] = paramValue;
            } else {
                // 如果是其它的类型,也放到数组中
                obj[key].push(paramValue);
            }
        } else {
            // 处理字符串类型
            if (!obj[paramName]) {
                // 如果如果paramName不存在,则创建对象的属性
                obj[paramName] = paramValue;
            } else if (obj[paramName] && typeof obj[paramName] === 'string') {
                // 如果属性存在,并且是个字符串,那么就转换为数组
                obj[paramName] = [obj[paramName]];
                obj[paramName].push(paramValue);
            } else {
                // 如果是其它的类型,还是往数组里丢
                obj[paramName].push(paramValue);
            }
        }
    }
    return obj;
}

这个函数该怎么使用呢?

直接把URL参数当成对象调用就OK咯~

以文章开篇的URL为例子

// http://NaoNao.com/?product=shirt&color=blue&newuser&size=m#Hello

getAllUrlParams().product; // 'shirt'
getAllUrlParams().color; // 'blue'
getAllUrlParams().newuser; // true
getAllUrlParams().NB; // undefined
getAllUrlParams('http://NaoNao.com/?NaoNao=shuai').NaoNao; // shuai

不兼容IE的解决方案

如果我们不需要考虑IE这种妖娆贱货,以及一些非常老版本浏览器,就用浏览器内URLSearchParams的接口吧。。。这个接口可以直接拿取URL内的参数

// URL is http://NaoNao.com/?product=shirt&color=blue&newuser&size=m
const urlParams = new URLSearchParams(window.location.search);
// 判断参数是否存在
console.log(urlParams.has('product')); // true
// 获取参数对应的值
console.log(urlParams.get('product')); // "shirt"

这个接口还提供了更多成熟的方法,比如keys(),Values(),还有entries(),这个接口该怎么使用,直接去看官方文档就好了,用起来还是很虚浮的

微信扫码关注公众号「闹闹吃鱼」,每周都有好分享,还可领取学习资源哦~不仅仅只是技术!