JavaScript 中URLSearchParams用法

详细解释
URLSearchParams 构造函数:

  • URLSearchParams 构造函数接受一个字符串或一个类数组对象(如数组或对象),并将其转换为查询字符串格式。
  • 常见的用法是传入一个查询字符串或一个对象。

query 参数:

  • query 可以是一个查询字符串(例如 “key1=value1&key2=value2”),也可以是一个对象(例如 { key1:
    ‘value1’, key2: ‘value2’ })。

  • 如果 query 是一个字符串,URLSearchParams 会解析这个字符串并生成相应的键值对。

  • 如果 query 是一个对象,URLSearchParams 会将对象的键值对转换为查询字符串格式。

示例 1:使用查询字符串

let query = "name=John&age=30";
let params = new URLSearchParams(query);

console.log(params.get('name')); // 输出: John
console.log(params.get('age'));  // 输出: 30

示例 2:使用对象

let query = { name: 'John', age: 30 };
let params = new URLSearchParams(query);

console.log(params.get('name')); // 输出: John
console.log(params.get('age'));  // 输出: 30

常用方法
URLSearchParams 提供了许多有用的方法来处理查询字符串:

append(name, value):添加一个新的键值对。
delete(name):删除指定的键及其值。
get(name):获取指定键的第一个值。
getAll(name):获取指定键的所有值(返回一个数组)。
has(name):检查是否存在指定的键。
set(name, value):设置指定键的值,如果键已存在,则更新其值。
toString():将 URLSearchParams 对象转换为查询字符串。

let query = "name=John&age=30";
let params = new URLSearchParams(query);

console.log(params.get('name')); // 输出: John
console.log(params.get('age'));  // 输出: 30

params.append('city', 'New York'); // 添加一个新的键值对
console.log(params.toString()); // 输出: name=John&age=30&city=New%20York

params.set('age', '31'); // 更新键值对
console.log(params.toString()); // 输出: name=John&age=31&city=New%20York

params.delete('city'); // 删除键值对
console.log(params.toString()); // 输出: name=John&age=31

总结
let params = new URLSearchParams(query) 这句代码创建了一个 URLSearchParams 对象,用于处理查询字符串。通过这个对象,你可以方便地添加、删除、获取和修改查询参数。这对于构建和解析 URL 查询字符串非常有用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/904396.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

IMX6ULL裸机-汇编_反汇编_机器码

程序处理的4个步骤 我们编写的C程序是不能直接在ARM等平台上运行的,必须经过一系列的程序处理才可以,我们的第一个LED程序涉及两个文件:start.S、main.c,它们的处理过程如下: 对于汇编程序,经过汇编之后&a…

【Unity】游戏UI中添加粒子特效导致穿层问题的解决

这里介绍一下简易的ui系统中,添加粒子特效导致的穿层问题 首先是在ui界面中添加粒子特效预制体,这个时候,控制这个粒子显示层级的有两个方面 上图中,如果你的Sorting Layer ID的值(Layer排序)是大于当前C…

SAP 根据不同生产版本创建销售预测简介

SAP 根据不同生产版本创建销售预测简介 业务场景前台操作1、创建BOM2、创建工艺路线3、创建生产版本4、创建销售预测5、调整销售预测6、查看物料需求业务场景 很多工厂一个物料可能会存在多个BOM,当有多个BOM存在的情况下就会存在多个生产版本,当创建计划独立需求的时候,系…

STM32 RTC 驱动代码(解决了使用HAL库函数导致的复位或者掉电后导致RTC年月日日期清零的问题)

问题背景:在RTC中断里面使用HAL库HAL_RTC_GetDate()和HAL_RTC_GetTime()来获取RTC时间日期。 源码如下图: 问题描述:单片机断电或者复位后的时分秒的时间可以接上,但年月日的日期就会被清零。如图: 导致问题的根本原因…

SpringBoot3+SpringSecurity6基于若依系统整合自定义登录流程

SpringBoot3SpringSecurity6基于若依系统整合自定义登录流程 问题背景 在做项目时遇到了要对接统一认证的需求,但是由于框架的不兼容性(我们项目是springboot3,jdk17,springsecurity6.1.5)等因素,不得不使…

Mount Image Pro,在取证安全的环境中挂载和访问镜像文件内容

天津鸿萌科贸发展有限公司从事数据安全服务二十余年,致力于为各领域客户提供专业的数据恢复、数据备份解决方案与服务,并针对企业面临的数据安全风险,提供专业的相关数据安全培训。 天津鸿萌科贸发展有限公司是 GetData 公司数据恢复与取证工…

PHP合成图片,生成海报图,poster-editor使用说明

之前写过一篇使用Grafika插件生成海报图的文章,但是当我再次使用时,却发生了错误,回看Grafika文档,发现很久没更新了,不兼容新版的GD,所以改用了intervention/image插件来生成海报图。 但是后来需要对海报…

