详解URLSearchParams-Toy模板网

这篇具有很好参考价值的文章主要介绍了详解URLSearchParams。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

  <script>
    // URLSearchParams API 用于处理 URL 之中的查询字符串，即？之后的部分。
    // 没有部署这个API的浏览器，可以用url-search-params这个垫片库。
    var paramsString = 'q=URLUtils.searchParams&topic=api';
    var searchParams = new URLSearchParams(paramsString);
    // URLSearchParams有以下方法，用来操作某个参数。
    // has()：返回一个布尔值，表示是否具有某个参数
    // get()：返回指定参数的第一个值
    // getAll()：返回一个数组，成员是指定参数的所有值
    // set()：设置指定参数
    // delete()：删除指定参数
    // append()：在查询字符串之中，追加一个键值对
    // toString()：返回整个查询字符串

    searchParams.has('topic') // true
    searchParams.get('topic') // "api"
    searchParams.getAll('topic') // ["api"]

    searchParams.get('foo') // null，注意Firefox返回空字符串
    searchParams.set('foo', 2);
    searchParams.get('foo') // 2

    searchParams.append('topic', 'webdev');
    searchParams.toString() // "q=URLUtils.searchParams&topic=api&foo=2&topic=webdev"

    searchParams.append('foo', 3);
    searchParams.getAll('foo') // [2, 3]

    searchParams.delete('topic');
    searchParams.toString() // "q=URLUtils.searchParams&foo=2&foo=3"


    // URLSearchParams还有三个方法，用来遍历所有参数。
    // keys()：遍历所有参数名
    // values()：遍历所有参数值
    // entries()：遍历所有参数的键值对
    // 上面三个方法返回的都是Iterator对象。

    var searchParams = new URLSearchParams('key1=value1&key2=value2');

    for (var key of searchParams.keys()) {
      console.log(key);
    }
    // key1
    // key2

    for (var value of searchParams.values()) {
      console.log(value);
    }
    // value1
    // value2

    for (var pair of searchParams.entries()) {
      console.log(pair[0] + ', ' + pair[1]);
    }
    // key1, value1
    // key2, value2
    // 在Chrome浏览器之中，URLSearchParams实例本身就是Iterator对象，与entries方法返回值相同。所以，可以写成下面的样子。

    for (var p of searchParams) {
      console.log(p);
    }

    // 下面是一个替换当前URL的例子。
    // URL: https://example.com?version=1.0
    var params = new URLSearchParams(location.search.slice(1));
    params.set('version', 2.0);
    window.history.replaceState({}, '', `${location.pathname}?${params}`);
    // URL: https://example.com?version=2.0


    // URLSearchParams实例可以当作 POST 数据发送，所有数据都会 URL 编码。
    let params = new URLSearchParams();
    params.append('api_key', '1234567890');

    fetch('https://example.com/api', {
      method: 'POST',
      body: params
    }).then()


    // DOM的a元素节点的searchParams属性，就是一个URLSearchParams实例。
    var a = document.createElement('a');
    a.href = 'https://example.com?filter=api';
    a.searchParams.get('filter') // "api"


    // URLSearchParams还可以与URL接口结合使用。
    var url = new URL(location);
    var foo = url.searchParams.get('foo') || 'somedefault';
  </script>