【日常记录】【JS】JS中查询参数处理工具URLSearchParams

最新推荐文章于 2024-08-23 16:20:23 发布
最新推荐文章于 2024-08-23 16:20:23 发布
阅读量1.6k 收藏 23
点赞数 32
分类专栏： js 文章标签： javascript 开发语言 css 前端 vue html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45634593/article/details/140689256
版权

文章目录

1. 引言

在实际开发中，这个界面跳转到另一个界面是很常见的需求，只要涉及到跳转，就是涉及到两个界面之前的参数传递，这个时候一般都会拼接一些查询参数，然后另一个界面解析这个查询参数，拿到相应的值，进行对应的处理

为了简化这一过程，js 提供了URLSearchParams URLSearchParams是一个用于解析和生成URL查询参数的实用工具

2. URLSearchParams

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

在这里插入图片描述

2.1 URLSearchParams 的构造函数

URLSearchParams() 构造函数创建并返回一个新的 URLSearchParams 对象。

new URLSearchParams()
new URLSearchParams(options)

参数

  • options：可选，可以是以前情况之一
    • 一个字符串，会按 application/x-www-form-urlencoded 的格式进行解析。开头的 ‘?’ 字符会被忽略
    • 一系列基于字面量的字符串键值对，或者任何对象
    • 一个由字符串键和字符串值组成的键值对对象。请注意，不支持嵌套

返回值

  • 一个 URLSearchParams 实例。

示例

    // 通过 url.search 检索参数，传递到构造函数
    const url = new URL("https://example.com?foo=1&bar=2");
    console.log('url', url);
    const params1 = new URLSearchParams(url.search);

    // 直接从 URL 对象获取 URLSearchParams 对象
    const params1a = url.searchParams;
    console.log(params1a);
    // 传入字符串
    const params2 = new URLSearchParams("foo=1&bar=2");
    const params2a = new URLSearchParams("?foo=1&bar=2");
    console.log('params2a', params2a);

    // 传入一系列键值对
    const params3 = new URLSearchParams([
      ["foo", "1"],
      ["bar", "2"],
    ]);
    console.log('params3', params3);

    // 传入记录
    const params4 = new URLSearchParams({ foo: "1", bar: "2" });
    console.log('params4', params4);

在这里插入图片描述

一般最常见的就是以下情况

  1. 传入 ?号，开头的查询参数；如：?foo=1&bar=2
  2. 传入 不带问号的 查询参数；如：foo=1&bar=2
  3. 传入一个对象；这个一般是为了跳转到其他界面，参数过多的时候，不方便自己拼接

2.2 append() 方法

URLSearchParams 接口的 append() 方法将指定的键/值对附加为新的查询参数。

语法

append(name, value)

参数

  • name：要添加参数的键名
  • value：要添加参数的值

返回值

  • 无

示例

    let params = new URLSearchParams('?foo=1&bar=2');

    params.append("foo", 4);
    params.append("foo", 4);
    params.append("foo", 4);
    console.log(params.toString()); // foo=1&bar=2&foo=4&foo=4&foo=4

注意：相同的键名追加多次，不会覆盖
控制台输出结果如下

在这里插入图片描述

2.3 delete() 方法

URLSearchParams 接口的 delete() 方法从所有查询参数的列表中删除指定的参数及其关联值。

语法

delete(name)
delete(name, value)

参数

  • name：要删除的键名称
  • value：要删除的键值，可选

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');

    params.append("foo", 4);
    params.append("foo", 4);
    params.append("foo", 4);
    console.log(params.toString());

    console.log('删除 bar 前', params.toString());
    params.delete("bar");
    console.log('删除 bar 后', params.toString());


    console.log('删除 foo 前', params.toString());
    params.delete("foo");
    console.log('删除 foo 后', params.toString());

在这里插入图片描述

  1. 如若指定了删除的键名称，这个键名称存在一个，那么只会删除这一个
  2. 如若指定了删除的键名称，这个键名称存在多个，那么这多个都会删除
  3. 如若指定了删除的键名称、键的值，那么只会删除 键名称、键值一样的，如若这俩一样还存在多个，那么这多个都会删除，只要这俩一样都会删除
    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');

    params.append("foo", 4);
    params.append("foo", 4);
    params.append("foo", 4);
    console.log(params.toString());

    console.log('删除 bar 前', params.toString());
    params.delete("bar");
    console.log('删除 bar 后', params.toString());


    // console.log('删除 foo 前', params.toString());
    // params.delete("foo");
    // console.log('删除 foo 后', params.toString());
    console.log('删除 foo = 1 前', params.toString());
    params.delete("foo", "1");
    console.log('删除 foo = 1 后', params.toString());

