真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

JavaScript中的URL對象是什么-創(chuàng)新互聯(lián)

創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務(wù)器提供商，新人活動買多久送多久，劃算不套路！

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括灤州網(wǎng)站建設(shè)、灤州網(wǎng)站制作、灤州網(wǎng)頁制作以及灤州網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，灤州網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到灤州省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

JavaScript 中的 URL 對象是什么？針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

  如果我們自己編寫從URL中分析和提取元素的代碼，那么有可能會比較痛苦和麻煩。程序員作為這個(gè)社會中最“懶”的群體之一，無休止的重復(fù)造輪子必然是令人難以容忍的，所以大多數(shù)瀏覽器的標(biāo)準(zhǔn)庫中都已經(jīng)內(nèi)置了URL對象。

那么現(xiàn)在，有了它，我們就可以將URL字符串作為參數(shù)傳遞給URL的構(gòu)造函數(shù)，并創(chuàng)建它的實(shí)例解析URL內(nèi)容了嗎？答案是：“是的！”。

要使用URL構(gòu)造函數(shù)創(chuàng)建URL對象，我們在以下代碼中使用new來創(chuàng)建：

new URL('https://www.grapecity.com.cn');

在上面的代碼中，我們創(chuàng)建了一個(gè)絕對地址的URL對象的實(shí)例。但同時(shí)，我們還可以傳入一個(gè)相對地址作為第一個(gè)參數(shù)，并把相對地址的基礎(chǔ)URL作為第二個(gè)參數(shù)來創(chuàng)建一個(gè)URL對象?？赡鼙容^拗口，我們舉個(gè)栗子：

new URL('/developer', 'https://www.grapecity.com.cn');

看上面的代碼，第二個(gè)基礎(chǔ)URL參數(shù)必須是一個(gè)有效的絕對地址，而不可以是一個(gè)相對的地址片段，它必須要以http://或https://開頭，我們還可以在下面的代碼中以類似于鏈?zhǔn)蕉x的方式來使用：

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ù)是相對地址時(shí)才應(yīng)傳入。我們傳入的字符串或URL對象被轉(zhuǎn)換為USVString對象，該對象對應(yīng)于一組Unicode標(biāo)量值可能的序列集合。在我們的代碼中，我們可以將它們視為常規(guī)字符串。如果兩個(gè)參數(shù)都是相對地址，或者基礎(chǔ)URL和相對地址一起無效，則會拋出TypeError異常。我們可以直接將URL對象傳遞給第二個(gè)參數(shù)，因?yàn)閁RL對象的toString方法將在構(gòu)造函數(shù)中操作之前將URL對象轉(zhuǎn)換為完整的URL字符串。

URL對象可以具有以下屬性：

Hash,host,hostname,href,origin,username/password,pathname,port,protocol,search等屬性，接下來，讓我們一起來了解一下它們吧！

Hash屬性

hash屬性能獲得URL中位于#號后的部分。由于字符串沒有經(jīng)過百分比解碼，因此仍然對如下所示的特殊符號進(jìn)行編碼。它們使用下面的映射進(jìn)行編碼。在編碼過程中，左側(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屬性值，如下所示：

const exampleUrl = new URL('https://www.grapecity.com.cn/developer/spreadjs#price');
console.log(exampleUrl.hash);

在運(yùn)行結(jié)果中，我們在console.log語句中得到‘#price’。該屬性是一個(gè)USVString，當(dāng)我們像上面那樣獲取它時(shí)，它會被轉(zhuǎn)換為字符串。因?yàn)樗皇侵蛔x屬性，所以我們也可以像下面的代碼中那樣直接為它賦值：

exampleUrl.hash = '#newHash';

例如：

const exampleUrl = new URL（'https://www.grapecity.com.cn/developer/spreadjs#price'）; 
exampleUrl.hash ='#newPrice'; 
console.log（exampleUrl.hash）;

我們通過href屬性就能獲得更新后的URL https://www.grapecity.com.cn/developer/spreadjs#newHash

Host 屬性

URL對象的host屬性是包含主機(jī)名的USVString。如果端口包含在: 之后，則我們還將獲得主機(jī)的端口號。例如，如果我們有：

const exampleUrl = new URL('http://huozige.grapecity.com.cn:8080/');
console.log(exampleUrl.host);

我們就能獲得huozige.grapecity.com.cn:8080。與其他USVString屬性一樣，當(dāng)我們檢索它時(shí)，它會轉(zhuǎn)換為字符串。同樣的，它也不是只讀屬性，所以我們也可以像hash屬性一樣為它賦值：

const exampleUrl = new URL('http:// huozige.grapecity.com.cn:8080/功能演示');
exampleUrl.host = 'es.grapecity.com.cn:80';
console.log(exampleUrl);

這樣我們一樣能夠獲得全新的URL。

Hostname 屬性

