← 返回目录

4. 页面跳转 URL 传参

页面之间传小数据，最轻量的办法就是把参数写在网址上：A 页跳转时拼 ?name=张三，B 页用 URLSearchParams 读出来。但中文和 &=# 这类特殊字符必须 encodeURIComponent 编码，否则地址会被"搞坏"。

4.1 互动演示（本页已自带参数：?name=张三&age=18&tags=js&tags=css&utm_source=baidu）

4.2 知识点讲解

① 传参原理：参数写在 ? 后面，用 & 隔开

网址里 ? 后面的部分叫查询参数（search）。多个参数用 & 连接：?name=张三&age=18 意思是"name 是张三、age 是 18"。

// 发件页：在网址后面拼 ?名字=值，多组用 & 隔开
location.href = "page.html?id=10&name=小明";

// 收件页：先把 ? 后面这串整段拿下来
// 再 new 一个 URLSearchParams 把它拆成好读的样子
const params = new URLSearchParams(location.search);

URLSearchParams 会自动做"解码"（%20 → 空格），不用自己调 decodeURI。

② 常用读取方法：get / getAll / has（逐个讲）

// .get(名字) 只取一个值；同名有好几条时只给第一条
params.get("name"); // 拿到 "小明"
params.get("age"); // 拿到 "10" ← 记住：小票上的字永远是字符串！

// .getAll(名字) 同名行全要，返回一个数组
params.getAll("tags"); // 拿到 ["js", "css"]

// .has(名字) 翻一翻这行在不在，返回 true / false
params.has("utm_source"); // 在就是 true，不在就是 false

get 拿到的全是字符串：要比较数字先 Number(params.get('age'))，否则 "10" < 9 这种字符串比较会出错（"10" 比 "9" 小，因为是按字符比）。

③ 遍历和转对象

// 想一条不漏全念出来，用 for...of 挨个抽
for (const [key, value] of params) {
  console.log(key + ": " + value); // 每条都是 "名字: 值"
}

// 想直接当对象用，一行就转好（方便丢给接口）
const paramObj = Object.fromEntries(params);
// 注意：同名行（比如 tags）转成对象后只会留最后一条
// 想全留就老老实实用 .getAll

Object.fromEntries 是"把 [键,值] 列表变成对象"，一步到位。适合把 URL 参数直接当接口参数用。

④ 进阶：直接解析完整 URL（不用写 location.search）

// new URL(完整网址) 更省事，直接给你 .searchParams
const url = new URL(window.location.href); // 把整条网址交给它
const id = url.searchParams.get("id"); // 想取哪个参数直接 get
// 效果和 location.search 一样，但写起来更顺手

⑤ encodeURIComponent：为什么中文/特殊字符必须编码？

URL 只认"安全字符"。如果直接把 张三 & 李四（合作） 拼进网址：& 会被当成"参数分隔符"、# 会被当成"锚点"、中文会乱码——地址结构直接被破坏。编码就是把它们变成 % 开头的安全格式。

const userInput = "张三 & 李四（合作）"; // 用户随手打的字

// 塞进网址前先翻译一遍：特殊字符换成 % 开头的安全暗号
const encoded = encodeURIComponent(userInput);
// 结果：%E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B%EF%BC%88%E5%90%88%E4%BD%9C%EF%BC%89
// 对照：空格→%20  &→%26  （→%28  ）→%29

// 需要原文时再翻译回来
const decoded = decodeURIComponent(encoded);
// 又变回 "张三 & 李四（合作）"

凡是把用户输入拼进 URL，一律 encodeURIComponent 包一层——这是作业三里"URL 中文参数乱码"的根治办法。