4. 页面跳转 URL 传参

URL 传参就是在网址后面 ?key=value 把数据带给下一个页面。

核心三步：
① 拼参数——url?name=小明&age=18
② 拿参数——location.search 拿到 ? 后面的
③ 解析——split("&") 再 split("=") 拆开

坑：中文要 encodeURIComponent 编码、多个参数用 & 分隔、split 拆出来是字符串要转类型。

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");

// 拿到 "10" ← 记住：小票上的字永远是字符串！
params.get("age");

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

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

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

③ 遍历和转对象

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

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

// 想全留就老老实实用 .getAll

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

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

// new URL(完整网址) 更省事，直接给你 .searchParams
// 把整条网址交给它
const url = new URL(window.location.href);

// 想取哪个参数直接 get
const id = url.searchParams.get("id");

// 效果和 location.search 一样，但写起来更顺手

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

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

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

// 塞进网址前先翻译一遍：特殊字符换成 % 开头的安全暗号
// 结果：%E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B（空格也变成了 %20）
const encoded = encodeURIComponent(userInput);

// 对照：空格→%20 &→%26 （→%28 ）→%29
// 需要原文时再翻译回来
// 又变回 "张三 & 李四（合作）"
const decoded = decodeURIComponent(encoded);

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

本页重点