查询字符串参数解析

401 阅读1分钟

导言

今天又学习到了一个易考点

查询search 解析为对象

把下列字符串的参数解析为一个对象
let search = "?query=hello&period=2&ka=sel-scale-2"

let search = "?query=hello&period=2&ka=sel-scale-2";
function Parse(search) {
    let obj = {};
    let s = search.slice(1);
    let s_arr = s.split('&');
    s_arr.forEach((para) => {
        let arr_para = para.split('=');
        obj[arr_para.shift()] = arr_para.pop();
    })
    return obj;
    let search_o = Parse(search);
    console.log(search_o); 
    /**
    {
      query: 'hello',
      period: '2',
      ka: 'sel-scale-2'
    }
    /
}

参数对象解析为search

let obj = { name : 'zs', like : 'play' } 解析为 search 字符串

let obj = {
    name : 'zs',
    like : 'play'
}
function Stringfy(obj) {
    let arr = [];
    Object.keys(obj).forEach(key => {
        let s = key + '=' +obj[key];
        arr.push(s)
    })
    return "?" + arr.join('&')
}
let s = Stringfy(obj);
console.log(s); //?name=zs&like=play  

URLSearchParams

  • has():返回一个布尔值,表示是否具有某个参数
  • get():返回指定参数的第一个值
  • getAll():返回一个数组,成员是指定参数的所有值
  • set():设置指定参数
  • delete():删除指定参数
  • append():在查询字符串之中,追加一个键值对
  • toString():返回整个查询字符串

额,貌似,js自己带了一个可以解析 location.search的 API

var paramsString = 'q=URLUtils.searchParams&topic=api';
var searchParams = new URLSearchParams(paramsString);

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"