new URL()的使用

biaoblog.cn 个人博客

发布于 2025-05-21 09:23:50

53300

代码可运行

文章被收录于专栏：web技术开发分享web技术开发分享

运行总次数：0

代码可运行

new URL 是操作 URL 的强大工具，简化了参数的获取、修改、添加和删除等操作，同时能方便解析和构造 URL。在前端开发中有很多实用场景，以下是它的主要功能和典型使用场景：

基础功能

创建 URL 对象

const url = new URL("https://example.com/path?query=123#hash");
console.log(url.hostname); // "example.com"
console.log(url.pathname); // "/path"
console.log(url.search); // "?query=123"
console.log(url.hash); // "#hash"

通过 Base URL 构造

const baseURL = "https://example.com";
const newURL = new URL("/newPath?key=value", baseURL);
console.log(newURL.href); // "https://example.com/newPath?key=value"

常用操作场景

获取参数值：**get**

场景：前端路由或功能模块中，读取 URL 参数来动态调整页面内容。

const url = new URL("https://example.com?user=John&age=25");
console.log(url.searchParams.get("user")); // "John"
console.log(url.searchParams.get("age")); // "25"
console.log(url.searchParams.get("nonexistent")); // null

添加或修改参数：**set**

场景：动态更新 URL 的参数（如筛选条件、分页参数等）。

const url = new URL("https://example.com?user=John");
url.searchParams.set("user", "Jane"); // 修改参数
url.searchParams.set("age", "30"); // 添加新参数
console.log(url.toString()); // "https://example.com/?user=Jane&age=30"

删除参数：**delete**

场景：需要清理掉某些参数时使用，例如取消某些筛选条件。

const url = new URL("https://example.com?user=John&age=25");
url.searchParams.delete("user");
console.log(url.toString()); // "https://example.com/?age=25"

4. 检查参数是否存在：`has`

场景：在处理逻辑前，先验证某个参数是否存在。

const url = new URL("https://example.com?user=John");
console.log(url.searchParams.has("user")); // true
console.log(url.searchParams.has("age")); // false

5. 遍历所有参数：`forEach`

场景：在需要展示或处理全部参数的情况（如调试或构造 API 请求）。

const url = new URL("https://example.com?user=John&age=25");
url.searchParams.forEach((value, key) => {
 console.log(`${key}: ${value}`);
});
// 输出：
// user: John
// age: 25

6. 构建查询字符串：动态更新 URL 参数

场景：分页、过滤条件变更后更新 URL。

const url = new URL("https://example.com");
const params = { user: "John", age: "25", country: "US" };

for (const [key, value] of Object.entries(params)) {
 url.searchParams.set(key, value);
}

console.log(url.toString());
// "https://example.com/?user=John&age=25&country=US"

高级使用场景

1. 动态生成 API 请求 URL

场景：在前端构建 RESTful API 请求时，方便拼接路径和参数。

const baseURL = "https://api.example.com/v1";
const endpoint = "users";
const url = new URL(`${baseURL}/${endpoint}`);
url.searchParams.set("page", "2");
url.searchParams.set("limit", "10");

console.log(url.toString());
// "https://api.example.com/v1/users?page=2&limit=10"

2. 处理 URL 跳转

场景：需要对跳转链接中的参数进行动态调整。

const url = new URL(window.location.href);
url.searchParams.set("ref", "newsletter");
window.location.href = url.toString();

3. 解析并重构 URL

场景：读取 URL 片段，做一些修改后展示或传递。

const url = new URL("https://example.com/path#section1");
console.log(url.hash); // "#section1"
url.hash = "section2";
console.log(url.toString()); // "https://example.com/path#section2"

4. 校验 URL

场景：验证用户输入或动态生成的 URL 是否合法。

try {
  const url = new URL("invalid-url"); // 抛出错误
} catch (error) {
  console.error("Invalid URL:", error.message);
}

拓展：之前获取url参数的时候会使用new URLSearchParams

他们都可以实现相同的功能的同时相比较而言new URL会更丰富

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

https

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度