语言►JavaScript►URL

JavaScript中的URL

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/04/18/JavaScript%E4%B8%AD%E7%9A%84URL/

摘要

本文主要讲述了：

  1. 什么是 URL
  2. 构造函数
  3. 实例属性
  4. 原型方法
  5. 静态方法

正文

什么是 URL

全称为”Uniform Resource Locator”，是一类特定类型的 URI

JavaScript 中的URL是对 URL 的实现

构造函数

new URL(url[, base])

  • url表示绝对路径或相对路径。若url为绝对路径，则base是可选的
  • base表示 baseURL，默认值为空字符串。base也可以是URL实例

注：对于系统来说，/是根目录，是绝对路径；对于网站来说，/是相对路径，相对于locaiton.origin，只有以 URL 协议名称打头的才是绝对路径。

示例：若url为绝对路径，则base是可选的

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log(new URL('https://jsweibo.github.io'));
    </script>
  </body>
</html>

示例：若url为相对路径，则base是必须的

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log(new URL('/', 'https://jsweibo.github.io'));
    </script>
  </body>
</html>

示例：base也可以是URL实例

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log(new URL('/', new URL('https://jsweibo.github.io')));
    </script>
  </body>
</html>

实例属性

protocol

协议名称（包括:）

hostname

主机名称

port

主机端口号

host

主机名称 + 主机端口号

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log(
        new URL('https://jsweibo.github.io:8080/search.html?keyword=123#app')
      );
    </script>
  </body>
</html>

origin

URL 的协议名称（包括:） + ‘//‘ + hostname + ‘:’ + port

pathname

路径名

搜索字符串，也称作查询字符串

注：包括?

searchParams

基于搜索字符串生成的URLSearchParams实例

hash

哈希片段

href

URL

原型方法

toString

返回href属性

toJSON

返回href属性

静态方法

createObjectURL

创建一个指向Blob实例或File实例的 blob URL

该方法所创建的URL实例的生存期与当前页面的document绑定

注意：以相同的实例作为参数，多次调用此方法会创建多个不同的 blob URL

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const foo = new Blob([1, 2, 3, 4], {
        type: 'text/plain',
      });
      console.log(URL.createObjectURL(foo));
      console.log(URL.createObjectURL(foo));
    </script>
  </body>
</html>

revokeObjectURL

用于销毁由URL.createObjectURL()创建的 blob URL

返回值：undefined

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const foo = new Blob([1, 2, 3, 4], {
        type: 'text/plain',
      });
      const fooUrl = URL.createObjectURL(foo);
      console.log(fooUrl);
      console.log(URL.revokeObjectURL(fooUrl));
    </script>
  </body>
</html>

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/04/18/JavaScript%E4%B8%AD%E7%9A%84URL/

本文对你有帮助？请支持我

支付宝
微信