url字串解析
眾所周知，我們可以通過 location 獲得當前頁面地址（URL）的 href 、 protocol 、 host 、 search 、 hash 等屬性，但是如果給你一個 url字串 ，怎麼得到這些屬性呢？也許用正則是一個方法。
假設有這樣一個 url 字串 "https://demo.vczhan.com/wave/heart-wave.html?name=abc&age=18#part" ，該怎麼解析它呢。
iframe
直接把url賦值給 location.href 會從當前頁面跳轉到 url 的頁面，如果我們在當前頁面新建一個 iframe 並給它的 src 賦值這個 url ，似乎可以通過iframe的 window.location 拿到url的各個屬性。
但是很遺憾，對於 跨域的url ，不會觸發iframe的 window.onload ，直接訪問 location.href ，瀏覽器也給出提示限制跨域。
a
提到 url ，可能會有人想到 <a> 標籤，因為我們經常訪問頁面地址是通過點選 a 連結跳轉的，那麼能否通過它來解析 url 呢？
我們建立了一個 a 元素，並給它的 href 賦值了 url ，可以打印出這個 a 元素的物件，其中就包括 url 的這些屬性。
host ,
origin 為
null
URL
利用 a 元素來解析 url 算是奇淫巧技吧，其實現代瀏覽器提供了一個建立的 URL物件 的建構函式— URL() ，直接把 url 當作引數傳入，就會返回一個 URL物件 。
返回的 URL物件 有個 searchParams 屬性，可以對 url 的 search 部分解析，再也不需要用迴圈或正則方式獲取 search 物件。
var url = 'https://demo.vczhan.com/wave/heart-wave.html?name=abc&age=18#part'
var searchParams = new URL(url).searchParams
searchParams.get('name') // abc
searchParams.has('age')// 18
當然，有個專門處理 search 的API： URLSearchParams
// {a: 1, b: 2} -> a=1&b=2
new URLSearchParams({a: 1, b: 2}).toString()
// a=1&b=2 -> {a: "1", b: "2"}
var obj ={}
var searchParams = new URLSearchParams('?a=1&b=2')
// searchParams.has('a') // true
// searchParams.get('a') // 1
// searchParams.append('c', '3'); searchParams.toString() // "a=1&b=2&c=3"
for(var [key, value] of searchParams.entries()) {
obj[key] = value
}
console.log(obj)
更詳細的請參考下方連結
URL： https://developer.mozilla.org...
URLSearchParams： https://developer.mozilla.org...