在这里插入图片描述

2.4 entries() 方法

URLSearchParams 接口的 entries() 方法返回一个用于遍历该对象中包含的所有键/值对的迭代器。迭代器按照查询字符串中出现的顺序返回键/值对，每一组键和值都是字符串对象。

语法

entries()

参数

  • 无

返回值

  • 迭代器

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');

    params.append("foo", 4);
    params.append("foo", 4);
    params.append("foo", 4);

    // 显示键/值对
    for (const item of params.entries()) {
      // console.log(`${key}, ${value}`);
      console.log(item);
    }

在这里插入图片描述

这里的 item 就是一个数组，第一项是 key，第二项是 value，这个地方和 Object.entries 是一样的

可以直接用数组解构

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');

    params.append("foo", 4);
    params.append("foo", 4);
    params.append("foo", 4);

    // 显示键/值对
    for (const [key, value] of params.entries()) {
      console.log(`${key}, ${value}`);
      // console.log(item);
    }

在这里插入图片描述

2.5 forEach() 方法

URLSearchParams 接口的 forEach() 方法允许通过回调函数来遍历实例对象上的键值对。 和 Array.forEach 类似

语法

forEach(callback)
forEach(callback, thisArg)

参数
在这里插入图片描述
返回值

  • 无

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');

    params.append("foo", 4);
    params.append("foo", 4);
    params.append("foo", 4);

    params.forEach((value, key) => {
      console.log(`${key}, ${value}`);
    });

在这里插入图片描述

2.6 get() 方法

URLSearchParams 接口的 get() 方法返回第一个与查询参数对应的值。

语法

get(name)

参数

  • name：要返回的参数的键名。

返回值

  • 如果找到了给定的查询参数，则返回一个字符串；否则返回 null。

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');

    params.append("foo", 4);
    params.append("foo", 4);
    params.append("foo", 4);

    console.log(params.get('foo'));
    console.log(params.get('age'));

在这里插入图片描述

获取 foo 的时候，返回的是 1 ，因为如若这个 键对应的值有多个，那么会返回第一个，如若这个键没有找到，则返回null

2.7 getAll() 方法

URLSearchParams 接口的 getAll() 方法以数组的形式返回与指定查询参数对应的所有值。

语法

getAll(name)

参数

  • name：要返回的参数的键名。

返回值

  • 一个字符串的数组，如果没有找到给定参数的值，则其可以是空的。

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');

    params.append("foo", 4);
    params.append("foo", 4);
    params.append("foo", 4);

    // // 显示键/值对
    // for (const [key, value] of params.entries()) {
    //   console.log(`${key}, ${value}`);
    //   // console.log(item);
    // }

    // params.forEach((value, key) => {
    //   console.log(`${key}, ${value}`);
    // });
    console.log(params.getAll('foo'));
    console.log(params.getAll('age'));

在这里插入图片描述

foo 本来是一个，然后又添加了三个，所以用 getAll 获取的时候，会返回四个
如若没有找到这个 键名称，那么返回的就是一个空数组

2.8 has() 方法

URLSearchParams 接口的 has() 方法返回一个布尔值，表示指定的键名对应的值是否存在于查询参数中。

语法

has(name)
has(name, value)

参数

  • name：要匹配的参数的名称
  • value：要匹配的参数值以及给定的名称

返回值

  • 一个布尔值

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');

    params.append("foo", 2);
    params.append("foo", 3);
    params.append("foo", 4);

    console.log(params.has('foo'));
    console.log(params.has('age'));
    console.log(params.has('foo', 4));
    console.log(params.has('foo', 5));

在这里插入图片描述

  • has('foo') 返回的是 true，因为查询参数中有这个
  • params.has('age') 返回的是 false，因为查询参数中没有这个
  • params.has('foo', 4) 返回的是 true，因为查询参数中有这个
  • params.has('foo', 5) 返回的是 false ，因为查询参数中没有这个，但是有，1，2，3，4

2.9 keys() 方法

URLSearchParams 接口的 keys() 方法返回一个用于遍历对象中包含的所有键的迭代器。这些键都是字符串对象。

语法

keys()

