地址栏传参本质是HTTP协议约定的URL查询字符串，需用JavaScript（URLSearchParams）或服务端（如Express的req.query）解析，中文等特殊字符必须用encodeURIComponent()编码，参数值均为字符串类型。
地址栏传参的本质是 URL 查询字符串
浏览器地址栏里 ?key=value 这部分就是查询参数（query string），不是 HTML 的功能，而是 HTTP 协议约定的传参方式。HTML 本身不“处理”它，但你可以用 JavaScript 读取，或者后端语言（如 PHP、Node.js）解析。
常见错误现象：http://example.com/?name=张三 页面打开后什么都没变——因为没写 JS 去读它，也没后端去接收它。
- 只改地址栏 URL 不会自动触发页面逻辑，必须配合 JS 或服务端代码
- 中文、空格、特殊符号必须用
encodeURIComponent()编码，否则可能被截断或解析失败 - 参数名和值都区分大小写，
?ID=123和?id=123是两个不同参数
用 JavaScript 读取地址栏参数（URLSearchParams）
URLSearchParams 是现代浏览器的标准 API，比手动切字符串靠谱得多，兼容性到 Chrome 49+/Firefox 44+。
使用场景：单页应用跳转后取参数、表单回填、A/B 测试分流。
立即学习“前端免费学习笔记（深入）”；
示例：在控制台运行这段代码就能拿到 ?user=john&tag=web 中的值：
const params = new URLSearchParams(window.location.search);
console.log(params.get('user')); // 'john'
console.log(params.has('tag')); // true
-
window.location.search返回的是?key=val&other=1这整段字符串，开头带? -
params.get('missing')返回null，不是undefined，注意判空方式 - 如果参数重复，如
?id=1&id=2，get()只返回第一个，getAll()才能拿到数组
手动拼接带参 URL 时的编码陷阱
直接拼 '?name=' + name 是高危操作，遇到中文、&、= 就崩。比如 name = "张三&李四" 会变成 ?name=张三&李四，后半截被当成另一个参数。
正确做法永远用 encodeURIComponent() 包一层：
const name = '张三&李四';
const url = `/?name=${encodeURIComponent(name)}`; // → /?name=%E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B
-
encodeURI()不编码/ ? : @ & = + $ #，不能用于单个参数值；必须用encodeURIComponent() - 服务端收到后通常会自动解码，但 Node.js 的
url.parse()默认不解码，得手动调decodeURIComponent() - Vue/React 路由（如
vue-router）内部已封装好编码，但手写location.href时仍要自己处理
服务端怎么拿到这个参数（以 Node.js Express 为例）
前端拼好 URL，后端得知道从哪取。Express 把查询参数自动挂到 req.query 上，不用额外解析。
示例请求：GET /search?q=js&limit=10
app.get('/search', (req, res) => {
console.log(req.query.q); // 'js'
console.log(req.query.limit); // '10'（注意是字符串）
});
-
req.query是对象，所有键值都是字符串，数字要手动parseInt() - 如果 URL 是
/search?q=js&sort=desc&sort=asc，req.query.sort是数组['desc', 'asc'] - Nginx 或 CDN 可能默认 strip 掉空参数（如
?a=&b=1中的a），导致req.query.a === undefined
== 比较容易出错；还有就是没检查 req.query 是否为空对象或 null，一上来就 .split() 报错。 
