一种快速构造和获取URL查询参数的方法:URLSearchParams
URLSearchParams接口定义了一些实用的方法来处理 URL 的查询字符串。
URLSearchParams()是个构造函数,将返回一个可以操作查询字符串的对象。
常用方法:
1、构造查询字符串
const query = new URLSearchParams();
query.append("a", 1);
query.append("b", 2);
const queryString = query.toString(); // "a=1&b=2"
const url = `https://www.abc.com?${query}`; // 将自动调用query的toString()方法
2、获取查询字符串参数
// current url: https://www.abc.com?a=1&b=2
const query = new URLSearchParams(location.search);
query.get("a"); // "1"
query.get("b"); // "2"
query.getAll("a"); // ["1"]
兼容性:
兼容性较差
建议使用polyfill:https://github.com/WebReflection/url-search-params
来源:https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams
一种快速构造和获取URL查询参数的方法:URLSearchParams的更多相关文章
- 获取url查询参数的方法
/** * 获取url查询参数的方法 * @param name * @returns {null} * @constructor */ function GetQueryString(name) { ...
- vue不通过路由直接获取url中参数的方法示例
vue不通过路由直接获取url中参数的方法示例 vuejs取得URL中参数的值地址:http://localhost:3333/#/index?id=128console.log(this.$rout ...
- react获取url查询参数
继承自React.Component的this.props.location.query对象下有当前url的各种查询参数.简单的例子:在控制台打印这个对象 import React from 'rea ...
- js获取url地址栏参数的方法,解决中文乱码问题,能支持中文参数
第一种:参数只能是英文的 function getQuery(name) { var reg = new RegExp("(^|&)" + name + "=([ ...
- javascript/jquery获取url地址栏参数的方法
简洁jq方法获取url地址栏的参数 function getQueryVariable(variable){ var query = window.location.search.substring( ...
- JS中获取URL的参数的方法
这里,我学习的是使用正则的方法来获得URL的参数 函数的方法如下: <a href="www.baidu.com">百度</a> <script sr ...
- js获取url查询参数
function getURLParamInfo(key) { if (location.search == "") { return undefined; } var a = l ...
- js获取url地址栏参数
前端开发中经常会遇到需要获取url地址栏参数问题 方法如下: function getQueryStringByName(name){ var src = "www.baidu.com?na ...
- js获取url的参数和值的N种有效方法
js获取url的参数和值的N种有效方法 function getParameterByName(name) { name = name.replace(/[\[]/, "\\\[" ...
随机推荐
- Redis 设计与实现 (一)--数据结构
底层数据结构:动态字符串.字典.整数集合.双端链表.压缩列表 字符串对象: int 浮点数值 raw 字符串值>32字节 embstr 字符串值<32字节 字符串编码转换: i ...
- editormd实现文章详情页面预览
继之前博客写了editmd.js(国内开源的一款前端Markdown框架)实现的写文章功能之后,本博客介绍使用editormd实现文章预览功能,之前博客链接:https://blog.csdn.net ...
- sleep( ) 和 wait( ) 的这 5 个区别,你知道几个?
sleep(休眠) 和 wait(等待) 方法是 Java 多线程中常用的两个方法,它们有什么区别及一些该注意的地方有哪些呢?下面给大家一一分解. 区别1:使用限制 使用 sleep 方法可以让让当前 ...
- .NET Core SDK在Windows系统安装后出现Failed to load the hostfxr.dll等问题的解决方法
这次无论如何也要记录下,原因是今天在一台Windows2008R2的电脑上安装.NET Core SDK后再命令行执行dotnet --info 居然爆出了"Failed to load t ...
- wamp解决ajax跨域问题
若使用ajax测试本地数据时,遇到的跨域问题,如 因为ajax只能用于请求服务器的数据,而在本地测试,打开的文件是以 file:// 的形式, 所以报错 可以通过 nginx 建立反向代理,处理静态文 ...
- 静态和实例方法区别-java
静态方法和实例方法的区别主要体现在两个方面: 在外部调用静态方法时,可以使用"类名.方法名"的方式,也可以使用"对象名.方法名"的方式.而实例方法只有后面这 ...
- 为什么阿里巴巴禁止开发人员使用isSuccess作为变量名
答曰,是为了防止用加了is前缀命名的变量造成序列化与反序列不一致的问题
- CentOS7 nexus 3 搭建maven或gradle 私有代理服务器
1.下载nexus 3, 选择与操作系统对应版本 2.解压nexus并运行: 3.在浏览器中输入http://192.168.127.128:8081/,并以amdin为用户名,以admin123为密 ...
- thinkphp自动创建数据对象分析
thinkphp有一个自动创建数据对象的create方法,核心代码如下 public function create($data='',$type='') { // 如果没有传值默认取POST数据 i ...
- python闯关之路(五)前端开发
一,HTML部分 1,XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同: XHTML 元素必须被正确地嵌套. XHTML 元素必 ...