1、encodeURIComponent
网址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
encodeURIComponent()
函数通过将一个,两个,三个或四个表示字符的UTF-8编码的转义序列替换某些字符的每个实例来 UTF-8 编码 URI(对于由两个“代理”字符组成的字符而言,将仅是四个转义序列) 。
不转义字符:A-Z a-z 0-9 - _ . ! ~ * ' ( )
encodeURIComponent()
和encodeURI
有以下几个不同点:var set1 = ";,/?:@&=+$"; // 保留字符 var set2 = "-_.!~*'()"; // 不转义字符 var set3 = "#"; // 数字标志 var set4 = "ABC abc 123"; // 字母数字字符和空格 console.log(encodeURI(set1)); // ;,/?:@&=+$ console.log(encodeURI(set2)); // -_.!~*'() console.log(encodeURI(set3)); // # console.log(encodeURI(set4)); // ABC%20abc%20123 (the space gets encoded as %20) console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24 console.log(encodeURIComponent(set2)); // -_.!~*'() console.log(encodeURIComponent(set3)); // %23 console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (the space gets encoded as %20)
2、URLSearchParams
网址:https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams
URLSearchParams接口定义了一些实用的方法来处理URL的查询字符串。
URLSearchParams.append() //插入一个指定的键/值对作为新的搜索参数。
URLSearchParams.delete() //从搜索参数列表里删除指定的搜索参数及其对应的值
URLsearchParams.entries() //返回一个
iterator
可以遍历所有键/值对的对象。URLsearchParams.get() //获取指定搜索参数的第一个值。
URLsearchParams.getAll() //获取指定搜索参数的所有值,返回是一个数组。
URLsearchParams.has() //返回
Boolean
判断是否存在此搜索参数。URLsearchParams.keys() //返回
iterator
此对象包含了键/值对的所有键名。URLsearchParams.set() //设置一个搜索参数的新值,假如原来有多个值将删除其他所有的值。
URLsearchParams.sort() //按键名排序。
URLsearchParams.toString() //返回搜索参数组成的字符串,可直接使用在URL上。
URLsearchParams.values() //返回
iterator
此对象包含了键/值对的所有值。
使用:
// 如果需要支持较低版本的 PC 浏览器,需要额外安装和引用 polyfill: // npm install url-search-params-polyfill --save // import 'url-search-params-polyfill'; // $ npm install --save url-search-params // import URLSearchParams from 'url-search-params'; const urlSearchParams = new URLSearchParams();
例子:
var paramsString = "q=URLUtils.searchParams&topic=api" var searchParams = new URLSearchParams(paramsString); for (let p of searchParams) { console.log(p); } searchParams.has("topic") === true; // true searchParams.get("topic") === "api"; // true searchParams.getAll("topic"); // ["api"] searchParams.get("foo") === null; // true searchParams.append("topic", "webdev"); searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev" searchParams.set("topic", "More webdev"); searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev" searchParams.delete("topic"); searchParams.toString(); // "q=URLUtils.searchParams"