JS如何处理url：URL对象的用法详解

在现代 Web 开发中，URL（统一资源定位符）是与网页资源交互的核心部分。JavaScript 提供了 URL 对象，它能够方便地解析、修改和构造 URL。本文将深入介绍 URL 对象的用法，帮助开发者更高效地操作 URL。

1. 创建 URL 对象

可以使用 URL 构造函数来创建一个新的 URL 对象，它接受一个 URL 字符串作为参数。

1
const url = new URL("https://www.example.com:8080/path/name?query=test#hash");
2
console.log(url);

这个 url 对象包含了完整的 URL 信息，包括协议、主机名、路径、查询字符串和哈希部分。

2. 常用属性

URL 对象提供了很多有用的属性，可以轻松获取 URL 的各个部分：

  • href: 返回完整的 URL 字符串。
  • protocol: 返回 URL 的协议部分，例如 https:。
  • hostname: 返回 URL 的主机名部分，不包含端口号。
  • port: 返回 URL 的端口号（如果有）。
  • pathname: 返回 URL 的路径部分。
  • search: 返回 URL 的查询字符串部分（包括 ?）。
  • hash: 返回 URL 的哈希部分（包括 #）。

示例：

1
const url = new URL("https://www.example.com:8080/path/name?query=test#hash");
2


3
console.log(url.href); // https://www.example.com:8080/path/name?query=test#hash
4
console.log(url.protocol); // https:
5
console.log(url.hostname); // www.example.com
6
console.log(url.port); // 8080
7
console.log(url.pathname); // /path/name
8
console.log(url.search); // ?query=test
9
console.log(url.hash); // #hash

3. 修改 URL

URL 对象的属性是可修改的，你可以直接更改 URL 中的各个部分。

1
const url = new URL("https://www.example.com/path/name");
2
url.pathname = "/new/path";
3
url.search = "?search=query";
4
url.hash = "#newhash";
5


6
console.log(url.href); // https://www.example.com/new/path?search=query#newhash

通过修改 pathname、search 和 hash 等属性，可以轻松地更新 URL。

4. 操作查询参数 (searchParams)

URL 对象中的 searchParams 属性提供了一个 URLSearchParams 对象，允许你方便地操作查询字符串。

添加查询参数

1
url.searchParams.append("newParam", "value");
2
console.log(url.href); // https://www.example.com/new/path?search=query&newParam=value

获取查询参数

1
console.log(url.searchParams.get("search")); // query

修改查询参数

1
url.searchParams.set("search", "newQuery");
2
console.log(url.href); // https://www.example.com/new/path?search=newQuery&newParam=value

删除查询参数

1
url.searchParams.delete("newParam");
2
console.log(url.href); // https://www.example.com/new/path?search=newQuery

URLSearchParams 提供了添加、获取、修改和删除查询参数的简便方法。

5. 处理相对 URL

通过为 URL 构造函数提供一个基准 URL，JavaScript 可以自动解析相对路径。

1
const relativeUrl = new URL("/relative/path", "https://www.example.com");
2
console.log(relativeUrl.href); // https://www.example.com/relative/path

6. URL 编码与解码

在处理 URL 中的查询参数时，有时需要对特殊字符进行编码或解码。JavaScript 提供了以下方法：

  • encodeURIComponent()：对 URL 组件进行编码。
  • decodeURIComponent()：对已编码的 URL 组件进行解码。

示例：

1
const param = "name=John Doe";
2
const encoded = encodeURIComponent(param);
3
console.log(encoded); // name%3DJohn%20Doe
4


5
const decoded = decodeURIComponent(encoded);
6
console.log(decoded); // name=John Doe

这些方法确保在 URL 中传递的字符串不包含非法字符。

结论

URL 对象为开发者提供了一个强大的工具，用于解析、修改和生成 URL。在处理动态生成的 URL 或处理来自用户输入的 URL 时，URL 对象和其相关的 URLSearchParams 对象显得尤为实用。

无论是在解析查询参数、修改路径，还是构造新的 URL，URL 对象都能帮助开发者高效且可靠地完成任务。

美团外卖红包 饿了么红包 支付宝红包

相似的文章

CommonJS 与 ES Module 的区别

CommonJS 与 ES Module 的区别

前端如何判断元素是否进入可视区及其应用

前端如何判断元素是否进入可视区及其应用