浏览器自带URL(), URLSearchParams()的简单使用

浏览器原生提供URL()接口,它是一个构造函数,用来构造、解析和编码 URL。一般情况下,通过window.URL可以拿到这个构造函数。

URL()

URL()作为构造函数,可以生成 URL 实例。它接受一个表示 URL 的字符串作为参数。如果参数不是合法的 URL,会报错。

var url = new URL('https://www.example.com/article?id=2#first');
console.log(url)
//输出
URL{
    hash: "#first"
    host: "www.example.com"
    hostname: "www.example.com"
    href: "https://www.example.com/article?id=2#first"
    origin: "https://www.example.com"
    password: ""
    pathname: "/article"
    port: ""
    protocol: "https:"
    search: "?id=2"
    searchParams: URLSearchParams {}
    username: ""
    __proto__: URL
}

URL 实例方法

URL 实例的属性与Location对象的属性基本一致,返回当前 URL 的信息。

  • URL.href:返回整个 URL
  • URL.protocol:返回协议,以冒号:结尾
  • URL.hostname:返回域名
  • URL.host:返回域名与端口,包含:号,默认的80和443端口会省略
  • URL.port:返回端口
  • URL.origin:返回协议、域名和端口
  • URL.pathname:返回路径,以斜杠/开头
  • URL.search:返回查询字符串,以问号?开头
  • URL.searchParams:返回一个URLSearchParams实例,该属性是Location对象没有的
  • URL.hash:返回片段识别符,以井号#开头
  • URL.password:返回域名前面的密码
  • URL.username:返回域名前面的用户名

URL.searchParams

searchParams: URLSearchParams
__proto__: URLSearchParams
append: ƒ append()
delete: ƒ delete()
entries: ƒ entries()
forEach: ƒ forEach()
get: ƒ ()
getAll: ƒ getAll()
has: ƒ has()
keys: ƒ keys()
set: ƒ ()
sort: ƒ sort()
toString: ƒ toString()
values: ƒ values()
constructor: ƒ URLSearchParams()
Symbol(Symbol.iterator): ƒ entries()
Symbol(Symbol.toStringTag): "URLSearchParams"
__proto__: Object

URLSearchParams ()

URLSearchParams是URL() searchParams的简单版本,方法与URL()里的一模一样

URLSearchParams 构造函数不会解析完整 URL,但是如果字符串起始位置有 ? 的话会被去除

var paramsString1 = "http://example.com/search?query=%40";
var searchParams1 = new URLSearchParams(paramsString1);

searchParams1.has("query"); // false
searchParams1.has("http://example.com/search?query"); // true

searchParams1.get("query"); // null
searchParams1.get("http://example.com/search?query"); // "@" (equivalent to decodeURIComponent('%40'))

var paramsString2 = "?query=value";
var searchParams2 = new URLSearchParams(paramsString2);
searchParams2.has("query"); // true

var url = new URL("http://example.com/search?query=%40");
var searchParams3 = new URLSearchParams(url.search);
searchParams3.has("query") // true

搭配使用

var url = new URL('https://example.com?foo=1&bar=2');
var params = new URLSearchParams(url.search);
params.toString() // "foo=1&bar=2'

URLSearchParams()实例方法

URLSearchParams.append() 插入一个指定的键/值对作为新的搜索参数。

URLSearchParams.delete() 从搜索参数列表里删除指定的搜索参数及其对应的值。

URLSearchParams.entries() 返回一个iterator可以遍历所有键/值对的对象。

URLSearchParams.get() 获取指定搜索参数的第一个值。

URLSearchParams.getAll() 获取指定搜索参数的所有值,返回是一个数组。

URLSearchParams.has() 返回 Boolean 判断是否存在此搜索参数。

URLSearchParams.keys() 返回iterator 此对象包含了键/值对的所有键名。

URLSearchParams.set() 设置一个搜索参数的新值,假如原来有多个值将删除其他所有的值。

URLSearchParams.sort() 按键名排序。

URLSearchParams.toString() 返回搜索参数组成的字符串,可直接使用在URL上。

URLSearchParams.values() 返回iterator 此对象包含了键/值对的所有值。

  • 1.本站主要是为了记录工作、学习中遇到的问题,可能由于本人技术有限,有些不正确的地方,仅供参考。
  • 2.本站中会转载我认为有用的博客文章,添加一些外链网站地址,但这些博客文章、论坛和网站上的内容和我没有关系,不代表我的意见,请网友自己多注意辨别。
  • 3.本站中转载文章会写明来源(点击下方链接按钮即可),感谢原作者的辛苦写作,如果有异议,及时联系我处理,谢谢!
  • 4.欢迎指出有问题的地方,我会尽快修正,谢谢!

本篇文章非原创,点击此处查看原文

系统由 Nginx + Next.js + React + Node + TailWindCss 驱动

沪ICP备20021316号