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

本文涉及的产品
云解析DNS,个人版 1个月
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: JavaScript中你可能不知道URL构造函数的属性

URL


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

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

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


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


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


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


一个完整URL


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


image.png

URL constructor


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


const url = newURL(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;
}


可以尝试在浏览中打印


image.png

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



image.png

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


一种简单的查询参数选择方法提供了 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 来初始化解析器:


因为'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 ()实例的 origin searchParams 属性是只读的。其他的都是可写的,当你改变它们的时候可以修改 URL


总结


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


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


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


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


  • url.search 原始查询字符串
  • url.searchParams 选择查询字符串参数
  • url.hostname 访问主机名
  • url.pathname 读取路径名
  • url.hash #后面的参数
相关文章
|
19天前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 构造函数模式
js设计模式【详解】—— 构造函数模式
21 6
|
18天前
|
JavaScript 前端开发 CDN
前端 JS 经典:package.json 属性详解
前端 JS 经典:package.json 属性详解
14 1
|
21天前
|
XML JavaScript 前端开发
如何在JavaScript中设置多个样式属性?
【6月更文挑战第29天】如何在JavaScript中设置多个样式属性?
36 3
|
15天前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
13 0
|
17天前
|
JavaScript
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
14 0
|
18天前
|
JavaScript
js 下载文件(根据URL下载文件,根据URL下载图片)
js 下载文件(根据URL下载文件,根据URL下载图片)
13 0
|
18天前
|
JavaScript 前端开发 数据格式
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
18 0
|
19天前
|
JavaScript
js 获取并解析 url 中参数的三种方法
js 获取并解析 url 中参数的三种方法
10 0
|
19天前
|
JavaScript
js 排序—— sort() 对普通数组、对象数组(单属性/多属性)排序
js 排序—— sort() 对普通数组、对象数组(单属性/多属性)排序
9 0
|
2月前
uView queryParams 对象转URL参数
uView queryParams 对象转URL参数
32 0

热门文章

最新文章