您好,登錄后才能下訂單哦!
這篇文章主要介紹了JavaScript的URL 對(duì)象有什么用,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
如果我們自己編寫從URL中分析和提取元素的代碼,那么有可能會(huì)比較痛苦和麻煩。程序員作為這個(gè)社會(huì)中最“懶”的群體之一,無(wú)休止的重復(fù)造輪子必然是令人難以容忍的,所以大多數(shù)瀏覽器的標(biāo)準(zhǔn)庫(kù)中都已經(jīng)內(nèi)置了URL對(duì)象。
那么現(xiàn)在,有了它,我們就可以將URL字符串作為參數(shù)傳遞給URL的構(gòu)造函數(shù),并創(chuàng)建它的實(shí)例解析URL內(nèi)容了嗎?答案是:“是的!”。
要使用URL構(gòu)造函數(shù)創(chuàng)建URL對(duì)象,我們?cè)谝韵麓a中使用new來(lái)創(chuàng)建:
1 | new URL( 'https://www.grapecity.com.cn' ); |
在上面的代碼中,我們創(chuàng)建了一個(gè)絕對(duì)地址的URL對(duì)象的實(shí)例。但同時(shí),我們還可以傳入一個(gè)相對(duì)地址作為第一個(gè)參數(shù),并把相對(duì)地址的基礎(chǔ)URL作為第二個(gè)參數(shù)來(lái)創(chuàng)建一個(gè)URL對(duì)象??赡鼙容^拗口,我們舉個(gè)栗子:
1 | new URL( '/developer' , 'https://www.grapecity.com.cn' ); |
看上面的代碼,第二個(gè)基礎(chǔ)URL參數(shù)必須是一個(gè)有效的絕對(duì)地址,而不可以是一個(gè)相對(duì)的地址片段,它必須要以http://或https://開(kāi)頭,我們還可以在下面的代碼中以類似于鏈?zhǔn)蕉x的方式來(lái)使用:
1 2 3 4 5 6 7 8 9 | const gcUrl = 'https://www.grapecity.com.cn/' ; const gcDevUrl = new URL( "/developer" , gcUrl); const gcUrl2 = new URL(gcUrl); const gcSlnUrl = new URL( '/solutions' , gcUrl2); const Url = new URL( 'aboutus' , gcSlnUrl); |
如果每個(gè)參數(shù)使用toString()
的話,我們的執(zhí)行結(jié)果應(yīng)該如下:
https://www.grapecity.com.cn/
https://www.grapecity.com.cn/developer
https://www.grapecity.com.cn/
https://www.grapecity.com.cn/solutions
https://www.grapecity.com.cn/aboutus
第二個(gè)參數(shù)是可選參數(shù),只有當(dāng)?shù)谝粋€(gè)參數(shù)是相對(duì)地址時(shí)才應(yīng)傳入。我們傳入的字符串或URL對(duì)象被轉(zhuǎn)換為USVString對(duì)象,該對(duì)象對(duì)應(yīng)于一組Unicode標(biāo)量值可能的序列集合。在我們的代碼中,我們可以將它們視為常規(guī)字符串。如果兩個(gè)參數(shù)都是相對(duì)地址,或者基礎(chǔ)URL和相對(duì)地址一起無(wú)效,則會(huì)拋出TypeError異常。我們可以直接將URL對(duì)象傳遞給第二個(gè)參數(shù),因?yàn)閁RL對(duì)象的toString方法將在構(gòu)造函數(shù)中操作之前將URL對(duì)象轉(zhuǎn)換為完整的URL字符串。
URL對(duì)象可以具有以下屬性:
Hash,host,hostname,href,origin,username/password,pathname,port,protocol,search等屬性,接下來(lái),讓我們一起來(lái)了解一下它們吧!
hash屬性能獲得URL中位于#號(hào)后的部分。由于字符串沒(méi)有經(jīng)過(guò)百分比解碼,因此仍然對(duì)如下所示的特殊符號(hào)進(jìn)行編碼。它們使用下面的映射進(jìn)行編碼。在編碼過(guò)程中,左側(cè)的字符將轉(zhuǎn)換為右側(cè)的字符:
‘:’
— %3A
‘/’
— %2F
‘?’
— %3F
‘#’
— %23
‘[‘
— %5B
‘]’
— %5D
‘@’
— %40
‘!’
— %21
‘$’
— %24
“‘“
— %27
‘(‘
— %28
‘)’
— %29
‘*’
— %2A
‘+’
— %2B
‘,’
— %2C
‘;’
— %3B
‘=’
— %3D
‘%’
— %25
‘ ‘
— %20
或者 +
例如,我們有這樣的URL字符串,https://www.grapecity.com.cn/developer/spreadjs#price,然后我們可以直接取出Hash屬性值,如下所示:
1 2 | const exampleUrl = new URL( 'https://www.grapecity.com.cn/developer/spreadjs#price' ); console.log(exampleUrl.hash); |
在運(yùn)行結(jié)果中,我們?cè)赾onsole.log語(yǔ)句中得到‘#price’。該屬性是一個(gè)USVString,當(dāng)我們像上面那樣獲取它時(shí),它會(huì)被轉(zhuǎn)換為字符串。因?yàn)樗皇侵蛔x屬性,所以我們也可以像下面的代碼中那樣直接為它賦值:
1 | exampleUrl.hash = '#newHash' ; |
例如:
1 2 3 | const exampleUrl = new URL( 'https://www.grapecity.com.cn/developer/spreadjs#price' ); exampleUrl.hash = '#newPrice' ; console.log(exampleUrl.hash); |
我們通過(guò)href屬性就能獲得更新后的URL https://www.grapecity.com.cn/developer/spreadjs#newHash
URL對(duì)象的host屬性是包含主機(jī)名的USVString。如果端口包含在: 之后,則我們還將獲得主機(jī)的端口號(hào)。例如,如果我們有:
1 2 | const exampleUrl = new URL( 'http://huozige.grapecity.com.cn:8080/' ); console.log(exampleUrl.host); |
我們就能獲得huozige.grapecity.com.cn:8080。與其他USVString屬性一樣,當(dāng)我們檢索它時(shí),它會(huì)轉(zhuǎn)換為字符串。同樣的,它也不是只讀屬性,所以我們也可以像hash屬性一樣為它賦值:
1 2 3 | const exampleUrl = new URL( 'http:// huozige.grapecity.com.cn:8080/功能演示' ); exampleUrl.host = 'es.grapecity.com.cn:80' ; console.log(exampleUrl); |
這樣我們一樣能夠獲得全新的URL。
使用hostname屬性,可以從URL得到端口外的主機(jī)名:
1 2 | const exampleUrl = new URL( 'http:// huozige.grapecity.com.cn:8080/功能演示' ); console.log(exampleUrl.hostname) |
你同樣也可以像修改其他屬性一樣修改hostname屬性,例如:
1 | exampleUrl.hostname = ‘newExample.com’; |
URL對(duì)象的href屬性包含了傳入U(xiǎn)RL對(duì)象的整個(gè)地址字符串,例如:
1 2 | const exampleUrl = new URL( 'https://www.grapecity.com.cn/developer/spreadjs#price' ); console.log(exampleUrl.href); |
打出來(lái)的就是我們傳給URL構(gòu)造函數(shù)的內(nèi)容,和其他屬性一樣,href屬性也不是只讀的。
區(qū)別于其他屬性,Origin是一個(gè)只讀屬性,它將為你返回具有URL來(lái)源的Unicode序列化USVString。Origin的結(jié)構(gòu)是由傳入的URL類型決定的,對(duì)于http或https 的鏈接,得到的Origin將會(huì)為 協(xié)議(http/https)+ (://) + 域名 + (:端口),一般情況下,默認(rèn)端口將會(huì)被忽略。對(duì)于BLOB 鏈接,Origin返回的則是BLOB:后面的部分。例如:
1 2 3 4 | const url1 = new URL( "https://www.grapecity.com.cn/:443" ) const url2 = new URL( "blob:https://www.grapecity.com.cn/:443" ) console.log(url1.origin); console.log(url2.origin) |
你將會(huì)得到
https://www.grapecity.com.cn
UserName和Password屬性也是可寫屬性,它能提取域名前的用戶名和密碼部分的內(nèi)容,例如:
1 2 3 4 5 6 7 | const url = new URL( 'https://username:password@www.grapecity.com.cn' ); console.log(url.username); console.log(url.password); url.username = “username1”; url.password = “password1”; console.log(url.username); console.log(url.password); |
這個(gè)屬性是指獲得傳入url的第一個(gè)斜杠(/) 后面除參數(shù)外的部分,例如:
1 2 | const url = new URL ( "https://www.grapecity.com.cn/developer/spreadjs#price" ) console.log(url.pathname); |
Port屬性是指可以獲得傳入U(xiǎn)rl地址的端口值,這個(gè)屬性也是可寫的。
1 2 | const url = new URL( 'http://huozige.grapecity.com.cn:8080/功能演示' ); console.log(url.port); |
可以獲得傳入U(xiǎn)rl地址參數(shù)的協(xié)議名,一般是指類似http:,https:,ftp:,file:等這樣的協(xié)議。
1 2 | const url = new URL( 'https://www.grapecity.com.cn/' ); console.log(url.protocol); |
可以獲得傳入U(xiǎn)rl地址參數(shù)?后的部分,但該屬性只能獲得整個(gè)查詢字符串,如若需要了解各個(gè)參數(shù)的值,可以使用searchParams屬性。
1 2 | const url = new URL( 'https://www.grapecity.com.cn:443?key1=value1&key2=value2' ); console.log(url.search); |
search屬性只為我們獲取了整個(gè)參數(shù)字符串,如果有把字符串解析為鍵值對(duì),這時(shí)候searchParams屬性就派上了用場(chǎng),該屬性將獲得一個(gè)URLSearchParams對(duì)象,該對(duì)象具有列出查詢字符串鍵值對(duì)列表的能力,例如,要獲取參數(shù)列表,我們可以這樣使用。
1 2 3 | const url = new URL( ' https://www.grapecity.com.cn/?key1=value1&key2=value2' ); console.log(url.searchParams.get( 'key1' )); console.log(url.searchParams.get( 'key2' )); |
從第一個(gè)console.log語(yǔ)句中獲得value1,從第二個(gè)console.log語(yǔ)句中獲得value2。URLSearchParams對(duì)象有一個(gè)get方法,通過(guò)鍵名獲取給定查詢字符串鍵的值。
URL構(gòu)造函數(shù)里有2個(gè)靜態(tài)方法,它有createObjectURL()方法和revokeObjectURL()方法。
URL.createObjectURL()靜態(tài)方法會(huì)創(chuàng)建一個(gè) DOMString,其中包含一個(gè)表示參數(shù)中給出的對(duì)象的URL。這個(gè) URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。這個(gè)新的URL 對(duì)象表示指定的 File 對(duì)象或 Blob 對(duì)象。
URL.revokeObjectURL()方法會(huì)釋放一個(gè)通過(guò)URL.createObjectURL()創(chuàng)建的對(duì)象URL. 當(dāng)你要已經(jīng)用過(guò)了這個(gè)對(duì)象URL,然后要讓瀏覽器知道這個(gè)URL已經(jīng)不再需要指向?qū)?yīng)的文件的時(shí)候,就需要調(diào)用這個(gè)方法。
最后為大家?guī)?lái)一張表,希望能更好的幫助大家通覽
有了URL對(duì)象,操縱和從URL中提取部分不再是一件痛苦的事情,因?yàn)槲覀儾槐刈约壕帉懰写a來(lái)完成這項(xiàng)工作。大多數(shù)瀏覽器的標(biāo)準(zhǔn)庫(kù)中都內(nèi)置了URL對(duì)象。現(xiàn)在我們可以將URL作為字符串傳遞給URL構(gòu)造函數(shù)并創(chuàng)建URL的實(shí)例。然后,我們可以使用方便的值屬性和方法來(lái)操作并獲得我們想要的URL部分。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“JavaScript的URL 對(duì)象有什么用”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。