返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于JavaScript中URL对象的一些妙用
  • 738
分享到

关于JavaScript中URL对象的一些妙用

2024-04-02 19:04:59 738人浏览 八月长安
摘要

目录前言解析参数修改 URL 参数总结前言 URL 对象可能页端用的比较少一点,一般来说,页端对 URL 的操作,大部分都是解析 URL 参数,解析 URL 参数有比较多的库可以选,

前言

URL 对象可能页端用的比较少一点,一般来说,页端对 URL 的操作,大部分都是解析 URL 参数,解析 URL 参数有比较多的库可以选,比如 qs,或者用浏览器原生的 URLSearchParams


// 假设当前的 url 为 'https://www.test.com?a=1&b=2'
const b = new URLSearchParams(location.search);
const aParam = b.get('a'); // 1
const bParam = b.get('b'); // 2
const entries = [...b];
// [['a', '1'], ['b', '2']]
// 如果希望可以像 qs.parse 一样获取一个对象,可以这样做
const params = Object.fromEntries(entries);
// {a: 'c', b: '2'}

解析参数

通过 URLSearchParams 解析参数,和 URL 这个对象看起来关联不是很大,但是可以看下 URL 对象实例化之后返回的对象


const a = new URL('Https://www.test.com?a=1&b=2');
// hash: ""
// host: "www.test.com"
// hostname: "www.test.com"
// href: "https://www.test.com/?a=1b=2"
// origin: "https://www.test.com"
// passWord: ""
// pathname: "/"
// port: ""
// protocol: "https:"
// search: "?a=1&b=2"
// searchParams: URLSearchParams {}
// username: ""
// [[Prototype]]: URL

从返回的对象可以看到,URL 实例化之后,返回的属性 searchParams 实际上就是一个实例化的 URLSearchParams 对象。所以获取参数的操作,其实也有一个方法是通过 URL 对象去获取,例如上面的操作可以改一下


const a = new URL('https://www.test.com?a=1&b=2');
const entries = [...a.searchParmas];
const params = Object.fromEntries(entries);

// 在浏览器控制台,一行
[...new URL(location.href).searchParams];

修改 URL 参数

淡出的解析参数,没必要动用 URL,用 URLSearchParams 这个对象完全是足够的,那么这个 URL 对象还可以做什么呢,其实可以想想 URLSearchParams 其实提供了 set append 这些写操作,同时,URL 对象返回的属性也是可以修改的,能不能通过修改 URL 里面的参数,实现修改一个 URL 或者说生成一个 URL ,毕竟很多时候,对 URL 的修改停留在字符串操作上,操作起来也很危险,很容易报错


const a = new URL('https://www.test.com?a=1&b=2');
a.searchParams.set('a', '18');
a.searchParams.set('b', '14');
a.searchParams.set('c', 'test');
let newURL = a.toString(); // https://www.test.com/?a=18&b=14&c=test
a.hash = 'hasha';
newURL = a.toString(); // 'https://www.test.com/?a=18&b=14&c=test#hasha'
a.host = 'www.init.com';
newURL = a.toString(); // https://www.init.com/?a=18&b=14&c=test#hasha

总结

URL 对象在操作 URL 里面还是比较方便的,简单封装一下可以少引很多包了,变通一下,可以反过来修改 URL 。这个对象在浏览器里面可以使用,但是可能面临着兼容性问题,如果是桌面端,放心用(IE 是啥),如果是移动端,可能需要配置polyfill。这个对象在 deno 中也能使用

到此这篇关于javascript URL对象的一些妙用的文章就介绍到这了,更多相关JavaScript URL对象妙用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 关于JavaScript中URL对象的一些妙用

