文档章节

不要再造轮子了:聊一聊 JavaScript 的 URL 对象是什么?

葡萄城技术团队
 葡萄城技术团队
发布于 2019/12/05 12:16
字数 2175
阅读 2.3K
收藏 28

本文由葡萄城技术团队于OSChina翻译并首发

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

 

如果我们自己编写从URL中分析和提取元素的代码,那么有可能会比较痛苦和麻烦。程序员作为这个社会中最“懒”的群体之一,无休止的重复造轮子必然是令人难以容忍的,所以大多数浏览器的标准库中都已经内置了URL对象。

那么现在,有了它,我们就可以将URL字符串作为参数传递给URL的构造函数,并创建它的实例解析URL内容了吗?答案是:“是的!”。

要使用URL构造函数创建URL对象,我们在以下代码中使用new来创建:

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

在上面的代码中,我们创建了一个绝对地址的URL对象的实例。但同时,我们还可以传入一个相对地址作为第一个参数,并把相对地址的基础URL作为第二个参数来创建一个URL对象。可能比较拗口,我们举个栗子:

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

看上面的代码,第二个基础URL参数必须是一个有效的绝对地址,而不可以是一个相对的地址片段,它必须要以http://或https://开头,我们还可以在下面的代码中以类似于链式定义的方式来使用:

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

 

如果每个参数使用toString()的话,我们的执行结果应该如下:

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

第二个参数是可选参数,只有当第一个参数是相对地址时才应传入。我们传入的字符串或URL对象被转换为USVString对象,该对象对应于一组Unicode标量值可能的序列集合。在我们的代码中,我们可以将它们视为常规字符串。如果两个参数都是相对地址,或者基础URL和相对地址一起无效,则会抛出TypeError异常。我们可以直接将URL对象传递给第二个参数,因为URL对象的toString方法将在构造函数中操作之前将URL对象转换为完整的URL字符串。

URL对象可以具有以下属性:

Hash,host,hostname,href,origin,username/password,pathname,port,protocol,search等属性,接下来,让我们一起来了解一下它们吧!

Hash属性

hash属性能获得URL中位于#号后的部分。由于字符串没有经过百分比解码,因此仍然对如下所示的特殊符号进行编码。它们使用下面的映射进行编码。在编码过程中,左侧的字符将转换为右侧的字符:

  • ‘:’ — %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);

在运行结果中,我们在console.log语句中得到‘#price’。该属性是一个USVString,当我们像上面那样获取它时,它会被转换为字符串。因为它不是只读属性,所以我们也可以像下面的代码中那样直接为它赋值:

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属性是包含主机名的USVString。如果端口包含在: 之后,则我们还将获得主机的端口号。例如,如果我们有:

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

console.log(exampleUrl.host);

我们就能获得huozige.grapecity.com.cn:8080。与其他USVString属性一样,当我们检索它时,它会转换为字符串。同样的,它也不是只读属性,所以我们也可以像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得到端口外的主机名:

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

console.log(exampleUrl.hostname)

你同样也可以像修改其他属性一样修改hostname属性,例如:

exampleUrl.hostname = ‘newExample.com’;

Href 属性

URL对象的href属性包含了传入URL对象的整个地址字符串,例如:

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

console.log(exampleUrl.href);

打出来的就是我们传给URL构造函数的内容,和其他属性一样,href属性也不是只读的。

Origin 属性

