当前位置：首页 > news >正文

前端url参数拼接和提取

news 2025/9/5 14:20:33

//路由中定义了path='/passage/passageDetails/:index'//那么这里useParams就要是index，index实际上是passageIdconst { 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：

?%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：

++++++++++++++++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 编码和空白字符的处理问题。我们可以逐步分析并解释这些情况：
1. URL 编码（Percent-Encoding）
URL 编码用于确保 URL 中的特殊字符（如空格、中文字符、等号 `=` 等）能够正确传输。在你的 `location.search` 和 `searchParams` 中，有很多 `%20`（代表空格）和其他 URL 编码的字符（如 `%E5%85%B3` 表示 `关`）。
- **`location.search`**：输出的是原始的 URL 查询字符串，包含了编码后的字符（比如 `%20` 表示空格，`%E5%85%B3` 表示 `关`）。
- **`URLSearchParams`**：当你使用 `URLSearchParams` 对象解析查询字符串时，它会自动解码这些 URL 编码的字符，使得它们变成了可读的字符串。
2. 多余的空格（`%20`）
在 `location.search` 中，有很多连续的 `%20`（空格的编码形式）。这些多余的空格可能来源于 URL 中的多余空格或错误的拼接，通常不应该在 URL 参数中出现。
```plaintext
?%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20accessTime=2024-10-24&...
```
3. 为什么 `searchParams` 提取出来的参数不一样
`URLSearchParams` 在解析 URL 查询字符串时，自动跳过了多余的空格（`%20`）并且处理了 URL 解码。你看到的 `searchParams` 输出中多了 `++++++++++++++++` 这样的符号，可能是因为你在打印 `searchParams` 时，它将每个查询参数的值作为一个整体处理并加上了分隔符。
4. 有些参数为 `null`
如果你发现通过 `URLSearchParams` 提取出来的某些参数值为 `null`，可能的原因有以下几种：
- **参数没有正确传递**：检查 URL 是否包含所有你期望的参数。有时因为 URL 拼接错误或缺少必要参数，某些参数会缺失，导致提取时返回 `null`。
- **多余的空格干扰**：如果 URL 中有不必要的 `%20`，这些可能会影响参数的正确解析。确保 URL 格式正确并去除多余的空格。
5. 解决办法
#### 1. **去除 URL 中多余的空格**
确保 URL 中没有不必要的空格字符（`%20`）。你可以手动去除或在后台处理 URL。
#### 2. **通过 `URLSearchParams` 获取参数**
使用 `URLSearchParams` 时，它会自动解码查询字符串并正确解析参数。确保你按照正确的方式提取每个参数的值：
```javascript
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]
```
#### 3. **检查编码问题**
如果某些参数值为 `[object Object]`，可能是因为你在构造 URL 时，将对象作为参数值传递了。URL 参数应是字符串类型，`[object Object]` 是 JavaScript 在将对象转换为字符串时的默认值。
确保 `description` 和其他复杂对象在传递之前先进行序列化。例如，使用 `JSON.stringify()`：
```javascript
const description = JSON.stringify(someObject);
```