1. 程式人生 > >URLSearchParams 接口定義處理 URL 參數串

URLSearchParams 接口定義處理 URL 參數串

-1 基本使用 第一個 define 一個 || param 新的 lan

基本使用方法如下

/*
* 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 參數串