乐趣区

关于javascript:URLSearchParams-api简单解析url参数

jiezi

先上代码 

var url = new URL("https://www.baidu.com/s?wd=%E2%80%9C%E5%8D%B0%E5%BA%A6%E5%88%B6%E9%80%A0%E2%80%9D%E6%8C%91%E6%88%98%E2%80%9C%E4%B8%AD%E5%9B%BD%E5%88%B6%E9%80%A0%E2%80%9D%EF%BC%9F&rsv_idx=2&tn=baiduhome_pg&ie=utf-8&rsv_pq=a030fb450001560a&oq=URLSearchParams&rsv_t=ffef3M86%2BydHr8QY4E1XqDq8ehTgIeB45QYM7a10slr%2FI5okYJlF8yryJ2KE2TLcbPs6&rqid=a030fb450001560a&rsf=b387b176e09280bbdef0d2f1a2c0e56e_1_15_11&rsv_dl=0_right_fyb_pchot_20811&sa=0_right_fyb_pchot_20811");

var searchParams3 = new URLSearchParams(url.search);

for(var pair of searchParams3.entries()) {console.log('=================');
    console.log(pair[0]+ ','+ pair[1]);
}

输入后果

URLSearchParams

  • 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 此对象蕴含了键 / 值对的所有值。

两个问题

  1. entries，keys,values 办法返回的是遍历器，不是数组
  2. URLSearchParams 不会解析残缺 URL，然而如果字符串起始地位有 ? 的话会被去除。他是解析 url 查问字符串的

看代码 

var paramsString1 = "http://example.com/search?query=%40";
var searchParams1 = new URLSearchParams(paramsString1);

searchParams1.has("query"); // false
searchParams1.has("http://example.com/search?query"); // true

searchParams1.get("query"); // null
searchParams1.get("http://example.com/search?query"); // "@" (equivalent to decodeURIComponent('%40'))

var paramsString2 = "?query=value";
var searchParams2 = new URLSearchParams(paramsString2);
searchParams2.has("query"); // true

var url = new URL("http://example.com/search?query=%40");
var searchParams3 = new URLSearchParams(url.search);
searchParams3.has("query") // true

如上，“http://example.com/search?query” 会被当做键值对的一个 key 来解析

示例起源 MDN

退出移动版