html中如何在地址栏传一个参数

地址栏传参本质是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() 报错。