参数

  • 无

返回值

  • 迭代器

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');

    params.append("foo", 2);
    params.append("foo", 3);
    params.append("foo", 4);


    for (const key of params.keys()) {
      console.log(key);
    }

在这里插入图片描述

2.10 set() 方法

URLSearchParams 接口的 set() 方法用于设置和查询参数相关联的值。如果设置前已经存在多个匹配的值，此方法会删除重复的查询参数；如果查询参数不存在，则创建它。

语法

set(name, value)

参数

  • name：要设置的参数的键名
  • value：要设置的参数的值

返回值

  • 无

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');

    params.append("foo", 2);
    params.append("foo", 3);
    params.append("foo", 4);

    console.log('set 之前', params.toString());
    params.set("foo", 4);
    params.set("age", 22);
    console.log(params.toString());

在这里插入图片描述

2.11 toString() 方法

URLSearchParams 接口的 toString() 方法返回适用于 URL 中的查询字符串。

语法

toString()

参数

  • 无

返回值

  • 一个不带问号的字符串，如若未设置查询参数则返回空字符串

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');

    params.append("foo", 2);
    params.append("foo", 3);
    params.append("foo", 4);

    console.log(params.toString());

在这里插入图片描述

2.12 values() 方法

URLsearchParams 接口的 values() 方法返回一个用于遍历对象中包含的所有键的值的迭代器。这些键都是字符串对象。

语法

values()

参数

  • 无

返回值

  • 迭代器

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');

    params.append("foo", 2);
    params.append("foo", 3);
    params.append("foo", 4);

    console.log('查询参数', params.toString());
    for (const item of params.values()) {
      console.log(item);
    }

在这里插入图片描述

参考链接

