前端url参数拼接和提取

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


//路由中定义了path='/passage/passageDetails/:index'
  //那么这里useParams就要是index，index实际上是passageId
  const { index } = useParams<{ index: string }>();

  // 获取查询参数（URL中的search部分）
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);

  // 提取各个查询参数
  const accessTime = searchParams.get('accessTime');
  const authorName = searchParams.get('authorName');
  const title = searchParams.get('title');
  const summary = searchParams.get('summary');
  const description = searchParams.get('description');
  const viewNum = searchParams.get('viewNum');
  const commentNum = searchParams.get('commentNum');
  const thumbNum = searchParams.get('thumbNum');
  const collectNum = searchParams.get('collectNum');
  const isCollect = searchParams.get('isCollect');
  const isThumb = searchParams.get('isThumb');

location：

1

?%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20accessTime=2024-10-24&%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title=%E5%85%B3%E4%BA%8E%E5%AD%A6%E4%B9%A0%E7%9A%84%E6%80%9D%E8%80%83v2&description=[object%20Object]&%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20viewNum=148&commentNum=5&%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20collectNum=23&isCollect=false&%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20summary=%E5%AD%A6%E4%B9%A0%E7%9A%84%E6%80%9D%E8%80%83&isThumb=false&thumbNum=11

searchParams：

1

++++++++++++++++accessTime=2024-10-24&++++++++++++++++title=%E5%85%B3%E4%BA%8E%E5%AD%A6%E4%B9%A0%E7%9A%84%E6%80%9D%E8%80%83v2&description=%5Bobject+Object%5D&++++++++++++++++viewNum=148&commentNum=5&++++++++++++++++collectNum=23&isCollect=false&++++++++++++++++summary=%E5%AD%A6%E4%B9%A0%E7%9A%84%E6%80%9D%E8%80%83&isThumb=false&thumbNum=11

URL 的 location.search 输出内容和通过 URLSearchParams 提取出来的 searchParams 输出结果之间的差异，主要原因是 URL 编码和空白字符的处理问题。我们可以逐步分析并解释这些情况：

URL 编码（Percent-Encoding）
URL 编码用于确保 URL 中的特殊字符（如空格、中文字符、等号 = 等）能够正确传输。在你的 location.search 和 searchParams 中，有很多 %20（代表空格）和其他 URL 编码的字符（如 %E5%85%B3 表示 关）。

location.search：输出的是原始的 URL 查询字符串，包含了编码后的字符（比如 %20 表示空格，%E5%85%B3 表示 关）。

URLSearchParams：当你使用 URLSearchParams 对象解析查询字符串时，它会自动解码这些 URL 编码的字符，使得它们变成了可读的字符串。

多余的空格（%20）
在 location.search 中，有很多连续的 %20（空格的编码形式）。这些多余的空格可能来源于 URL 中的多余空格或错误的拼接，通常不应该在 URL 参数中出现。

1

?%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20accessTime=2024-10-24&...

为什么 searchParams 提取出来的参数不一样
URLSearchParams 在解析 URL 查询字符串时，自动跳过了多余的空格（%20）并且处理了 URL 解码。你看到的 searchParams 输出中多了 ++++++++++++++++ 这样的符号，可能是因为你在打印 searchParams 时，它将每个查询参数的值作为一个整体处理并加上了分隔符。

有些参数为 null
如果你发现通过 URLSearchParams 提取出来的某些参数值为 null，可能的原因有以下几种：

参数没有正确传递：检查 URL 是否包含所有你期望的参数。有时因为 URL 拼接错误或缺少必要参数，某些参数会缺失，导致提取时返回 null。

多余的空格干扰：如果 URL 中有不必要的 %20，这些可能会影响参数的正确解析。确保 URL 格式正确并去除多余的空格。

解决办法

去除 URL 中多余的空格

确保 URL 中没有不必要的空格字符（%20）。你可以手动去除或在后台处理 URL。

通过 URLSearchParams 获取参数

使用 URLSearchParams 时，它会自动解码查询字符串并正确解析参数。确保你按照正确的方式提取每个参数的值：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


const urlParams = new URLSearchParams(location.search);

// 获取参数
const accessTime = urlParams.get('accessTime');
const title = urlParams.get('title');
const thumbNum = urlParams.get('thumbNum');
const description = urlParams.get('description');

// 打印参数
console.log(accessTime); // 2024-10-24
console.log(title); // 关于学习的”考v2
console.log(thumbNum); // 11
console.log(description); // [object Object]

检查编码问题

如果某些参数值为 [object Object]，可能是因为你在构造 URL 时，将对象作为参数值传递了。URL 参数应是字符串类型，[object Object] 是 JavaScript 在将对象转换为字符串时的默认值。

确保 description 和其他复杂对象在传递之前先进行序列化。例如，使用 JSON.stringify()：

1

const description = JSON.stringify(someObject);