惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Recent Announcements
Recent Announcements
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
MongoDB | Blog
MongoDB | Blog
H
Help Net Security
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
人人都是产品经理
人人都是产品经理
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
The GitHub Blog
The GitHub Blog
V
V2EX
Microsoft Security Blog
Microsoft Security Blog
V
Visual Studio Blog
A
About on SuperTechFans
博客园_首页
L
LangChain Blog
量子位
雷峰网
雷峰网
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Jina AI
Jina AI
月光博客
月光博客
阮一峰的网络日志
阮一峰的网络日志
博客园 - 聂微东
Microsoft Azure Blog
Microsoft Azure Blog
M
MIT News - Artificial intelligence
N
Netflix TechBlog - Medium

开飞机的老张

AGENTS.md Openspec 使用心得 从树莓派内网穿透到 Cloudflare Pages Openclaw和博客 郊眠寺 采石 译:我为什么使用Map(和WeakMap)处理DOM节点 介绍JavaScript中Symbol 字符串首字母大写 用forEach()遍历对象 JavaScript禁用按钮 JavaScript的FormData JavaScript的Blob 用FileReader读取本地文件 JavaScript的Thenable JavaScript中Promise的reject JavaScript的立即调用函数表达式(IIFE) JavaScript的Promise链 用interact.js实现拖拽、缩放、吸附 使用bluebird操作Promise JavaScript创建Promise JavaScript中Promise的catch函数 JavaScript比较数组
原生JavaScript获取URL参数
kaifeiji.cc · 2023-07-27 · via 开飞机的老张

原文:Get Query String Values in Vanilla JavaScript

本文展示了如何用原生JavaScript解析URL参数。

window.location.search属性包含原始的URL参数,例如,打开http://localhost:5000/?answer=42时,window.location.search等于'?answer=42'

可以用URLSearchParams类对URL参数进行解析:

1
2
3
4
const querystring = '?answer=42';
const params = new URLSearchParams(querystring);

params.get('answer');

URLSearchParams的实例类似于Map数据类型,用keys()函数entries()函数可以获取其中所有的key。注意:这两个函数返回的是遍历器而非数组,需要用Array.from()转换为数组。

1
2
3
4
5
const querystring = '?answer=42&question=unknown';
const params = new URLSearchParams(querystring);

Array.from(params.keys());
Array.from(params.entries());

其他方法

URLSearchParams在浏览器中支持良好,而且Node.js中也可用。但问题在于IE并不支持URLSearchParams

URLSearchParams帮我们处理了许多边缘案例,但在大多场景下,可以用以下简单的函数解析URL参数。

1
2
3
4
5
6
7
8
function parse(qs) {
return qs.
replace(/^\?/, '').
split('&').
map(str => str.split('=').map(v => decodeURIComponent(v)));
}

parse('?answer=42&question=unknown');

本教程对您有帮助吗?来GitHub仓库点个星支持我们吧!