区别于其他属性,Origin是一个只读属性,它将为你返回具有URL来源的Unicode序列化USVString。Origin的结构是由传入的URL类型决定的,对于http或https 的链接,得到的Origin将会为 协议(http/https)+ (://) + 域名 + (:端口),一般情况下,默认端口将会被忽略。对于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属性也是可写属性,它能提取域名前的用户名和密码部分的内容,例如:

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属性

这个属性是指获得传入url的第一个斜杠(/) 后面除参数外的部分,例如:

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

console.log(url.pathname);

Port属性

Port属性是指可以获得传入Url地址的端口值,这个属性也是可写的。

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

console.log(url.port);

Protocol属性

可以获得传入Url地址参数的协议名,一般是指类似http:,https:,ftp:,file:等这样的协议。

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

console.log(url.protocol);

Search属性

可以获得传入Url地址参数?后的部分,但该属性只能获得整个查询字符串,如若需要了解各个参数的值,可以使用searchParams属性。

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

console.log(url.search);

searchParams属性

search属性只为我们获取了整个参数字符串,如果有把字符串解析为键值对,这时候searchParams属性就派上了用场,该属性将获得一个URLSearchParams对象,该对象具有列出查询字符串键值对列表的能力,例如,要获取参数列表,我们可以这样使用。

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

从第一个console.log语句中获得value1,从第二个console.log语句中获得value2。URLSearchParams对象有一个get方法,通过键名获取给定查询字符串键的值。

静态方法

URL构造函数里有2个静态方法,它有createObjectURL()方法和revokeObjectURL()方法。

URL.createObjectURL()静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL. 当你要已经用过了这个对象URL,然后要让浏览器知道这个URL已经不再需要指向对应的文件的时候,就需要调用这个方法。

总结

最后为大家带来一张表,希望能更好的帮助大家通览

 

有了URL对象,操纵和从URL中提取部分不再是一件痛苦的事情,因为我们不必自己编写所有代码来完成这项工作。大多数浏览器的标准库中都内置了URL对象。现在我们可以将URL作为字符串传递给URL构造函数并创建URL的实例。然后,我们可以使用方便的值属性和方法来操作并获得我们想要的URL部分。

最后,有什么问题,欢迎直接留言。

© 著作权归作者所有

葡萄城技术团队

葡萄城技术团队

粉丝 418
博文 599
码字总数 933111
作品 20
西安
高级程序员
私信 提问
加载中

评论(4)

J
Jjiawen
稍微测试了一下,谷歌浏览器完全支持,小程序不支持。
无论微信还是支付宝,这就很尴尬了。
发现博主分享的URL方法,很开心去试,结果告诉我只能用在h5😂
Roshomon
Roshomon
科普了,感谢
编辑部的故事
编辑部的故事
请把代码格式调好
葡萄城技术团队
葡萄城技术团队 博主
感谢提醒,已经修改
从babel实现es6类的继承来深入理解js的原型及继承

先聊个5毛钱的背景吧 自从有了babel这一个利器之后,es6现在已经被广泛的使用。JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的...

春天的风剑客
2018/09/11
0
0
图解javascript原型链

作者: HerryLo 本文永久有效链接: https://github.com/AttemptWeb...... 原型链和原型对象是js的核心,js以原型链的形式,保证函数或对象中的方法、属性可以让向下传递,按照面向对象的说法,...

HerryLo
2019/09/06
0
0
从JS对象开始,谈一谈“不可变数据”和函数式编程

文章转载自:https://segmentfault.com/a/1190000008780076 作为前端开发者,你会感受到JS中对象(Object)这个概念的强大。我们说“JS中一切皆对象”。最核心的特性,例如从String,到数组,再...

朱先忠老师
2018/05/20
0
0
Chrome浏览器插件开发心得

一、学习基础知识 从现在的经验来看,基本只需要看一下,360翻译的开发文档即可,开发出一个适合大部分人要求的插件了。 文档:http://open.chrome.360.cn/extension_dev/overview.html 二、...

熊川
2013/06/07
1.5W
6
JS与OC-WebView交互总结

OC与JS交互有两种方式,WKWebView和UIWebView,由于UIWebView比较耗内存,性能上不太好,所以苹果在iOS 8中推出了WKWebView。 一、与UIWebView交互 在UIWebView与JS交互中最简单的办法就是拦截...

乔兰伊雪
2018/05/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 宇宙银河乱弹英雄传 —— @FalconChen

1Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :Axxis的单曲《Only God Knows》 最近只听摇滚,挖了好多以前没听过的歌,蛮好。#今日歌曲推荐# 《Only God Knows》- Axxis 手机...

小小编辑
今天
137
1
Safari Date() 函数对日期时间字符串(yyyy-MM-dd HH:mm:ss) 提示NaN的问题

今天发现一个奇怪的问题,在iPhone使用 safari 选择定时发布文章到OSC,选择时间后提示不是合法的时间,判断时间的代码如下: var d = new Date('2020-01-23 23:15'); if (isNaN(d)) {...

FalconChen
昨天
124
0
ActiveMQ学习之通讯协议

一、支持的通讯协议 ActiveMQ支持的client-broker通讯协议有:TCP、NIO、UDP、SSL、HTTP(S)、VM 其中配置Transport Connector的文件在ActiveMQ安装目录的conf/activemq.xml中的<TransportCon...

冥焱
昨天
91
0
应急广播户户通平台

一、平台概述 应急广播户户通平台为软硬一体化广播服务解决方案。实现了应急广播、视音频及图片文字信息、调频及数字广播FM、天气预报信息接收功能,以及视音频播放、智能机器人、电子日历等...

neocean
昨天
133
0
如何为Apache 2.2启用mod_rewrite

我已经在我的Vista机器上安装了新的Apache 2.2,一切正常,除了mod重写。 我没有注释 LoadModule rewrite_module modules/mod_rewrite.s 但是我的重写规则都没有,即使是简单的重写规则 Re...

javail
昨天
53
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部