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. C++ Opencv split()通道分离函数 merge()通道合并函数 使用操作详解

    一. split()通道分离函数 split()函数的C++版本有两个原型,他们分别是: C++: void split(const Mat& src, Mat*mvbegin);//& ...

  2. 第69节:Java中数据库的多表操作

    第69节:Java中数据库的多表操作 前言 学习数据库的多表操作,去电商行业做项目吧!!! 达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文 ...

  3. [Swift]枚举类型:UIBarButtonItem的24种样式

    UIBarButtonSystemItemFlexibleSpace 可变空白, 在调用的过程中,使用  UIBarButtonSystemItemFlexibleSpace去占位,达到实现规范化的目 ...

  4. linux上安装jdk环境

    只在于安装jdk1.6.jdk1.7和jdk1.8,其他版本请绕行,目的在于方便自己和大家以后急于做jdk环境,苦于没有jdk安装包和设置变量的过程,我将安装包均放在云盘中, 需要直接在连接中找即可: ...

  5. odoo开发笔记 -- 应用服务器&数据库服务器分开部署

    app+db在一台服务器: odoo.conf配置文件: db_host = False db_maxconn = 64 db_name = False db_password = 123456db_ ...

  6. 远程计算机或设备将不接受连接(电脑能连接网络、QQ能登陆、浏览器无法使用)

    第一种方法 1.win+r 2.输入regedit,打开注册表 3.查找Internet Settings(在HKEY_CURRENT_USER\Software\Microsoft\Windows\ ...

  7. mysql 获取昨天日期、今天日期、明天日期以及前一个小时和后一个小时的时间

    1.当前日期 select DATE_SUB(curdate(),INTERVAL 0 DAY) ; 2.明天日期select DATE_SUB(curdate(),INTERVAL -1 DAY) ...

  8. jvm详情——5、选择合适的垃圾收集算法

    回收器选择JVM给了三种选择:串行收集器.并行收集器.并发收集器,但是串行收集器只适用于小数据量的情况,所以这里的选择主要针对并行收集器和并发收集器. 默认情况下,JDK5.0以前都是使用串行收集器, ...

  9. Spring Boot 简介

    作者其他Spring系列文章 Spring Framework简介 Spring框架快速入门  Spring Boot愿景 Spring Boot愿景就是让我们创建可运行的.独立的.基于Spring的 ...

  10. k8s网络之calico

    一.概述 前面我们部署calico由于集群规模不是很大,使用的是calico的bgp模式的node-to-node-mesh全节点互联,这种模式在小规模集群里面还可以用,3.4.0版本的calico支 ...