目录
作为一个后端的开发大神，最近在做公司的一个网站，前端有很多页面，而我对于前端来说确是菜鸟，今天就被问了一个问题，如何获取当前页面的url以及如何分析它的每一部分，下面记录一下我的心得。
1、Location的概念
Location 接口表示其链接到的对象的位置（URL）。所做的修改反映在与之相关的对象上。 Document 和 Window 接口都有这样一个链接的Location，分别通过 Document.location和Window.location 访问。
请注意，docuemnt的location属性也引用的是location对象。`window.location === document.location 输出true
2、Location的属性
Location 接口不继承任何属性，但是实现了那些来自 URLUtils 的属性。
设置或获取整个 URL 为字符串。包含整个URL的一个DOMString
设置或获取 URL 的协议部分。包含URL对应协议的一个DOMString，最后有一个":"。
设置或获取 location 或 URL 的 hostname 和 port 号码。包含了域名的一个DOMString，可能在该串最后带有一个":"并跟上URL的端口号。
包含URL域名的一个DOMString。
设置或获取与 URL 关联的端口号码。包含端口号的一个DOMString。
设置或获取对象指定的文件名或路径。包含URL中路径部分的一个DOMString，开头有一个“/"。
设置或获取 href 属性中跟在问号后面的部分。包含URL参数的一个DOMString，开头有一个“?”。
设置或获取 href 属性中在井号“#”后面的分段。包含块标识符的DOMString，开头有一个“#”。
包含URL中域名前的用户名的一个DOMString。
包含URL域名前的密码的一个 DOMString。
包含页面来源的域名的标准形式DOMString。
3、Location的举例说明
var url = document.createElement('a');
url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';
console.log(url.href); // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
console.log(url.protocol); // https:
console.log(url.host); // developer.mozilla.org
console.log(url.hostname); // developer.mozilla.org
console.log(url.port); // (blank - https assumes port 443)
console.log(url.pathname); // /en-US/search
console.log(url.search); // ?q=URL
console.log(url.hash); // #search-results-close-container
console.log(url.origin); // https://developer.mozilla.org4、Location的方法
Location没有继承任何方法，但实现了来自URLUtils的方法。
加载给定URL的内容资源到这个Location对象所关联的对象上。
重新加载来自当前 URL的资源。他有一个特殊的可选参数，类型为 Boolean，该参数为true时会导致该方法引发的刷新一定会从服务器上加载数据。如果是 false或没有制定这个参数，浏览器可能从缓存当中加载页面。
用给定的URL替换掉当前的资源。与 assign() 方法不同的是用 replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面。
返回一个DOMString，包含整个URL。 它和读取URLUtils.href的效果相同。但是用它是不能够修改Location的值的。
5、Location的总结
| 属性 | 描述 |
| hash | 设置或获取 href 属性中在井号“#”后面的分段。 |
| host | 设置或获取 location 或 URL 的 hostname 和 port 号码。 |
| hostname | 设置或获取 location 或 URL 的主机名称部分。 |
| href | 设置或获取整个 URL 为字符串。 |
| pathname | 设置或获取对象指定的文件名或路径。 |
| port | 设置或获取与 URL 关联的端口号码。 |
| protocol | 设置或获取 URL 的协议部分。 |
| search | 设置或获取 href 属性中跟在问号后面的部分。 |
【参考资料】
MDN Web文档Location接口：https://developer.mozilla.org/zh-CN/docs/Web/API/Location