解析 URL 參數爲對象和字符串模板

前言

本文章是基於 死磕36個手寫題寫出來的，感興趣的能夠去看一下呀！

生命不息，代碼不止！讓咱們開始唄

解析 URL 參數爲對象

url是統一資源定位符，對能夠從互聯網上獲得的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標準資源的地址。互聯網上的每一個文件都有一個惟一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎麼處理它。

普通解法

function urlSearch(href) {
  let name, value;
  let str = href; //取得整個地址欄
  let num = str.indexOf("?");
  str = str.substr(num + 1); //取得全部參數
  let arr = str.split("&"); //各個參數放到數組裏
  let json = {};
  for (let i = 0; i < arr.length; i++) {
    num = arr[i].indexOf("=");
    if (num > 0) {
      name = arr[i].substring(0, num);
      value = arr[i].substr(num + 1);
      json[name] = value;
    }
  }
  return json;
}
複製代碼

正則解法

function parseParam(url) {
    const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 將 ? 後面的字符串取出來
    //exec() 方法用於檢索字符串中的正則表達式的匹配。
    const paramsArr = paramsStr.split('&'); // 將字符串以 & 分割後存到數組中
    let paramsObj = {};
    // 將 params 存到對象中
    paramsArr.forEach(param => {
        if (/=/.test(param)) { // 處理有 value 的參數
            let [key, val] = param.split('='); // 分割 key 和 value
            val = decodeURIComponent(val); // 解碼
            val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判斷是否轉爲數字
               //test() 方法用於檢測一個字符串是否匹配某個模式.
            if (paramsObj.hasOwnProperty(key)) { // 若是對象有 key，則添加一個值
                paramsObj[key] = [].concat(paramsObj[key], val);
                //concat() 方法用於鏈接兩個或多個數組。
                //該方法不會改變現有的數組，而僅僅會返回被鏈接數組的一個副本。
            } else { // 若是對象沒有這個 key，建立 key 並設置值
                paramsObj[key] = val;
            }
        } else { // 處理沒有 value 的參數
            paramsObj[param] = true;
        }
    })
    
    return paramsObj;
}
複製代碼

注：split() 方法用於把一個字符串分割成字符串數組。

語法 stringObject.split(separator,howmany)

• separator：必需。字符串或正則表達式，從該參數指定的地方分割 stringObject。
• howmany 可選。該參數可指定返回的數組的最大長度。若是設置了該參數，返回的子串不會多於這個參數指定的數組。若是沒有設置該參數，整個字符串都會被分割，不考慮它的長度。

返回值

1. 一個字符串數組。該數組是經過在 separator 指定的邊界處將字符串 stringObject 分割成子串建立的。返回的數組中的字串不包括 separator 自身。

2. 可是，若是 separator 是包含子表達式的正則表達式，那麼返回的數組中包括與這些子表達式匹配的字串（但不包括與整個正則表達式匹配的文本）。

• 註釋：若是把空字符串 ("") 用做 separator，那麼 stringObject 中的每一個字符之間都會被分割。

• 註釋：String.split() 執行的操做與 Array.join 執行的操做是相反的。

我有話說 是否是看了正則解法有點蒙，沒事我也蒙，因此我就良心的準備了普通解法，儂只要對照着看一下，而後百度一下正則看一下注釋，看懂七七八八應該差很少，加油加油。

字符串模板

字符串模板是針對大批量、多頻率操做dom的解決方案，好比咱們要根據數據動態建立一個多嵌套的元素並將其插入到頁面中，若是咱們採用常規建立dom元素的方式進行插，代碼量會極其龐大，

因此這裏咱們提供了一個模板字符串的函數來生成這個模板並最後插入到頁面中

function render(template, data) {
    const reg = /\{\{(\w+)\}\}/; // 模板字符串正則
    if (reg.test(template)) { // 判斷模板裏是否有模板字符串
        const name = reg.exec(template)[1]; // 查找當前模板裏第一個模板字符串的字段
        template = template.replace(reg, data[name]); // 將第一個模板字符串渲染
        return render(template, data); // 遞歸的渲染並返回渲染後的結構
    }
    return template; // 若是模板沒有模板字符串直接返回
}
    ·
複製代碼

測試

let template = '我是{{name}}，年齡{{age}}，性別{{sex}}';
let person = {
    name: '布蘭',
    age: 12
}
render(template, person); // 我是布蘭，年齡12，性別undefined

複製代碼

注：test() 方法用於檢測一個字符串是否匹配某個模式.

語法 RegExpObject.test(string). string 必需。要檢測的字符串。

返回值 若是字符串 string 中含有與 RegExpObject 匹配的文本，則返回 true，不然返回 false。

說明 調用 RegExp 對象 r 的 test() 方法，併爲它傳遞字符串 s，與這個表示式是等價的：(r.exec(s) != null)。

總結

好啦好啦，到這裏差很少就講完了，但是還有許多沒發現的知識點，但願你們多多指出。加油加油！