URLSearchParams_js中快速构造和获取URL查询参数的方法

更新日期: 2018-07-23阅读量: 3909标签: 参数

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"]


3、其它方法

URLSearchParams.delete()从搜索参数列表里删除指定的搜索参数及其对应的值。
URLSearchParams.entries() 返回一个iterator可以遍历所有键/值对的对象。 
URLSearchParams.getAll() 获取指定搜索参数的所有值,返回是一个数组。 
URLSearchParams.has() 返回 Boolean 判断是否存在此搜索参数。 
URLSearchParams.keys() 返回iterator 此对象包含了键/值对的所有键名。 
URLSearchParams.set() 设置一个搜索参数的新值,假如原来有多个值将删除其他所有的值。 
URLSearchParams.sort() 按键名排序。 
URLSearchParams.toString() 返回搜索参数组成的字符串,可直接使用在URL上。
URLSearchParams.values() 返回iterator 此对象包含了键/值对的所有值。


兼容性:

兼容性较差

建议使用polyfill:https://github.com/WebReflection/url-search-params
来源:https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/947

目前为止全网最全的 SpringBoot 参数传递方案

开发这么多年,肯定还有不少小伙伴搞不清各种类型的参数是如何传递的,很多同学都是拿来即用,复制粘贴一把撸,遇到问题还是一脸懵逼。学习参数传递的正确姿势,先说怎么做,再说为什么

JavaScript 中的默认参数

在 ES6 中,JS引入了默认函数参数。如果未向函数调用提供实参,则允许开发人员用默认值初始化函数。以这种方式初始化函数参数将使函数更容易阅读,更不易出错,并为函数提供默认行为

用正则表达式获取URL中的查询参数

url中的所有查询参数可以通过 window.location.search 字段获取,以字符串的形式返回。并有固定的格式 ?param1=value1&param2=value2···,所以可以正则表达式匹配。分析下需要匹配的格式:

js通过arguments来获取指定参数

通过访问arguments对象的length属性可以获取有多少个参数传递给了函数。在封装函数的时候,会携带不同的参数,我们想要获取指定的参数,可以通过 arguments[ ] 来拿到,arguments对象可以与命名参数一起使用。arguments的值要永远与对应命名参数的值保持同步

JavaScript深入之参数按值传递

ECMAscript中所有函数的参数都是按值传递,也就是,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。js始终是按值传递,在这里称他为共享传递。

你需要了解的前后端传参

前后端传参一般有两种形式:key=value 形式传参(即 parameter 形式);body 形式传参(传 json 数据给后端),如果使用的是 GET 请求,浏览器展示的 Request URL 会自动在路径后面加上 ?a=1&b=2这样的参数,这就是 key=value 形式传参

JavaScript参数传递中值和引用的一种理解

值(value)和引用(reference)是各种编程语言老生常谈的话题,js也不例外。我将剖析一个例子的实际运行过程,跟大家分享我对js参数传递中的值和引用的理解。

vue路由传参页面刷新参数丢失问题解决方案

最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下:

Vue 的计算属性中传递参数

在 Vue 中,计算属性(computed )是从其他响应式属性派生的属性,是用于自动监听响应式属性的变化,从而动态计算返回值。计算属性(computed )通常是一个没有参数的函数。当然如果需要像调用方法一样给计算属性传递参数也是可以的

Vue页面传参方式Query和Params

query需要和配合 path 属性使用,携带参数会拼接在请求路径后,效果同 Get 请求方式;params需要配合 name 属性使用,参数不会携带在访问路径后

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!