JS如何取得URL里的参数？

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

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

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

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

用框架思维分析问题

给你一个如下的URL：

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

将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，如果做了处理，我们使用时只需要全部写成小写/大写即可，例如