[TOC] ## Location 对象 * `Location.href`:整个 URL。 * `Location.protocol`:当前 URL 的协议,包括冒号(`:`)。 * `Location.host`:主机,包括冒号(`:`)和端口(默认的80端口和443端口会省略)。 * `Location.hostname`:主机名,不包括端口。 * `Location.port`:端口号。 * `Location.pathname`:URL 的路径部分,从根路径`/`开始。 * `Location.search`:查询字符串部分,从问号`?`开始。 * `Location.hash`:片段字符串部分,从`#`开始。 * `Location.username`:域名前面的用户名。 * `Location.password`:域名前面的密码。 * `Location.origin`:URL 的协议、主机名和端口。 ## URL 的编码和解码 ### encodeURI() 转义中文等参数时,可直接用于整个url ``` encodeURI('http://www.example.com/q=春节') // "http://www.example.com/q=%E6%98%A5%E8%8A%82" ``` ### encodeURIComponent() 把 url 当作参数时,或转义参数时 不能直接用于转义整个url ``` encodeURIComponent('春节') // "%E6%98%A5%E8%8A%82" encodeURIComponent('http://www.example.com/q=春节') // "http%3A%2F%2Fwww.example.com%2Fq%3D%E6%98%A5%E8%8A%82" ``` ### decodeURI() ``` decodeURI('http://www.example.com/q=%E6%98%A5%E8%8A%82') // "http://www.example.com/q=春节" ``` ### decodeURIComponent() ``` decodeURIComponent('%E6%98%A5%E8%8A%82') // "春节" ``` ### URL 跳转 ``` var url1 = new URL('index.html', 'http://example.com'); url1.href // "http://example.com/index.html" var url2 = new URL('page2.html', 'http://example.com/page1.html'); url2.href // "http://example.com/page2.html" var url3 = new URL('..', 'http://example.com/a/b.html') url3.href // "http://example.com/" ``` 解析url ``` var url = new URL('http://user:passwd@www.example.com:4097/path/a.html?x=111#part1'); url.href // "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1" url.protocol // "http:" url.hostname // "www.example.com" url.host // "www.example.com:4097" url.port // "4097" url.origin // "http://www.example.com:4097" url.pathname // "/path/a.html" url.search // "?x=111" url.searchParams // URLSearchParams {} url.hash // "#part1" url.password // "passwd" url.username // "user" ``` ## URLSearchParams ``` // 方法一:传入字符串 var params = new URLSearchParams('?foo=1&bar=2'); // 等同于 var params = new URLSearchParams(document.location.search); // 方法二:传入数组 var params = new URLSearchParams([['foo', 1], ['bar', 2]]); // 方法三:传入对象 var params = new URLSearchParams({'foo' : 1 , 'bar' : 2}); ``` 转为url 参数 当参数中有汉字时,会进行自动转义 ``` var params = new URLSearchParams({'foo': '你好'}); params.toString() // "foo=%E4%BD%A0%E5%A5%BD" ``` ### .toString() ### append() 改方法不会检查是否存在重复的键名 ``` var params = new URLSearchParams({'foo': 1 , 'bar': 2}); params.append('foo', 3); params.toString() // "foo=1&bar=2&foo=3" ``` ### delete() `params.delete('bar'); ` ### has() `params.has('bar') // true ` ### set() 存在则覆盖,否则添加 `params.set('foo', 2); ` ### get()/getAll() 存在返回值,不存在返回`null` ### sort() 按`Unicode`排序 ### keys() / values() / entries() 返回遍历器对象 ``` var params = new URLSearchParams('a=1&b=2'); for(var p of params.keys()) { console.log(p); } // a // b for(var p of params.values()) { console.log(p); } // 1 // 2 for(var p of params.entries()) { console.log(p); } // ["a", "1"] // ["b", "2"] ``` ### 实例 #### 快速获取当前参数值 ``` var url = new URL(window.location); var foo = url.searchParams.get('foo') || 'somedefault'; ``` #### 快速并接post 的body ``` const params = new URLSearchParams({foo: 1, bar: 2}); fetch('https://example.com/api', { method: 'POST', body: params }).then(...) ```