嘤嘤怪呆呆狗
关注
专栏目录
JS获取url字符串（黑科技-URLSearchParams）
Dreamer_xr的博客
06-15 1560
之前截取url字符串一直是.split().split().split()，显得好傻，今天掌握了一个黑科技，很轻便，也很规整，但是不支持IE 这个黑科技就是 构造函数 URLSearchParams URLSearchParams MDN=>戳这里 那么怎么用呢，很简单。 1、首先url格式是有要求的，要问号后面的参数内容并且包含问号，如下 let url = '?toke...
浅谈在js传递参数中含加号(+)的处理方式
10-21
下面将详细解析在JavaScript中处理含有加号的参数的方法，并且讨论URL编码和Base64编码的使用场景。 首先，我们需要了解URL编码的基本规则。在URL中，除了字母、数字以及少数符号（-_.）之外，其它字符都需要被编码...
URLSearchParams：JavaScript中的URL查询参数处理工具
墨辰JC的博客
08-14 9335
（页面跳转之间，可以使用这种方法进行参数传递）通过以上两个示例，我们可以看到URLSearchParams的强大之处，它简化了URL参数的获取、解析、构建和更新过程。通过URLSearchParams，我们可以轻松地解析、访问、操作和生成URL查询参数，而无需手动进行繁琐的字符串操作和编码解码。通过充分理解URLSearchParams的功能和使用方法，并注意其中的注意事项，我们可以更好地应用它，使我们的代码更加优雅和可维护。访问查询参数：通过
URLSearchParams常用方法
最新发布
servepeople的博客
08-23 293
接口定义了一些用于处理 URL 的查询字符串的方法。这个接口提供了一个简单的方式来读取和写入 URL 的查询字符串。是一个非常有用的接口，特别是在处理 URL 的查询字符串时，它提供了比传统字符串操作更直观、更强大的方法。
JS-URLSearchParams
weixin_46479909的博客
03-20 365
对象专门用于处理url网址信息中的查询字符串，在网址字符串中通常都是?问号之后的内容(不包含问号)。
JavaScript URLSearchParams
司马懿的西山居
12-07 2558
URLSearchParams API用于处理URL之中的查询字符串，即问号之后的部分。没有部署这个API的浏览器，可以用url-search-params这个垫片库。
JavaScript的URLSearchParams接口
热爱生活，享受编程
09-15 1852
URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。 一个实现了 URLSearchParams 的对象可以直接用在 for…of 结构中，不需要使用 entries() ：for (var p of mySearchParams) 就等于 for (var p of mySearchParams.entries())。 链接到章节构造函数 URLSear...
argspecjs:在 Javascript 中处理可选参数的正确方法
06-11
argspec.js是一个简单的 Javascript 可选参数处理库。 问题 Javascript 没有处理可选参数的好方法，除非它们是参数列表末尾的可选参数： function myFun(a, b, optC) { if(optC === undefined) optC = 0; ... }...
dom.js - 一个专门处理 DOM 相关操作的 JavaScript 工具方法库
10-14
dom.js - 一个专门处理 DOM 相关操作的 JavaScript 工具方法库。原生 JavaScript 纯手动打造，无任何依赖；支持 UMD 和 ES6 模块规范，适应各种运行环境；支持调用 DOM 整体模块和独立调用方法；提供 100+ 实用的 ...
javascript查询字符串参数的方法
10-24
在JavaScript中，处理查询字符串参数是一种常见的需求，本篇将详细介绍如何在JavaScript中获取URL查询字符串中的参数。 首先，我们需要了解几个关于URL的JavaScript内置对象和方法。location对象是window对象的一个...
使用JavaScript获取Request中参数的值方法
10-21
在Web开发中，经常需要处理通过URL传递给网页的参数。JavaScript作为客户端脚本语言，为我们提供了这样的能力，即通过代码读取和操作URL的查询参数。这篇文章将详细讲解如何使用JavaScript和jQuery来获取URL请求...
js 获取 url 参数 URLSearchParams
艾小逗
12-14 3118
js 获取 url 参数 方法一 URLSearchParams 方法 // 创建一个URLSearchParams实例 const urlSearchParams = new URLSearchParams(window.location.search); // 把键值对列表转换为一个对象 const params = Object.fromEntries(urlSearchParams.entries()); console.log(params) 方法二 split 方法 function getP
js查询参数
bajue7860的博客
03-02 119
/*参数查询*/ function GetQueryString(name){ var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) ...
【JS】URLSearchParams 对象（以对象的形式上传参数到url）
qq_45677671的博客
04-20 3679
文章目录基本用法实践运用 基本用法 此功能某些浏览器尚在开发中，兼容性可能不是很好。 URLSearchParams() 构造器：创建并返回一个新的URLSearchParams 对象。 开头的’?’ 字符会被忽略。 语法： // init: 参数可选，为一个 USVString var URLSearchParams = new URLSearchParams(init); 示例： // 传入一个字符串字面值 var url = new URL('https://example.com?fo
详解JS的URL()和URLSearchParams() API接口
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
05-14 1272
URL() 构造函数返回一个新创建的 URL 对象，表示由一组参数定义的 URL。URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。
（最全）详解 URLSearchParams
前端笔记——放弃很容易,但坚持一定很酷
11-02 6641
是一个 JavaScript 内置类，用于处理（query string）的解析和构建。是 URL 中位于问号（?）后面的部分，用于传递参数和数值。例如，在以下 URL 中（https://example.com/page?name=John&age=30），查询字符串是通常可以使用 window.location.search 来获取URL中的查询字符串。我测试的初始URL是：http://127.0.0.1:5501/103001_URLSearchParams.html?name=jerry。
js中使用URLSearchParams获取url参数
油墨香^-^的博客
05-27 419
URLSearchParams对于旧版浏览器不太兼容，使用时要注意，且URLSearchParams已经自动对参数和参数值编码进行了处理，不用额外进行处理了~js中的URLSearchParams是在ECMAScript 2015(ES6)中引入的，可以简化对URL中参数的操作。下面简单一一介绍一下这些方法。
详解URLSearchParams
热门推荐
Honey的博客
12-01 1万+
【代码】详解URLSearchParams。
URLSearchParams
mu0nian的博客
03-25 6148
URLSearchParams的介绍 URLSearchParams API 提供对 URL 查询的读写访问。 URLSearchParams 类也可以与以下四个构造函数之一单独使用。 URLSearchParams 类也在全局对象上可用。 WHATWG URLSearchParams 接口和 querystring 模块具有相似的用途，但 querystring 模块的用途更通用，因为它允许自定义的分隔符（& 和 =）。 换句话说，此 API 纯粹是为网址查询字符串而设计。 const myU
Bee.js: JavaScript工具库实操指南，涵盖手机号与身份证验证
JavaScript封装的常用工具类库bee.js是一个功能丰富的JavaScript类库，它旨在简化开发者在处理手机号码和身份证验证、数据格式化以及个人信息获取等方面的工作。本文将详细介绍如何在项目中集成并使用这个强大的库。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值