解析 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)。

总结

好啦好啦，到这里差很少就讲完了，但是还有许多没发现的知识点，但愿你们多多指出。加油加油！