字数
1287 字
阅读时间
6 分钟
URL 组成
- href 一个完整的 URL 地址
- origin 由协议（protocol），域名（hostname），端口（post） 组成的源， 他是一个只读属性
- 对于 http 和 https 协议的 URL，返回值就是 http://www.baidu.com:222
- 对于 file: 协议的 URL， 返回值应浏览器而异
- 对于 blob: 协议的 URL， 返回值是 blob: 后跟随的源地址. 例如 "blob:https://www.baidu.com:222" 将会返回 "https://www.baidu.com:222"
- protocol 协议， 常见的协议有 http https ftp, 协议表示我们可以通过不同的规则访问一个 URl，前提是服务器支持该协议
- hostname 域名，或者说是主机名。
- port 端口号， 一般 http 的端口为 80 ，而 https 的端口为 443
- pathname 路径
- search 路由参数 以 ? 开头
- hash 哈希值 以 # 开头
- 如果存在 HTTP 身份验证，则这里可能还会有 user 和 password 属性
创建 URL 对象
js
new URL(url, [base])- url --- 完整的 URL，或者仅路径（如果设置了 base）
- base --- 可选参数，如果设置了两个参数，则会根据两参数生成一个完整的 Url
以下两个都是一样的值
js
const u1 = new URL('https://www.baidu.com/aa/bb')
const u2 = new URL('/aa/bb', 'https://www.baidu.com')
console.log(u1.href, u2.href)
// u1 -> https://www.baidu.com/aa/bb
// u2 -> https://www.baidu.com/aa/bb看看 url 有哪些属性值： 发现这个内置对象 可以取出一个 URL 的所有属性，可以很方便的处理 URL
js
const u1 = new URL('https://www.baidu.com/aa/bb')
console.log(u1)
// {
// hash: ""
// host: "www.baidu.com"
// hostname: "www.baidu.com"
// href: "https://www.baidu.com/aa/bb"
// origin: "https://www.baidu.com"
// password: ""
// pathname: "/aa/bb"
// port: ""
// protocol: "https:"
// search: ""
// searchParams: URLSearchParams {}
// username: ""
// }对于字符串的编码
URL 中的 合法字符：
- URL 元字符： 分号; 逗号, 斜杆/ 问好? 冒号: at 符@ and 符& 等于号= 加号 + 美元符 $
- 语义字符： 井号# 连接符号 - 下划线 _ 点. 感叹号! 波浪号~ 星号 * 单引号 ' 圆括号 () 最后还有 大小写字母 a-z A-Z 和 阿拉伯数字 0-9
除了合法字符之外的字符，在 URL 被处理时都会提前进行转义
转义的规则是：根据操作系统的默认编码，将每个字节转为百分号（%）加上两个大写的十六进制字母
js
<!-- cli.html -->
<script>
console.log(window.location.href)
// http://localhost:8082/cli.html?a=VSA%20UIO
</script>手动编码方法
- encodeURI 编码整个 URL
- decodeURI 解码为编码前的状态
- encodeURIComponent 编码 URL 组件，例如搜索参数，或者 hash，或者 pathname
- decodeURIComponent 解码为编码前的状态
带 component 的方法相比不带的，转义对象不同
- 带 component 的会转义【语义字符】之外的字符
- 不带的会转义【非法字符】
txt
如果你想传一个参数 12&123 怎么办， 它会把 & 当成参数分隔符。 和你的本意不同，这样， 我们就是使用 encodeURIComponent 进行参数编码js
const params = encodeURIComponent('12&123')
const url = `https://www.baidu.com:8080/path/page?p1=${params}&a=1`
console.log(url)
// https://www.baidu.com:8080/path/page?p1=12%26123&a=1
const arr = url.match(/([^&?])+(=)([^&])+/g)
console.log(arr)
// ["p1=12%26123", "a=1"]
console.log(arr[0].split('='))
// ["p1", "12%26123"]
const p1 = arr[0].split('=')[1]
console.log(p1)
// 12%26123
console.log(decodeURIComponent(p1))
// 12&123自动编码方法
URL 对象下面有个属性为 searchParams，使用它可以进行对参数的各种处理。
（提示： searchParams 其实是 URLSearchParams(window 下面的内置对象， 和 URL 对象一样) 的实例，两者的用法也是一样的）
- append 方法： new URL(url).searchParams.append('p1', '12&123') 往 url 里添加 属性名为 p1, 属性值为 12&123 的参数，对于 属性值 该方法会自动进行编码。
- get 方法： new URL(url).searchParams.get('p1') 从 url 里取出 属性名为 p1 的参数值， 该方法会自动进行解码
- delete 方法： new URL(url).searchParams.delete('a') 从 url 里删除 属性名为 p1 的参数
- has 方法： new URL(url).searchParams.has('p1') url 中是否有 p1 参数， 返回 true 或 false
- set 方法： 有两种功能，，分别是 添加新参数 和 替换旧参数
- new URL(url).searchParams.set('p2', '00000') 往 url 里添加 属性名为 p2，属性值为 00000 的参数
- new URL(url).searchParams.set('p1', '11111') 从 url 将属性名为 p1 的属性值替换为 00000
- getAll 方法： new URL(url).searchParams.getAll('p1')
相比get方法，返回数组 - append 方法允许插入相同属性名甚至相同属性值参数， 但是使用 get 方法的时候只能取第一个 p1 的值。这个时候我们就需要 getAll 方法， 它会取出所有的 p1 的值
new URL(url).searchParams 本身就是一个迭代器，拥有 forEach 方法， 和数组的 forEach 方法一样的使用
URL 的静态方法
这两个静态方法是相辅相成的， 一个是在内存中创建 URL 对象， 一个是 在内存中释放 URL 对象
createObjectURL
- 使用方法 window.URL.createObjectURL(object), 用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。
revokeObjectURL
- 使用方法 window.URL.revokeObjectURL(objectURL), 用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象
转载
贡献者
jiechen