浅谈JavaScript中你可能不知道URL构造函数的属性


Posted in Javascript onJuly 13, 2020

URL

URL 是统一资源定位符,对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它,

在 Web 开发中,有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点

例如,这里是这篇博客文章的路径:

https://www.vipbic.com/thread.html?id=101

通常您需要访问 URL 的特定属性。这些可能是主机名(例如 vipbic.com ) ,或者路径名(例如/thread)

JavaScript用于访问URL对象的提供一个URL()构造函数,很方便解析

一个完整URL

用一张图片来解释,没有太多的文字描述,在下面的图片中你可以找到一个 URL 的主要包含属性:

浅谈JavaScript中你可能不知道URL构造函数的属性

URL constructor

URL ()是一个 constuctor 函数,它可以解析 URL 的对象:

const url = new URL(relativeOrAbsolute [, absoluteBase]);

relativeOrAbsolute参数可以是绝对 URL,也可以是相对 URL。如果第一个参数是相对的,那么第二个参数 absoluteBase 必须是绝对 URL,它必须是第一个参数的基础

例如,让我们用一个绝对 URL 初始化 URL():

const url = new URL('http://example.com/path/index.html');
url.href; // => 'http://example.com/path/index.html'

或者合并相对和绝对的 url:

const url = new URL('/path/index.html', 'http://example.com');
url.href; // => 'http://example.com/path/index.html'

创建 URL ()实例后,可以访问实例:

interface URL {
 href:   USVString;
 protocol: USVString;
 username: USVString;
 password: USVString;
 host:   USVString;
 hostname: USVString;
 port:   USVString;
 pathname: USVString;
 search:  USVString;
 hash:   USVString;

 readonly origin: USVString;
 readonly searchParams: URLSearchParams;

 toJSON(): USVString;
}

可以尝试在浏览中打印

浅谈JavaScript中你可能不知道URL构造函数的属性

Query string

Search 属性访问前缀为? : 的 URL 的查询字符串:

const url = new URL(
 'http://example.com/path/index.html?message=hello&who=world'
);
url.search; // => '?message=hello&who=world'

如果查询字符串不存在的字符串,url.search 将返回为空字符串” :

const url1 = new URL('http://example.com/path/index.html');
const url2 = new URL('http://example.com/path/index.html?');

url1.search; // => ''
url2.search; // => ''

Parsing query string

浅谈JavaScript中你可能不知道URL构造函数的属性

访问查询参数比访问原始查询字符串更方便

一种简单的查询参数选择方法提供了 url.searchParams 属性,该属性包含 URLSearchParams 的实例

URLSearchParams 对象提供了许多方法(如 get (param)、 has (param))来访问查询字符串参数

看一个例子:

const url = new URL(
 'http://example.com/path/index.html?message=hello&who=world'
);
url.searchParams.get('message'); // => 'hello'
url.searchParams.get('missing'); // => null

get.('message'),返回消息查询参数的值-‘ hello',当去尝试,访问一个不存在的参数 url.searchParams.get('missing')的结果为 null

hostname

Hostname 属性包含 URL 的主机名:

const url = new URL('http://example.com/path/index.html');
url.hostname; // => 'example.com'

pathname

属性获取 URL 的路径名:

const url = new URL('http://example.com/path/index.html?param=value');
url.pathname; // => '/path/index.html'

如果 URL 没有路径,URL.pathname 属性将返回斜杠字符/:

const url = new URL('http://example.com/');
url.pathname; // => '/'

hash

可以使用 url.hash 属性访问#后面的参数:

const url = new URL('http://example.com/path/index.html#bottom');
url.hash; // => '#bottom'

当 URL 中的散列#时,URL.hash 计算为空字符串” :

const url = new URL('http://example.com/path/index.html');
url.hash; // => ''

URL validation

当new URL ()构造函数创建一个实例时,作为副作用,它还验证 URL 的正确性。如果 URL 值无效,则抛出 TypeError

例如,http ://example. com 是一个无效的 URL,因为 http 后面的空格字符

让我们使用这个无效的 URL 来初始化解析器:

try {
 const url = new URL('http ://example.com');
} catch (error) {
 error; // => TypeError, "Failed to construct URL: Invalid URL"
}

因为'http ://example. com'是一个无效的 URL,正如预期的那样,new URL ('http ://example. com')抛出一个 TypeError

URL manipulation

除了访问 URL 属性之外,搜索、主机名、路径名、hash等属性都是可写的??因此您可以操作 URL

例如,让我们把现有 URL 的主机名从 red. com 修改为 blue.io:

const url = new URL('http://red.com/path/index.html');
url.href; // => 'http://red.com/path/index.html'

url.hostname = 'blue.io';
url.href; // => 'http://blue.io/path/index.html'

注意,只有 URL ()实例的 originsearchParams 属性是只读的。其他的都是可写的,当你改变它们的时候可以修改 URL

总结

URL()构造函数可以方便地在 JavaScript 中解析(和验证) URL

new URL (relativeOrAbsolute [ ,absolute base ])接受作为第一个参数的绝对或相对 URL。如果第一个参数是相对的,则必须将第二个参数指

示为一个作为第一个参数基础的URL

创建 URL()实例后,可以获取到以下实列方法

  • url.search 原始查询字符串
  • url.searchParams 选择查询字符串参数
  • url.hostname 访问主机名
  • url.pathname 读取路径名
  • url.hash #后面的参数

文章属于翻译,作者部分有所改动,

作者:羊先生

英文原文, https://dmitripavlutin.com/parse-url-javascript/

到此这篇关于浅谈JavaScript中你可能不知道URL构造函数的属性的文章就介绍到这了,更多相关JavaScript URL构造函数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
JS中的继承操作实例总结
Jun 06 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 #Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 #Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 #Javascript
浅析JavaScript 函数防抖和节流
Jul 13 #Javascript
详解JavaScript 异步编程
Jul 13 #Javascript
javascript canvas时钟模拟器
Jul 13 #Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 #Javascript
You might like
PHP crc32()函数讲解
2019/02/14 PHP
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
python获取服务器响应cookie的实例
2018/12/28 Python
Python中@property的理解和使用示例
2019/06/11 Python
Apache部署Django项目图文详解
2019/07/30 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
Python 转换文本编码实现解析
2019/08/27 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
Python实现手绘图效果实例分享
2020/07/22 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
信息管理专业推荐信
2013/10/29 职场文书
应届大学生的推荐信
2013/11/20 职场文书
房产委托公证书样本
2014/04/04 职场文书
创先争优活动承诺书
2014/08/30 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
收银员岗位职责
2015/02/03 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
党小组推荐意见
2015/06/02 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
A22国内电台短波广播频率表
2022/05/10 无线电
Python find()、rfind()方法及作用
2022/12/24 Python