Javascript中对 url 的一些常用操作

URL对象

URL 接口用于解析，构造，规范化和编码 URL。它通过提供允许你轻松阅读和修改 URL 组件的属性来工作。通常，通过在调用 URL 的构造函数时将 URL 指定为字符串或提供相对 URL 和基本 URL 来创建新的 URL 对象。然后，你可以轻松读取 URL 的已解析组成部分或对 URL 进行更改。

如果浏览器尚不支持URL()构造函数，则可以使用Window中的Window.URL (en-US)属性。确保检查你的任何目标浏览器是否要求对此添加前缀。

构造器

创建并返回一个URL对象，该 URL 对象引用使用绝对 URL 字符串，相对 URL 字符串和基本 URL 字符串指定的 URL。

new URL(url, [base])

参数：

• url :  一个绝对或相对 URL， 如果 url 是相对 URL，则会将 base 用作基准 URL。如果 url 是绝对 URL，则无论参数 base 是否存在，都将被忽略。
• base : 可选 – 一个表示基准 URL 的字符串，当 url 为相对 URL 时，它才会生效。如果未指定，它默认为 undefined。

属性

• href: 包含完整 URL 的 USVString。
• protocol: 包含 URL 协议名的 USVString，末尾带 ‘:’。
• username: 包含在域名前面指定的用户名的 USVString。
• password: 包含在域名前面指定的密码的 USVString 。
• host: 一个USVString，其中包含域（即主机名），后跟（如果指定了端口）“：”和 URL 的端口。
• hostname: 包含 URL 域名的 USVString。
• port: 包含 URL 端口号的 USVString。
• pathname: 以 ‘/’ 起头紧跟着 URL 文件路径的 DOMString。
• search: 一个USVString ，指示 URL 的参数字符串；如果提供了任何参数，则此字符串包括所有参数，并以开头的“？”开头 字符。
• hash: 包含’#’的USVString，后跟 URL 的片段标识符。
• origin: 只读 返回一个包含协议名、域名和端口号的 USVString。
• searchParams: 只读 URLSearchParams对象，可用于访问search中找到的各个查询参数。

属性对照图

方法

• toString() 返回包含整个 URL 的USVString。它是URL.href的同义词，尽管它不能用于修改值。
• toJSON() 返回包含整个 URL 的USVString。它返回与href属性相同的字符串。

静态方法

• createObjectURL() 返回一个DOMString ，包含一个唯一的 blob 链接（该链接协议为以 blob:，后跟唯一标识浏览器中的对象的掩码）。
• revokeObjectURL() 销毁之前使用URL.createObjectURL()方法创建的 URL 实例。

URLSearchParams 对象

构造器

返回一个 URLSearchParams 对象。

URLSearchParams([options])

参数：

options 可选

可以是以下之一：

• 一个字符串，这个字符串从 application/x-www-form-urlencoded 的格式解析而来。开头的 '?' 字符会被忽略。
• 一系列基于字面量的字符串键值对，或者任何对象（例如 FormData 对象），能提供一系列字符串对的迭代器对象。需要注意，File 将被序列化为 [object File]，而不是它们的文件名（就像 application/x-www-form-urlencoded 格式中的那样）。
• 一个由字符串键和字符串值组成的键值对对象。请注意，不支持嵌套。

属性

• size 查询参数项总数。

方法

• URLSearchParams.append () 附加指定的键值对作为新的搜索参数。
• URLSearchParams.delete () 从所有搜索参数列表中删除匹配名称和可选值的搜索参数。
• URLSearchParams.entries () 返回一个迭代器，允许以查询字符串中出现的顺序遍历该对象中包含的所有键值对。
• URLSearchParams.forEach () 允许通过回调函数迭代包含在此对象中的所有值。
• URLSearchParams.get () 返回与给定搜索参数相关联的第一个值。
• URLSearchParams.getAll () 返回与给定搜索参数关联的所有值。
• URLSearchParams.has () 返回一个布尔值，表示给定的参数或参数值对是否存在。
• URLSearchParams.keys () 返回一个迭代器，允许迭代此对象中包含的键值对的所有键。
• URLSearchParams.set () 将与给定搜索参数关联的值设置为给定值。如果有多个值，则删除其他值。
• URLSearchParams.sort () 对所有的键值对(如果有的话)进行键排序。
• URLSearchParams.toString () 返回一个字符串，其中包含适合在URL中使用的查询字符串。
• URLSearchParams.values () 返回一个迭代器，允许迭代此对象中包含的所有键值对的值。

示例

url = new URL("https://admin:123456@wizops.net:80/archives/202312/179.html?q=url&page=1#myhash")
console.log(url)
url.hash = "hash"
// 'https://admin:123456@wizops.net:80/archives/202312/179.html?q=url&page=1#hash'
url.port = 8080
// 'https://admin:123456@wizops.net:8080/archives/202312/179.html?q=url&page=1#hash'

url.search = new URLSearchParams({keyword: "js", page: 2})
// 'https://admin:123456@wizops.net:8080/archives/202312/179.html?keyword=js&page=2#hash'

 

 查看原文：Javascript中对 url 的一些常用操作

 关注公众号 "字节航海家" 及时获取最新内容