1.URLSearchParams()
语法 ：var URLSearchParams = new URLSearchParams(init);
构造器创建并返回一个新的URLSearchParams 对象。 开头的'?' 字符会被忽略。
参数init（可选） 一般时一个 String
返回：一个 URLSearchParams 实例。
const baseUrl='www.woaini.com';
const params = new URLSearchParams();
params.set('damage', 1);
params.set('p', 2);
const _url=`${baseUrl}?${params.toString()}`
//得到一个新的 URLSearchParams 实例 _url。
1.1. URLSearchParams.get()
get()方法返回第一个与搜索参数对应的值。返回一个 String ；如果没找到，返回null.
//在页面https://example.com/?name=Jonathan&age=18 上
let params = new URLSearchParams(document.location.search.substring(1));
let name = params.get("name");
let age = parseInt(params.get("age"), 10);
let address = params.get("address");
1.1.2URLSearchParams.getAll()
以数组的形式返回与指定搜索参数对应的所有值。
let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));
//为foo参数添加第二个值
params.append('foo', 4);
console.log(params.getAll('foo')) //输出 ["1","4"].
1.2.URLSearchParams.has()
返回一个 Boolean 表示一个指定的键名对应的值是否存在。
varhasName= URLSearchParams.has(name)
//name键名 要查找的参数的键名。
示例
let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));
params.has('bar');
//true
1.3.URLSearchParams.values()
URLSearchParams.values()方法返回一个iterator（迭代器），该遍历器允许遍历对象中包含的所有值。这些值都是String对象。
// 创建一个测试用URLSearchParams对象
var searchParams = new URLSearchParams("key1=value1&key2=value2");
// 输出值
for(var value of searchParams.values()) {
console.log(value);
}
1.4URLSearchParams.append()
append() 是 URLSearchParams 接口的一个方法。可以插入一个新搜索参数。
URLSearchParams.append(name, value)
let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));//添加第二个foo搜索参数。
params.append('foo', 4);
//查询字符串变成: 'foo=1&bar=2&foo=4'
1.5 URLSearchParams.forEach()
方法forEach允许通过回调函数来遍历URLSearchParams实例对象上的键值对
searchParams.forEach(callback(value,key,searchParams));
// 创建URLSearchParams对象的实例对象，用于测试
var searchParams = new URLSearchParams("key1=value1&key2=value2");
let returnValue = searchParams.forEach(function(value, key,searchParams) {
console.log('打印:',value, key,searchParams);
});
console.log(' 输出返回值',returnValue)
1.6 URLSearchParams.entries()
返回一个iterator，允许遍历该对象中包含的所有键/值对。每一组键值对都是 String对象
var searchParams = new URLSearchParams("key1=value1&key2=value2");
for(var pair of searchParams.entries()) {
console.log('显示',pair ,pair[0]+ ', '+ pair[1]);
}
1.7URLSearchParams .values()
1.8 URLSearchParams.toString()
toString()方法 返回适用在URL中的查询字符串。
let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));
params.append('foo', 4);
console.log(params.toString());//Prints 'foo=1&bar=2&foo=4'.
1.9 URLSearchParams.set()
set()方法用于设置和搜索参数相关联的值。如果设置前已经存在匹配的值，该方法会删除多余的，如果将要设置的值不存在，则创建它
URLSearchParams.set(name, value)
1.10 URLSearchParams.sort()
对包含在此对象中的所有键/值对进行排序，并返回undefined。
排序顺序是根据键的Unicode代码点。该方法使用稳定的排序算法 (即，将保留具有相等键的键/值对之间的相对顺序)。
1.11 URLSearchParams.delete()
从搜索参数列表里删除指定的搜索参数及其对应的值。
URLSearchParams.delete(name)
2.url编码和解码
decodeURI()解码 URI。
decodeURIComponent()解码 URI 组件。
encodeURI()对 URI 进行编码。
encodeURIComponent()对 URI 组件进行编码。
escape() 在 1.5 版中已弃用。请使用 encodeURI() 或 encodeURIComponent() 代替。
unescape() 在 1.5 版中已弃用。请使用 decodeURI() 或 decodeURIComponent() 代替。
3.获取url相关
3.1、window.location.href(设置或获取整个 URL 为字符串)
var test = window.location.href;
alert(test);
// http://i.jb51.net/EditPosts.aspx?opt=1
3.2、window.location.protocol(设置或获取 URL 的协议部分)
var test = window.location.protocol;
alert(test);
// http:
3.3、window.location.host(设置或获取 URL 的主机部分)
var test = window.location.host;
alert(test);
// i.jb51.net
3.4、window.location.port(设置或获取与 URL 关联的端口号码)
var test = window.location.port;
alert(test);
返回：空字符(如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符)
3.5、window.location.pathname(设置或获取与 URL 的路径部分（就是文件地址）)
var test = window.location.pathname;
alert(test);
// /EditPosts.aspx
3.6、window.location.search(设置或获取 href 属性中跟在问号后面的部分)
var test = window.location.search;
alert(test);
//?opt=1
PS：获得查询（参数）部分，除了给动态语言赋值以外，我们同样可以给静态页面，并使用javascript来获得相信应的参数值。
3.7、window.location.hash(设置或获取 href 属性中在井号“#”后面的分段)
var test = window.location.hash;
alert(test);
//空字符(因为url中没有)
3.8.获取url上的参数。
结合1中的内容，即可。但1中的方法兼容性有限制，可以选择以下方法
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
// 这样调用： alert(GetQueryString("参数名1")); alert(GetQueryString("参数名2")); alert(GetQueryString("参数名3"));
或者
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
var Request = new Object();
Request = GetRequest();
// var id=Request["id"];
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request['参数1'];
// 参数2 = Request['参数2'];
// 参数3 = Request['参数3'];
// 参数N = Request['参数N'];
3.8、 其他方法
window.location.hostname; //返回www.xxx.com
之后会进行补充