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. less编译工具——koala使用介绍

    1:使用koala编译软件    官网:http://koala-app.com/index-zh.html (目前官网点击下载没有反应,有人说可能是网络问题,但真正的原因是需要FQ才能下载了) 百度 ...

  2. pycharm删除project

    1 在pycharm里面选择关闭project 2 返回到这个页面,然后点×让project不在project列表显示(最好记住project的位置) 3 到源文件夹删除这个project文件夹 大功 ...

  3. Robot Framework - 2 - 创建测试库

    04- 创建测试库--基础概念 Robot Framework 实际的测试能力是由测试库提供的. ***** 支持的编程语言 Robot Framework 自身是用 Python 编写的,能使用 P ...

  4. Ubuntu 18.04基本配置

    允许WinSCP使用root连接 默认是不允许的,具体方法出自这里(传送门),修改ssh配置,在/etc/ssh下,修改sshd_config文件 PermitRootLogin yes 即可.默认不 ...

  5. eos开发(一) eos开发环境搭建

    区块链最近挺火的,我又是个非常缺钱的人,所以紧跟了潮流一头扎进区块链的研究中. 这EOS项目是目前比较火的一个项目,相信很多朋友拿到这份EOS的源代码后都会一脸懵逼,因为……这代码写得太高级了,老纸看 ...

  6. Java核心技术及面试指南 2.3.6 String相关的面试题答案

    2.3.6.1 String是最基本的数据类型吗?能不能被继承? String不能被继承,它是一个对象 2.3.6.2 String s = new String("xyz");创 ...

  7. springBoot(11)---整合Active消息队列

    Springboot整合Active消息队列 简单理解: Active是Apache公司旗下的一个消息总线,ActiveMQ是一个开源兼容Java Message Service(JMS) 面向消息的 ...

  8. .Net RabbitMQ之消息通信 构建RPC服务器

    1.消息投递服务 RabbitMQ是一种消息投递服务,怎么理解这句话呢?即RabbitMQ即不是消息的生产者,也是消息的消费者.他就像现实生活中快递模式,消费者在电商网站上下单买了一件商品,此时对应的 ...

  9. 微软Cloud+AI本地化社区贡献指南

    本文主要介绍微软Cloud+AI本地化社区,以及通过多种途径贡献本地化的操作指南. 什么是本地化社区 Cloud+AI本地化社区是微软技术社区的组成部分之一,负责对微软官方技术文档本地化的支持工作.微 ...

  10. MySQL批量插入数据的几种方法

    最近公司要求测试数据库的性能,就上网查了一些批量插入数据的代码,发现有好几种不同的用法,插入同样数据的耗时也有区别 别的先不说,先上一段代码与君共享 方法一: package com.bigdata; ...