js获取url参数-如何用 JavaScript 来解析 URL

“关注前端开发社区，回复“ 1” 即可加入前端技术交流群，回复 “ 2” 即可免费领取500G前端干货
英文 |
web前端开发
统一资源定位符，缩写为URL，是对网络资源(网页、图像、文件)的引用。URL指定资源位置和检索资源的机制(http、ftp、mailto)。
举个例子，这里是这篇文章的 URL 地址：

https://dmitripavlutin.com/parse-url-JavaScript

很多时候你需要获取到一段 URL 的某个组成部分。它们可能是 hostname（例如 dmitripavlutin.com），或者 pathname（例如 /parse-url-JavaScript）。
一个方便的用于获取 URL 组成部分的办法是通过 URL() 构造函数。
在这篇文章中，我将给大家展示一段 URL 的结构，以及它的主要组成部分。
接着，我会告诉你如何使用 URL() 构造函数来轻松获取 URL 的组成部分，比如 hostname，pathname，query 或者 hash。
1、URL 结构
一图胜千言。不需要过多的文字描述，通过下面的图片你就可以理解一段 URL 的各个组成部分：
2、URL() 构造函数
URL() 构造函数允许我们用它来解析一段 URL：

const url = new URL(relativeOrAbsolute [, absoluteBase]);

参数 relativeOrAbsolute 既可以是绝对路径，也可以是相对路径。如果第一个参数是相对路径的话，那么第二个参数 absoluteBase 则必传，且必须为第一个参数的绝对路径。
举个例子，让我们用一个绝对路径的 URL 来初始化 URL() 函数：

const url = new URL('http://example.com/path/index.html');url.href; // => 'http://example.com/path/index.html'

或者我们可以使用相对路径和绝对路径：
const url = new URL('/path/index.html', 'http://example.com');url.href; // => 'http://example.com/path/index.html'

URL() 实例中的 href 属性返回了完整的 URL 字符串。
在新建了 URL() 的实例以后js获取url参数，你可以用它来访问前文图片中的任意 URL 组成部分。作为参考，下面是 URL() 实例的接口列表：

interface URL {  href:     USVString;  protocol: USVString;  username: USVString;  password: USVString;  host:     USVString;  hostname: USVString;  port:     USVString;  pathname: USVString;  search:   USVString;  hash:     USVString;
  readonly origin: USVString;  readonly searchParams: URLSearchParams;
  tojsON(): USVString;}

上述的 USVString 参数在 JavaScript 中会映射成字符串。
3、Query 字符串
url.search 可以获取到 URL 当中 ? 后面的 query 字符串：
const url = new URL(  'http://example.com/path/index.html?message=hello&who=world');
url.search; // => '?message=hello&who=world'

如果 query 参数不存在，url.search 默认会返回一个空字符串 ''：
const url1 = new URL('http://example.com/path/index.html');const url2 = new URL('http://example.com/path/index.html?');
url1.search; // => ''url2.search; // => ''

3.1 、解析 query 字符串
相比于获得原生的 query 字符串，更实用的场景是获取到具体的 query 参数。
获取具体 query 参数的一个简单的方法是利用 url.searchParams 属性。这个属性是 URLSearchParams 的实例。
URLSearchParams 对象提供了许多用于获取 query 参数的方法，如get(param)，has(param)等。
下面来看个例子：
const url = new URL(  'http://example.com/path/index.html?message=hello&who=world');
url.searchParams.get('message'); // => 'hello'url.searchParams.get('missing'); // => null

url.searchParams.get('message') 返回了 message 这个 query 参数的值——hello。
如果使用 url.searchParams.get('missing') 来获取一个不存在的参数js获取url参数，则得到一个 null。
4、hostname
url.hostname 属性返回一段 URL 的 hostname 部分：
const url = new URL('http://example.com/path/index.html');url.hostname; // => 'example.com'

5、pathname
url. pathname 属性返回一段 URL 的 pathname 部分：
const url = new URL('http://example.com/path/index.html?param=value');url.pathname; // => '/path/index.html'

如果这段 URL 不含 path，则该属性返回一个斜杠 /：
const url = new URL('http://example.com/');url.pathname; // => '/'

6、hash
最后，我们可以通过 url.hash 属性来获取 URL 中的 hash 值：
const url = new URL('http://example.com/path/index.html#bottom');url.hash; // => '#bottom'

当 URL 中的 hash 不存在时，url.hash 属性会返回一个空字符串 ''：
const url = new URL('http://example.com/path/index.html');url.hash; // => ''

7、URL 校验
当使用 new URL() 构造函数来新建实例的时候，作为一种副作用，它同时也会对 URL 进行校验。如果 URL 不合法，则会抛出一个 TypeError。
限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载

站长微信：ziyuanshu688
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
js获取url参数url构造函数

	
		
            
                            
                    htebazile永久VIP
相关文章
