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. SVG之Path

    一.Path概述 1.控制命令 SVG提供了一些基础图形元素标签如<circle>.<rect>.<ellipse>.<line>.<polyli ...

  2. 使用redis配置分布式session

    1. spring-redis-session 1.1. 配置 /** * @author laoliangliang * @date 2018/12/21 17:19 */ @Configurati ...

  3. mysql 开发进阶篇系列 45 物理备份与恢复(xtrabackup 安装,用户权限,配置)

    一. 安装说明 安装XtraBackup 2.4 版本有三种方式: (1) 存储库安装Percona XtraBackup(推荐) (2 )下载的rpm或apt包安装Percona XtraBacku ...

  4. Spring Boot Jersey使用示例

    前言 本文将学习如何使用Spring Boot和Jersey框架,去配置和创建JAX-RS 2.0 REST API接口: 这个示例应用使用的是Jersey的Servlet容器去部署REST API接 ...

  5. Salesforce Sales Cloud 零基础学习(二) Account 和 Contact

    上一篇我们讲了Sales Cloud 中关于一个公司的产品和定价手册的概念,产品需要卖给企业客户(包括渠道伙伴以及合作伙伴等等)或者是个人客户,那客户信息存在哪里?针对企业客户,通过谁去串联起和企业客 ...

  6. <数据结构> 队列[转]

    队列(queue)是一个简单而常见的数据结构.队列也是有序的元素集合.队列最大的特征是First In, First Out (FIFO,先进先出),即先进入队列的元素,先被取出.这一点与栈(stac ...

  7. ②泡茶看<数据结构>,喜欢看源码-栈ADT

    前言 听着天籁,我是个音乐迷.时间充实着,会过得很快.我马上也可以到傍晚的时候去乐室吹我心爱的萨克斯. 嘟嘟嘟... 我会吹一首简单的歌咯,哈哈我想到了一个神奇的比喻,待会说. 栈ADT模型(又称LI ...

  8. mysql中主键和唯一键的区别

    区别项 primary key(主键) unique(唯一键约束) 唯一性 可以 可以 是否可以为空 不可以 可以 允许个数 只能有1个 允许多个 是否允许多列组合 允许 允许

  9. RabbitMQ系列(二)深入了解RabbitMQ工作原理及简单使用

    深入了解RabbitMQ工作原理及简单使用 RabbitMQ系列文章 RabbitMQ在Ubuntu上的环境搭建 深入了解RabbitMQ工作原理及简单使用 RabbitMQ交换器Exchange介绍 ...

  10. 南大算法设计与分析课程复习笔记(4)L4 - QuickSort

    一.快速排序 算法导论上关于快速排序有两种写法 第一种,从头到尾遍历,不断将小于基准元素的项移到前面.代码很简介,只需要维护一个交换位置,表示小于基准元素的末尾位置加一 我们看算法导论上的一个例子: ...