本文链接: https://lsjlt.com/news/137512.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 关于JavaScript中URL对象的一些妙用
    目录前言解析参数修改 URL 参数总结前言 URL 对象可能页端用的比较少一点,一般来说,页端对 URL 的操作,大部分都是解析 URL 参数,解析 URL 参数有比较多的库可以选,...
    99+
    2024-04-02
  • 聊一聊JavaScript的URL对象是什么
    目录概述Hash属性Host 属性Hostname 属性Href属性Origin属性UserName & Password属性Pathname属性Port属性Protocol...
    99+
    2024-04-02
  • JavaScript的URL 对象有什么用
    这篇文章主要介绍了JavaScript的URL 对象有什么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。如果我们自己编写从URL中分析和提...
    99+
    2024-04-02
  • 理解JavaScript中window对象的一些用途
    目录前言浏览器对象模型浏览器环境深入全局变量对话框谨慎使用原生对话框浏览器信息Navigator对象URL浏览器历史控制窗口烦人的弹框屏幕信息更适用于移动平台谨慎使用文档对象docu...
    99+
    2024-04-02
  • 关于JavaScript 的对象的介绍是怎样的
    本篇文章为大家展示了关于JavaScript 的对象的介绍是怎样的,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。1. 对象方法 & this方法只是保存函数...
    99+
    2024-04-02
  • Javascript基础知识中关于内置对象的知识
    目录1、内置对象介绍1.1Math对象1.2Math中的方法1.3Date对象2、Date中的方法3、经典案例:倒计时效果:4、Array数组对象4.1数组的创建4.2数组中的常用方...
    99+
    2024-04-02
  • JavaScript中有哪些常用的对象
    本篇内容主要讲解“JavaScript中有哪些常用的对象”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript中有哪些常用的对象”吧! ...
    99+
    2024-04-02
  • JavaScript数组对象高阶函数reduce的妙用详解
    目录reduce 是 JavaScript 数组对象上的一个高阶函数计算数组的平均数求数组的最大值求数组的最小值数组去重计算数组中每个元素出现的次数实现数组分组计算数组中连续递增数字...
    99+
    2023-05-16
    JavaScript数组对象reduce JavaScript高阶函数reduce
  • python中requests库session对象的妙用详解
    在进行接口测试的时候,我们会调用多个接口发出多个请求,在这些请求中有时候需要保持一些共用的数据,例如cookies信息。 妙用1 requests库的session对象能够帮我们跨请求保持某些参数,也会...
    99+
    2022-06-04
    妙用 详解 对象
  • 关于JavaScript数组对象去重的几种方法
    数组对象如下: let repeatData = [ { id: 1, name: 'sun', age: 18 }, { id: 1, name: ...
    99+
    2023-05-17
    JavaScript数组去重 js数组对象去重
  • 关于MyBatis中映射对象关系的举例
    目录MyBatis映射对象关系双向many2one/one2many关系中的组合关系(级联)Mybatis映射原理MyBatis映射对象关系 双向many2one/one2many关...
    99+
    2024-04-02
  • java中关于对象的详细介绍
    一、对象的创建步骤:(1)声名对象变量:对象变量的声明并没有创建对象,系统只是为该改变量分配一个引用空间。(2)对象的实例化:为对象分配空间,执行new运算符后的构造方法完成对象的初始化,并返回该对象的引用。过程:首先为对象分配内存空间,并...
    99+
    2014-08-23
    java入门 java 对象
  • 关于java中类和对象的讲解
    1、定义 类: 对于一类事物的统称,对当前事物的一些描述,属性描述和行为描述 对象: 独立,唯一,特殊的个体2、定义格式class ClassName { // 属性描述 // 行为描述 }要求: ClassName要求符合大驼峰命名法,并...
    99+
    2014-07-08
    java入门 java 对象
  • Python关于面向对象的问题有哪些
    这篇“Python关于面向对象的问题有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Python关于面向对象的问题有哪些...
    99+
    2023-07-06
  • JavaScript中有哪些常用的内部对象
    JavaScript中有哪些常用的内部对象,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1、串对象string对象:内部静态性。访问prope...
    99+
    2024-04-02
  • javascript中对象的要素有哪些
    这篇文章主要讲解了“javascript中对象的要素有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript中对象的要素有哪些”吧! ...
    99+
    2024-04-02
  • javascript中常见的对象有哪些
    这篇文章主要介绍javascript中常见的对象有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!javascript对象有:String、Number、Boolean、Array、Date、RegExp、Math...
    99+
    2023-06-14
  • 关于Java中的dozer对象转换问题
    目录Java中的dozer对象转换1、dozer介绍2、依赖坐标3、创建测试工厂【dozer_demo】3.1、引入对应的依赖3.2、创建UserDTO和UserEntity3.3、...
    99+
    2024-04-02
  • 一起再看JavaScript中的对象解构
    解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量,在文章《JavaScript 解构赋值 5 个常见场景和实例》中介绍过,今天再来复习一下。基础解构const fullName = { firstName: "...
    99+
    2023-05-14
    JavaScript ECMAScript 6 Vue.js
  • JavaScript中创建一个xhr对象并使用
    本篇内容介绍了“JavaScript中创建一个xhr对象并使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作