(简单详细)javascript中new url()属性，轻松解析url地址

比眉伴天荒 2023-10-09 16:13 20阅读 0赞

**目录**

背景

前言

new URL()

博主絮叨

--------------------

## 背景 ##

> 我们在日常开发中经常会遇到要对url中的参数进行修改和新增，但是自己手动每次敲就会导致代码很麻烦，且不易维护

## 前言 ##

以前写过两次次解析url的并且**对url的应用场景做了深层挖掘 （个人感觉，没有这个帖子好用，因为以前是正则表达式来进行的，但是思路对下面的方法同样适用）**

--------------------

[JS解析url中的参数\_\_揽的博客-CSDN博客][JS_url_-CSDN]

[（巨好使，详细，解析URl，URl自定义传参）js URl中快速自定义传参，并且实现参数解析 修改 和新增，替换功能\_自定义url协议 传参\_\_揽的博客-CSDN博客][URl_URl_js URl_ _ _url_ _-CSDN]

--------------------

## new URL() ##

首先写一个假的地址（`q=URLUtils.searchParams&topic=api`）相当于当前的window.location.href

const urlParams = new URL(window.location.href);//将字符串变成url对象
    urlParams.searchParams.has("topic") === true; // true //判断url是否存在这个key值
    urlParams.searchParams.get("topic") === "api"; // true //获取这个key值的value
    urlParams.searchParams.getAll("topic"); // ["api"] //获取url所有的key
    urlParams.searchParams.get("foo") === ""; // true //key值为空的情况
    urlParams.searchParams.append("topic", "webdev"); //url追加一个key-value
    urlParams.searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
    //将参数对象转为字符串并且进行了拼接
    urlParams.searchParams.set("topic", "More webdev"); //设定key-value
    urlParams.searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
    urlParams.searchParams.delete("topic"); //删除key-value
    urlParams.searchParams.toString(); // "q=URLUtils.searchParams"

## 博主絮叨 ##

这个方法比前两个博客中的正则更实用，但是前两个博客的思路一定可以多看看

[JS_url_-CSDN]: https://blog.csdn.net/qq_59747594/article/details/126397187?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168060248316800225598404%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168060248316800225598404&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-126397187-null-null.blog_rank_default&utm_term=%E8%A7%A3%E6%9E%90&spm=1018.2226.3001.4450
[URl_URl_js URl_ _ _url_ _-CSDN]: https://blog.csdn.net/qq_59747594/article/details/127151053?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168060248316800225598404%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=168060248316800225598404&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-2-127151053-null-null.blog_rank_default&utm_term=%E8%A7%A3%E6%9E%90&spm=1018.2226.3001.4450