使用hostname屬性，可以從URL得到端口外的主機(jī)名：

const exampleUrl = new URL('http:// huozige.grapecity.com.cn:8080/功能演示');
console.log(exampleUrl.hostname)

你同樣也可以像修改其他屬性一樣修改hostname屬性，例如：

exampleUrl.hostname = ‘newExample.com’;

Href 屬性

URL對象的href屬性包含了傳入U(xiǎn)RL對象的整個(gè)地址字符串，例如：

const exampleUrl = new URL('https://www.grapecity.com.cn/developer/spreadjs#price');
console.log(exampleUrl.href);

打出來的就是我們傳給URL構(gòu)造函數(shù)的內(nèi)容，和其他屬性一樣，href屬性也不是只讀的。

Origin 屬性

區(qū)別于其他屬性，Origin是一個(gè)只讀屬性，它將為你返回具有URL來源的Unicode序列化USVString。Origin的結(jié)構(gòu)是由傳入的URL類型決定的，對于http或https 的鏈接，得到的Origin將會為 協(xié)議（http/https）+ (://) + 域名 + (:端口)，一般情況下，默認(rèn)端口將會被忽略。對于BLOB 鏈接，Origin返回的則是BLOB：后面的部分。例如：

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)

你將會得到

https://www.grapecity.com.cn

UserName & Password屬性

UserName和Password屬性也是可寫屬性，它能提取域名前的用戶名和密碼部分的內(nèi)容，例如：

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);

Pathname屬性

這個(gè)屬性是指獲得傳入url的第一個(gè)斜杠(/) 后面除參數(shù)外的部分，例如：

const url = new URL ("https://www.grapecity.com.cn/developer/spreadjs#price")
console.log(url.pathname);

Port屬性

Port屬性是指可以獲得傳入U(xiǎn)rl地址的端口值，這個(gè)屬性也是可寫的。

const url = new URL('http://huozige.grapecity.com.cn:8080/功能演示');
console.log(url.port);

Protocol屬性

可以獲得傳入U(xiǎn)rl地址參數(shù)的協(xié)議名，一般是指類似http:，https:，ftp:，file:等這樣的協(xié)議。

const url = new URL('https://www.grapecity.com.cn/');
console.log(url.protocol);

Search屬性

可以獲得傳入U(xiǎn)rl地址參數(shù)？后的部分，但該屬性只能獲得整個(gè)查詢字符串，如若需要了解各個(gè)參數(shù)的值，可以使用searchParams屬性。

const url = new URL('https://www.grapecity.com.cn:443?key1=value1&key2=value2');
console.log(url.search);

searchParams屬性

search屬性只為我們獲取了整個(gè)參數(shù)字符串，如果有把字符串解析為鍵值對，這時(shí)候searchParams屬性就派上了用場，該屬性將獲得一個(gè)URLSearchParams對象，該對象具有列出查詢字符串鍵值對列表的能力，例如，要獲取參數(shù)列表，我們可以這樣使用。

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語句中獲得value1，從第二個(gè)console.log語句中獲得value2。URLSearchParams對象有一個(gè)get方法，通過鍵名獲取給定查詢字符串鍵的值。

靜態(tài)方法

URL構(gòu)造函數(shù)里有2個(gè)靜態(tài)方法，它有createObjectURL()方法和revokeObjectURL()方法。

URL.createObjectURL()靜態(tài)方法會創(chuàng)建一個(gè) DOMString，其中包含一個(gè)表示參數(shù)中給出的對象的URL。這個(gè) URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定。這個(gè)新的URL 對象表示指定的 File 對象或 Blob 對象。

URL.revokeObjectURL()方法會釋放一個(gè)通過URL.createObjectURL()創(chuàng)建的對象URL. 當(dāng)你要已經(jīng)用過了這個(gè)對象URL,然后要讓瀏覽器知道這個(gè)URL已經(jīng)不再需要指向?qū)?yīng)的文件的時(shí)候,就需要調(diào)用這個(gè)方法。

總結(jié)

最后為大家?guī)硪粡埍恚Ｍ芨玫膸椭蠹彝ㄓ[

JavaScript 中的 URL 對象是什么

有了URL對象，操縱和從URL中提取部分不再是一件痛苦的事情，因?yàn)槲覀儾槐刈约壕帉懰写a來完成這項(xiàng)工作。大多數(shù)瀏覽器的標(biāo)準(zhǔn)庫中都內(nèi)置了URL對象?，F(xiàn)在我們可以將URL作為字符串傳遞給URL構(gòu)造函數(shù)并創(chuàng)建URL的實(shí)例。然后，我們可以使用方便的值屬性和方法來操作并獲得我們想要的URL部分。

關(guān)于JavaScript 中的 URL 對象是什么問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道了解更多相關(guān)知識。


當(dāng)前標(biāo)題：JavaScript中的URL對象是什么-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://weahome.cn/article/ceigie.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部