第js完全解析url和拼接我們經(jīng)常會(huì)遇到需要自己解析url地址，或者是自己拼接url，因此我們需要一個(gè)專門對url處理的js

1、理解url

url由6部分組成

例如:

/weixin_43236062/article/details/109065450id=1name=huangnan?

常見的協(xié)議有兩種，一種是http一種是https后面接://域名/ip：/DNS服務(wù)器把域名解析成ip?端口范圍0-65535http默認(rèn)80https默認(rèn)443hashhash在url最后以#開頭的一段路徑還有一種是history，history就是，例子就是history路徑/weixin_43236062/article/details/109065450也相當(dāng)于文件的名稱參數(shù)id=1name=huangnan.在后面加上，由切割，前是鍵值，后是值

綜合起來就可以得出

協(xié)議://域名(ip):端口/hash/路徑參數(shù)

url也可以簡寫，正常來說除了路徑，其他都可以不寫，相當(dāng)于相對路徑。

我們了解url以后，就可以開始解析或者拼接url了

2、解析url

2.1、全量解析

全量解析，我們可以借助a標(biāo)簽。

a標(biāo)簽通過打印，我們會(huì)發(fā)現(xiàn)一些比較關(guān)鍵的用法：

origin、hash、pathname這些都是我們常用的屬性

constparse=(path)={

letdata={

path:'',

query:{},

origin:'',

hash:''

vartag=window.document.createElement('a')

tag.href=path

data.origin=tag.origin

data.hash=tag.hash

data.path=tag.pathname

letpathList=tag.search.split('')

//獲取query

if(pathList[1]){

letqueryList=pathList[1].split('')

queryList.map((item)={

letqueryData=item.split('=')

data.query[queryData[0]]=queryData[1]

returndata

2.2、只取參數(shù)

constparseQuery=(path)={

letquery={},

letqueryList=path.split('')

//獲取query

if(queryList[1]){

letqueryDataList=queryList[1].split('')

queryDataList.map((item)={

letqueryData=item.split('=')

data.query[queryData[0]]=queryData[1]

returnquery

}else{

returnfalse

3、合并url

constbuild=(path,query={})={

if(!_isObject(query)){

console.error('請傳入正確的query')

return

letstr=''

Object.keys(query).forEach(key={

str+=`${key}=${encodeURICompone