页面url相关函数与编码解码

对url编码的原因

保证客户端只使用一种方法向服务器发出请求，使用js对url进行编码，再向服务器提交，保证服务器得到的数据格式是统一的
encodeURI() 对整个url进行编码，对网址中有特殊含义的符号不会进行编码; / ? : @ & = + $ , #
encodeURIComponent()对url的组成部分进行编码，对上面的符号也会进行编码。

window.lcoation属性

• href 当前页面的网址
• origin来源网站
• protocol 协议
• host 域名
• port端口号
• pathname 路径
• search 链接后面跟的参数

URLSearchParams

接口定义了一些方法处理url查询字符串

var s = new URLSearchParams(window.location.search) //后面跟的查询字符串
s.get('newwindow') // 1

还可以使用的相关方法：

• append 插入一个新的搜索参数
• delete 从搜索参数列表里删除指定的搜索参数及对应值
• entries 返回一个iterator可以遍历所有键值对的对象
• getAll 以数组方式返回指定搜索参数的所有值
• has 返回判断是否存在此搜索参数
• keys此对象包含了键/值对的所有键名
• set设置一个搜索参数的新值，假如原来有多个值将删除其他所有的值
• sort按键名排序
• toString返回搜索参数组成的字符串，可直接使用再url上
• values 返回一个包含键/值对的所有值得iterator对象

searchParams

url接口的searchParams属性返回一个URLSearchParams对象，从这个对象中能获取到URL中的GET参数

var s = new URL('https://www.google.com.hk/search?newwindow=1&safe=strict&rlz=1C1GCEU_zh-CNCN879CN879&ei=GBr6XYu3LtbT-Qapp6CgDw&q=searchParams&oq=searchParams&gs_l=psy-ab.3..0l7j0i10.2257714.2257983..2258368...7.0..0.77.277.4......0....1..gws-wiz.7ZwmIzsB-KY&ved=0ahUKEwiLo9GFmL_mAhXWad4KHakTCPQQ4dUDCAs&uact=5') //后面跟的URL
s.searchParams.get('newwindow') // 1

原生实现

function searchParam (str) {
  let temp
  let res = {}
  str = str.replace('?', '')
  let arr = str.split('&')
  arr.forEach( item => {
    temp = item.split('=')
    res[temp[0]] = temp[1] || null
  })
  return res
}