React 前端框架全面教程:从入门到进阶

React 前端框架全面教程:从入门到进阶 引言 在现代前端开发中,React 作为一款流行的 JavaScript 库,以其组件化、声明式的特性和强大的生态系统,成为了开发者的首选。无论是构建单页应用(SPA)还是复杂的用…

基于Python的自然语言处理系列(42):Token Classification(标注分类)

在本篇文章中,我们将探讨如何进行 Token Classification(标注分类),这是一类为句子中的每个 token(词或子词)分配标签的任务。该任务可以解决很多问题,例如命名实体识别(NER&#xf…

用Pyhon写一款简单的益智类小游戏——2048

文字版——代码及讲解 代码—— import random# 初始化游戏棋盘 def init_board():return [[0] * 4 for _ in range(4)]# 在棋盘上随机生成一个2或4 def add_new_tile(board):empty_cells [(i, j) for i in range(4) for j in range(4) if board[i][j] 0]if empty_cells:i,…

『Linux学习笔记』如何在 Ubuntu 22.04 上安装和配置 VNC

『Linux学习笔记』如何在 Ubuntu 22.04 上安装和配置 VNC 文章目录 一. 『Linux学习笔记』如何在 Ubuntu 22.04 上安装和配置 VNC1. 介绍 二. 参考文献 一. 『Linux学习笔记』如何在 Ubuntu 22.04 上安装和配置 VNC 如何在 Ubuntu 22.04 上安装和配置 VNC 1. 介绍 虚拟网络计算…

【Java】方法的使用 —— 语法要求、方法的重载和签名、方法递归

目录 1. 方法基础知识 1.1 方法的概念 1.2 语法格式 * 注意事项【与C不同】 1.3 return —— 返回值的严格检查【比C语言严格】 2. 形参与实参的关系 3. 方法重载 3.1 什么是方法重载?为什么要方法重载? 3.2 方法重载的规则 4. 方法签名 5. 递…

HT7178 带输出关断的20V,14A全集成同步升压转换器

1、特点 输入电压范围VpIN:2.7V-20V 输出电压范围VouT:4.5V-20V 可编程峰值电流:14A 高转换效率: 95%(VPIN7.2V, VoUT 16V, IouT3A) 94%(VPIN12V,VoUT18V,IoUT4A) 90%(VPIN3.3, VoUT-9V,IOUT3A) 轻载条件下两种调制方式:脉频调制(PFM)和 强制脉宽调试(PWM) 集成输出关断的栅极…

【史上最全SD教程】Stable Diffusion系统教学!Ai绘画零基础入门到精通商业实战 人工智能绘图画图商业变现

一、为什么要学Stable Diffusion,它究竟有多强大? 1.Stable Diffusion能干嘛 Stable Diffusion(SD)作为一种先进的AI图像生成技术,其功能和应用场景非常广泛。以下是SD的一些主要功能和应用领域: \1. 图…

《链表篇》---两数相加(中等)

题目传送门 方法一:迭代 文字描述看代母注释 class Solution {public ListNode addTwoNumbers(ListNode l1, ListNode l2) {//定义头结点和当前节点ListNode head null,cur null;//carry记录进位情况。int carry 0; while(l1 ! null || l2 ! null){//判断节点是…

QT找不到ffmpeg链接库解决方法

error: undefined reference to avformat_network_init() 一个神奇的报错,查了很久,检查步骤: 1、检查了 pro工程文件 2、链接库的真实性和正确性 在main.cpp中调用没有报错,在其它cpp文件中调用就报错。 破案了,…

详细了解C++11(1)

大家好呀,我是残念,希望在你看完之后,能对你有所帮助,有什么不足请指正!共同学习交流哦 本文由:残念ing原创CSDN首发,如需要转载请通知 个人主页:残念ing-CSDN博客,欢迎各…

04.DDD与CQRS

学习视频来源:DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 文章目录 定义职责分离DDD与CQRS的关系领域模型和查询模型特点命令场景的领域模型查询场景的查询模型 架构方案领域事件方案1&#xff1a…

【运动的&高尔夫球】高尔夫球检测系统源码&数据集全套:改进yolo11-CA-HSFPN

改进yolo11-HWD等200全套创新点大全:高尔夫球检测系统源码&数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.10.30 注意:由于项目一直在更新迭代,上面“1.图片效果展示”和“2.视频效果展示”展示的系统图片或者视频可…

【python】flash-attn安装

这个命令: 确保使用正确的 CUDA 12.6 工具链 设置必要的 CUDA 环境变量 包含了常见的 GPU 架构支持 利用你的128核心进行并行编译 # 清理之前的安装 proxychains4 pip uninstall -y flash-attn# 获取 CUDA 路径 CUDA_PATH$(dirname $(dirname $(which nvcc)))# 使用…