【前端入门】URL基础及管理URL的原生对象

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情

URL 是互联网的基础设施之一。浏览器提供了一些原生对象，用来管理 URL

Location 对象

Location对象是浏览器提供的原生对象，提供 URL 相关的信息和操作方法。可以通过window.location和document.location属性拿到～

Location对象有以下属性：

• Location.href：整个 UR
• Location.protocol：当前 URL 的协议，包括冒号（:）
• Location.host：主机
• Location.hostname：主机名，不包括端口
• Location.port：端口号
• Location.pathname：URL 的路径部分，从根路径/开始
• Location.search：查询字符串部分，从问号?开始
• Location.hash：片段字符串部分，从#开始
• Location.username：域名前面的用户名
• Location.password：域名前面的密码
• Location.origin：URL 的协议、主机名和端口

特别注意：如果对Location.href写入新的 URL 地址，浏览器会立刻跳转到这个新地址嗷

URL 的编码和解码

JavaScript 提供四个 URL 的编码/解码方法

• encodeURI()：转码整个 URL
• encodeURIComponent()：转码 URL 的组成部分（除了语义字符之外的所有字符）
• decodeURI()：解码整个 URL，类似于encodeURI()的逆运算～
• decodeURIComponent()：用于URL 片段的解码，也是类似于encodeURIComponent()的逆运算～

var url = new URL('http://www.xxx.com/index.html');
url.href
// "http://www.xxx.com/index.html",生成了一个 URL 实例，用来代表指定的网址

URL 实例的属性与Location对象的属性基本一致，返回当前 URL 的信息(具体如第一个介绍：Location对象的属性）

写在最后

以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～ （学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）

附上学习链接，感谢这些大佬出题和解答： wangdoc.com/javascript/…