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的更多相关文章

  1. 获取url查询参数的方法

    /** * 获取url查询参数的方法 * @param name * @returns {null} * @constructor */ function GetQueryString(name) { ...

  2. vue不通过路由直接获取url中参数的方法示例

    vue不通过路由直接获取url中参数的方法示例 vuejs取得URL中参数的值地址:http://localhost:3333/#/index?id=128console.log(this.$rout ...

  3. react获取url查询参数

    继承自React.Component的this.props.location.query对象下有当前url的各种查询参数.简单的例子:在控制台打印这个对象 import React from 'rea ...

  4. js获取url地址栏参数的方法,解决中文乱码问题,能支持中文参数

    第一种:参数只能是英文的 function getQuery(name) { var reg = new RegExp("(^|&)" + name + "=([ ...

  5. javascript/jquery获取url地址栏参数的方法

    简洁jq方法获取url地址栏的参数 function getQueryVariable(variable){ var query = window.location.search.substring( ...

  6. JS中获取URL的参数的方法

    这里,我学习的是使用正则的方法来获得URL的参数 函数的方法如下: <a href="www.baidu.com">百度</a> <script sr ...

  7. js获取url查询参数

    function getURLParamInfo(key) { if (location.search == "") { return undefined; } var a = l ...

  8. js获取url地址栏参数

    前端开发中经常会遇到需要获取url地址栏参数问题 方法如下: function getQueryStringByName(name){ var src = "www.baidu.com?na ...

  9. js获取url的参数和值的N种有效方法

    js获取url的参数和值的N种有效方法 function getParameterByName(name) { name = name.replace(/[\[]/, "\\\[" ...

随机推荐

  1. CAS单点登录原理简单介绍

    1. SSO简介 1.1 单点登录定义 单点登录(Single sign on),英文名称缩写SSO,SSO的意思就是在多系统的环境中,登录单方系统,就可以在不用再次登录的情况下访问相关受信任的系统. ...

  2. 【面试篇】寒冬求职季之你必须要懂的原生JS(中)

    互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...

  3. IT老人,给后辈的十一点建议

    我已经在IT业打拼9年了,从完全自学成为技术团队leader到PM也确实总结了不少的经验,自己也经常跟学弟学妹聊天,分享职场经验,当老家有人报考计算机或者从事相关工作时也会咨询我的意见,我很明白IT人 ...

  4. docker镜像打包save,载入load,启动run

    docker打包,针对的是镜像,而不是运行中的容器. 查看当前系统的镜像文件:docker images 将当前运行中的,已经自定义修改后的容器保存为新的镜像. docker commit ce11e ...

  5. java遍历Map

    //方法一 Set<String> keys = map.keySet(); for (String key:keys) { System.out.println(key+",& ...

  6. html2canvas关于图片不能正常截取

    问题 首先说说遇到了什么问题.首先有这么一个需求.需要前端根据后端传过来数据,动态的生成图片.图片中的文案.背景图片.用户头像全部都是通过后端的接口获取.但是使用 html2canvas 生成的can ...

  7. 读写锁ReentrantReadWriteLock:读读共享,读写互斥,写写互斥

    介绍 DK1.5之后,提供了读写锁ReentrantReadWriteLock,读写锁维护了一对锁:一个读锁,一个写锁.通过分离读锁和写锁,使得并发性相比一般的排他锁有了很大提升.在读多写少的情况下, ...

  8. js中对象和对象创建方法

    这一次我们来说一说在JavaScript中经常会用到的一个复杂基本类型,对象,先从对象的属性讲起,再讲对象的创建方法,基本涵盖了创建对象的各种方法,大家一起学习呀~ 一.对象 要掌握对象的使用及继承, ...

  9. tomcat通过一个端口号实现多域名访问

    最近在一个项目中遇到这样的一个场景,在一台服务器一个tomcat一个端口配置多个域名.没想到解决方法这么简单,通过虚拟目录来实现. 修改tomcat安装路径下/conf下的server.xml vim ...

  10. Spring Boot中如何扩展XML请求和响应的支持

    在之前的所有Spring Boot教程中,我们都只提到和用到了针对HTML和JSON格式的请求与响应处理.那么对于XML格式的请求要如何快速的在Controller中包装成对象,以及如何以XML的格式 ...