前言

本文章是基于死磕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 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。 返回值

一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。

但是，如果 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)。

总结

好啦好啦，到这里差不多就讲完了，可是还有许多没发现的知识点，希望大家多多指出。加油加油！

解析 URL 参数为对象和字符串模板

前言

解析 URL 参数为对象

字符串模板

总结