hzfvictory's blog

Url的方法简单整理

# URL 实例的属性

当你创建一个 URL 对象时，可以通过这些属性访问或修改 URL 的各部分：

const url = new URL("https://example.com:8080/path/name?query=value#hash");
1
属性 说明 示例输出
href 完整的 URL "https://example.com:8080/path/name?query=value#hash"
origin 协议、主机和端口号组成的字符串 "https://example.com:8080"
protocol 协议部分 "https:"
host 主机名和端口号 "example.com:8080"
hostname 主机名 "example.com"
port 端口号 "8080"
pathname 路径部分（不含查询参数和片段标识符） "/path/name"
search 查询参数部分（包括 ?） "?query=value"
searchParams 一个 URLSearchParams 对象（操作查询参数） URLSearchParams { "query" => "value" }
hash 片段标识符（包括 #） "#hash"

# URLSearchParams 对象的方法

URL.searchParams 返回一个 URLSearchParams 对象，可以方便地操作查询参数：

new URLSearchParams(decodeURIComponent(window.location.search)); // 也可以这么使用

const params = url.searchParams;
1
2
3
方法 说明 示例
append(key, value) 添加查询参数（不覆盖已有的同名参数） params.append("key", "value")
set(key, value) 设置查询参数（覆盖已有的同名参数） params.set("key", "value")
get(key) 获取查询参数的第一个值 params.get("key") 返回 "value"
getAll(key) 获取查询参数的所有值（数组形式） params.getAll("key") 返回 ["value1", "value2"]
has(key) 检查是否存在某个查询参数 params.has("key") 返回 true
delete(key) 删除某个查询参数 params.delete("key")
toString() 将查询参数序列化为字符串 params.toString() 返回 "key=value"
forEach(callback) 遍历所有键值对 params.forEach((value, key) => console.log(key, value))

# URI编码解码

这些函数直接操作 URL：

方法 说明 示例
encodeURI(uri) 编码整个 URI，使其可以安全地传输（保留 URI 组件分隔符，如 /, :, ?, # 等） encodeURI("https://example.com/测试") → "https://example.com/%E6%B5%8B%E8%AF%95"
encodeURIComponent(uri) 编码 URI 的一个组件（不保留分隔符），通常用于查询参数和路径片段 encodeURIComponent("测试") → "%E6%B5%8B%E8%AF%95"
decodeURI(uri) 解码通过 encodeURI 编码的 URI decodeURI("https://example.com/%E6%B5%8B%E8%AF%95") → "https://example.com/测试"
decodeURIComponent(uri) 解码通过 encodeURIComponent 编码的 URI 组件 decodeURIComponent("%E6%B5%8B%E8%AF%95") → "测试"
location 获取当前页面的完整 URL 和部分信息（仅限浏览器环境） location.href → 当前页面的 URL

# 浏览器的 window.location 对象

window.location 提供了一些方法和属性来操作当前页面的 URL。

属性/方法 说明 示例
location.href 获取/设置当前页面的完整 URL "https://example.com/page?query=1"
location.origin 获取当前页面的协议 + 主机名 + 端口号 "https://example.com"
location.pathname 获取当前页面的路径部分 "/page"
location.search 获取当前页面的查询参数部分 "?query=1"
location.hash 获取当前页面的哈希部分（# 后面的内容） "#section1"
location.reload() 重新加载当前页面 location.reload()
location.assign() 加载新页面 location.assign("https://new.com")
location.replace() 替换当前页面，不会保留历史记录 location.replace("https://new.com")

# 浏览器的 window.history 对象

# history.pushState(state, title, url)

  • 向浏览历史栈中添加一个新状态，同时更新 URL，但不会触发页面刷新。

  • 参数

    • state: 自定义的状态对象，通常用于保存页面状态。
    • title: 暂时无实际作用（浏览器大多忽略）。
    • url: 可选的新 URL，必须与当前页面同源。
history.pushState({ page: 1 }, "Page 1", "/page1");
console.log(location.href); // 更新为新 URL，比如 "https://example.com/page1"
1
2

# history.replaceState(state, title, url)

  • 替换当前的历史记录条目，而不是添加新条目。
  • 参数与 pushState 相同。
history.replaceState({ page: 2 }, "Page 2", "/page2");
console.log(location.href); // URL 更新为 "/page2"
1
2

# history.back()

  • 模拟浏览器的后退按钮，跳转到上一页。
history.back();
1

# history.forward()

  • 模拟浏览器的前进按钮，跳转到下一页。
history.forward();
1

# history.go(delta)

  • 按指定的偏移量跳转历史记录：
    • delta > 0: 向前跳转。
    • delta < 0: 向后跳转。
    • delta = 0: 刷新当前页面。
history.go(-1); // 等价于 history.back()
history.go(1);  // 等价于 history.forward()
1
2
// 带参数刷新当前页面
window.history.replaceState(null, '', window.location.origin + window.location.pathname);
window.location.reload();
// history.go(0)
1
2
3
4

# Blob 和 URL 对象相关的方法

# URL.createObjectURL()

  • 将 Blob 或 File 对象转换为临时的 URL，用于浏览器中加载文件。
  • 常用于本地图片、音视频预览。
const blob = new Blob(["Hello, world!  随便写"], { type: "text/plain" });
const url = URL.createObjectURL(blob);
console.log(url); // 类似 "blob:https://a.readlife.mobi/b3cfa0fb-43ef-41f9-9cd6-c7a426ff7b74"
1
2
3

# URL.revokeObjectURL()

  • 释放由 URL.createObjectURL() 创建的临时 URL，避免内存泄漏。 页面退出也会释放
URL.revokeObjectURL(url);
1

# 其他

navigator.sendBeacon()

用于低延迟、可靠发送数据到服务器，常用于页面关闭前发送统计数据。

navigator.sendBeacon("https://example.com/track", JSON.stringify({ key: "value" }));
1

← CSS使用锦囊 →