URLSearchParams 介面定義處理 URL 參數串

標籤：動手   split   value   boolean   tostring   function   編程   文法   city   

基本使用方法如下

/** URLSearchParams屬性* @文法：new URLSearchParams(parameter);*/(function(){    var str = "http://www.domain.com/?user=Alan&id=123&id=456";    var searchParams = new URLSearchParams(str);    // let...of 文法（迭代對象）    for(let p of searchParams){        // console.log(p);    }/** URLSearchParams.append()* @添加新的key/value到URL中*/    searchParams.append("city", encodeURIComponent("深圳"));/** URLSearchParams.has()* @查詢是否存在,返回一個boolean值*/    searchParams.has("id");     // true/** URLSearchParams.get()* @返回相關聯的第一個值*/    searchParams.get("id");     // 123/** URLSearchParams.getAll()* @返回所有相同key的值*/    searchParams.getAll("id");  // ["123", "456"]/** URLSearchParams.set()* @設定key的value值,如果有多個,刪除其他的*/    searchParams.set("id", "789");/** searchParams.delete()* @刪除所有參數列表key與value值,重複的key都被刪除*/    searchParams.delete("id");/** searchParams.entries()* @返回所有索引值對key/value*/    for(let pair of searchParams.entries()){        console.log(pair[0]+ ‘, ‘+ pair[1]);     }/** searchParams.keys()* @返回所有鍵key*/    for(let key of searchParams.keys()){        console.log(key);     }/** searchParams.values()* @返回所有值*/    for(let value of searchParams.values()) {        console.log(value);    }/** searchParams.toString()* @返回修改過的URL*/    searchParams.toString();    console.log(searchParams.toString());}());

JS 編寫函數從下面的 URL 串中解析出所有的參數

http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&d&enabled

期望的返回結果格式如下：

{  user: ‘anonymous‘,  id: [123, 456],     // 重複出現的 key 要組裝成數組，能被轉成數位就轉成數字類型  city: ‘北京‘,        // 中文  enabled: true,      // 未指定值的 key 約定值為 true}

謀定而後動，動手前一定要搞清楚問題。怎樣才算是把問題搞清楚了？要清楚輸入的特徵，是否會出現各種奇怪的輸入

防禦性編程,檢測是否為字串

function parse(str){        if(typeof str !== "string"){            return;        }        var paramObj = {};        var decode = decodeURIComponent(str);   // 先解碼        var parsePart = decode.split("?#")[decode.split("?#").length-1];    // 截斷不需要部分        var paramArr = parsePart.split("&");            for(var i = 0; i < paramArr.length; i++){            var tmp = paramArr[i].split("=");            var key = tmp[0];                           var value = tmp[1] || true;                 // console.log("關鍵字是:" + key, "值是:" + value);            if(typeof paramObj[key] === "undefined"){                paramObj[key] = value;            }else{                var newValue = paramObj[key] + "," + value;     // 有多個重複的先連接字串,然後才分割開                paramObj[key] = newValue.split(",");            }        }        // console.log(paramObj);    }

 

URLSearchParams 介面定義處理 URL 參數串