轻松获取 URL 查询参数?分享 1 段优质 JS 代码片段!

大家好,我是大澈!

本文约 600+ 字,整篇阅读约需 1 分钟。

每日分享一段优质代码片段。

今天分享一段优质 JS 代码片段,从而比以往更简单的从 URL 中获取查询参数。

老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!

js 复制代码
const getQueryByName = (name) => {
  const query = new URLSearchParams(location.search)
  return decodeURIComponent(query.get(name))
}
// url: https://sunday.com/?name=fatfish&age=100
const name = getQueryByName('name') // fatfish
const age = getQueryByName('age') // 100
const gender = getQueryByName('gender') // null

分享原因

这段代码通过 URLSearchParams 对象简化了从 URL 中获取查询参数的过程。

通过这种方法,可以更方便地在 JavaScript 中解析和获取 URL 查询参数,特别适用于处理需要从 URL 中提取参数的场景,比如读取用户在网页中的输入或搜索关键字等。

这是项目中一个很常见的操作,之前我们经常会使用 正则表达式 或者 拆分字符串 来完成,现在有了更简单的方式!

代码解析

1. const query = new URLSearchParams(location.search);

创建 URLSearchParams 对象。

URLSearchParams 是 Web API 的一部分,用于操作 URL 的查询字符串。

location.search 返回当前 URL 的查询字符串(例如 ?name=value&key=value)。

URLSearchParams 对象将其解析为一个可以操作的查询参数对象。

2. decodeURIComponent(query.get(name));

query.get(name) 方法从查询参数对象中获取名称为 name 的参数值。

decodeURIComponent 用于对参数值进行解码,以确保返回的值是一个人类可读的字符串,避免 URL 编码带来的问题(例如 %20 代表空格)。

  • end -
相关推荐
渣哥5 分钟前
当容器里有多个 Bean,@Qualifier 如何精准定位?
javascript·后端·面试
云枫晖22 分钟前
深入浅出npm:现代JavaScript项目基石
前端·javascript·node.js
不一样的少年_24 分钟前
你家孩子又偷玩网页游戏? 试试这个防沉迷工具
前端·javascript·浏览器
昔人'29 分钟前
css`scrollbar-gutter`防止滚动条可见性变化时发生布局偏移
前端·css
掘金安东尼31 分钟前
前端周刊第436期(2025年10月13日–10月19日)
前端·javascript·github
昔人'1 小时前
html`<mark>`
前端·javascript·html
前端拿破轮2 小时前
从0到1搭一个monorepo项目(二)
前端·javascript·面试
SuperherRo2 小时前
JS逆向-安全辅助项目&Yakit热加载&魔术方法&模版插件语法&JSRpc进阶调用&接口联动
javascript·安全·yakit·jsrpc·热加载
用户47949283569152 小时前
用|运算符写管道?Symbol.toPrimitive让JavaScript提前用上|>语法
前端·javascript
知识分享小能手2 小时前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app