JS 中的URLSearchParams 对象操作(以对象的形式上传参数到url)

 更新时间:2022年12月13日 15:26:28   作者:谢友海  
这篇文章主要介绍了JS中URLSearchParams的基本用法,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

基本用法

此功能某些浏览器尚在开发中,兼容性可能不是很好。

URLSearchParams() 构造器:创建并返回一个新的URLSearchParams 对象。 开头的’?’ 字符会被忽略。

语法:

// init: 参数可选,为一个 USVString
var URLSearchParams = new URLSearchParams(init);

示例:

// 传入一个字符串字面值
var searchParams = new URLSearchParams('https://example.com?foo=1&bar=2');
console.log(searchParams.toString());	// foo=1&bar=2
// 查找字符串
console.log(searchParams.has('foo'));	// true
// 获取字符串对应的数据
console.log(searchParams.get('foo'));	// 1
// 设置字符串
searchParams.set('ttl','3');	// 1
console.log(searchParams.toString());	// foo=1&bar=2&ttl=3


// 传入一个 sequence
var params3 = new URLSearchParams([["foo", 1],["bar", 2]]);
console.log(params3.toString());	// foo=1&bar=2

// 传入一个 record
var params4 = new URLSearchParams({"foo" : 1 , "bar" : 2});
console.log(params4.toString());	// foo=1&bar=2

url的打印结果:

在这里插入图片描述

实践运用

函数封装:

export function toSearch(record: Record<string, string>) {
  return new URLSearchParams(record).toString();
}

使用

// Button 按钮是adtd里面的,这里只展示局部代码
<Button
  type="link"
  href={`#/project/flowpage?${toSearch({
    id: 666,
    name: "liu",
  })}`}
  target="_blank"
>
  点击按钮
</Button>

效果:

// 前面域名指向当前网页的域名,这里暂用...省略
...#/project/flowpage?id=666&name="liu"

到此这篇关于JS 中的URLSearchParams 对象操作(以对象的形式上传参数到url)的文章就介绍到这了,更多相关JS URLSearchParams内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS实现的类似微信聊天效果示例

    JS实现的类似微信聊天效果示例

    这篇文章主要介绍了JS实现的类似微信聊天效果,可实现模拟微信聊天效果的对话框信息传输,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01
  • javascript表单正则应用

    javascript表单正则应用

    这篇文章主要为大家详细介绍了javascript表单正则应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Bootstrap弹出框(Popover)被挤压的问题小结

    Bootstrap弹出框(Popover)被挤压的问题小结

    比较了下Bootstrap的popover和一些其它的开源项目,觉得Bootstrap的还算不错。在使用过程中遇到了一系列问题,下面小编给大家分享Bootstrap弹出框(Popover)被挤压的问题小结,需要的朋友参考下吧
    2017-07-07
  • 如何使用50行javaScript代码实现简单版的call,apply,bind

    如何使用50行javaScript代码实现简单版的call,apply,bind

    这篇文章主要介绍了50行javaScript代码实现简单版的call,apply,bind过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JavaScript中内置函数Map()的使用

    JavaScript中内置函数Map()的使用

    Map()是JavaScript中内置的一种数据结构,它允许您将键值对映射到任意类型的值,主要介绍了JavaScript中内置函数Map()的使用,感兴趣的可以了解一下
    2023-05-05
  • 简单实现js轮播图效果

    简单实现js轮播图效果

    这篇文章主要教大家如何简单实现js轮播图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JavaScript常用工具函数汇总(浏览器环境)

    JavaScript常用工具函数汇总(浏览器环境)

    这篇文章主要汇总了JavaScript常用的工具函数,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2020-09-09
  • javascript实现表格增删改操作实例详解

    javascript实现表格增删改操作实例详解

    这篇文章主要介绍了javascript实现表格增删改操作的实现方法,以实例形式较为详细的分析了javascript操作表格的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • 使用canvas进行图像编辑的实例

    使用canvas进行图像编辑的实例

    下面小编就为大家带来一篇使用canvas进行图像编辑的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Javascript中typeof 用法小结

    Javascript中typeof 用法小结

    JavaScript中的typeof其实非常复杂,他有六种返回的数据类型,它可以用来做很多事情,但同时也有很多怪异的表现.本文列举出了它的多个用法,有需要的小伙伴可以参考下。
    2015-05-05

最新评论