你正在寻找JS编写url处理的总结？这份指南给你！

2023-12-14 05:20:51

前言

URL是互联网上一个非常重要的组成部分，它可以定位一个唯一的网络资源或位置。对于url的处理，浏览器原生提供了很多方法，我们可以直接使用。但有时，我们需要对url进行一些更复杂的处理，这时就需要我们自己来编写代码了。

JavaScript处理URL

JavaScript中有很多方法可以处理URL。最常用的方法是使用window.location对象。window.location对象包含了当前页面的URL信息，我们可以通过它来获取当前页面的URL、协议、主机名、端口号、路径和查询字符串。

console.log(window.location.href); // 输出当前页面的URL
console.log(window.location.protocol); // 输出当前页面的协议
console.log(window.location.hostname); // 输出当前页面的主机名
console.log(window.location.port); // 输出当前页面的端口号
console.log(window.location.pathname); // 输出当前页面的路径
console.log(window.location.search); // 输出当前页面的查询字符串

获取URL参数

URL参数是URL中问号(?)之后的部分，它包含了传递给服务器的数据。我们可以通过window.location.search属性来获取URL参数。window.location.search属性是一个字符串，它包含了所有URL参数，每个参数之间用&符号分隔。

// 获取URL参数
let searchParams = new URLSearchParams(window.location.search);

// 获取名为"name"的参数值
let name = searchParams.get("name");

// 获取名为"age"的参数值
let age = searchParams.get("age");

// 输出参数值
console.log(name); // 输出"John"
console.log(age); // 输出"30"

解析查询字符串

查询字符串是URL中问号(?)之后的部分，它包含了传递给服务器的数据。我们可以通过URLSearchParams对象来解析查询字符串。URLSearchParams对象是一个键值对集合，它包含了所有查询字符串参数。

// 获取查询字符串
let searchParams = new URLSearchParams(window.location.search);

// 遍历查询字符串参数
for (let pair of searchParams) {
  console.log(pair[0], pair[1]);
}