12-字符串扩展-模板字符串

一、模板字符串

传统字符串模板:

let uls = document.getElementById("uls");
let str = '';
let a = "这是变量a";
let p="这是变量p"
str = '
  • ' + ''+a+'' + '

    '+p+'

    ' + '
  • ' uls.innerHTML += str;

    ES6字符串模板:(格式:`${变量、逻辑判断....}`

    {
        let userName="zhansan";
        let userPwd = "admin";
        console.log(`${userName} ${userPwd}`)  //zhansan admin
    }
    
    {
        let num1 = 11;
        let num2 = 12;
        console.log(`${num1+num2}`)   //23
    }
    
    {
        let num1 = 11;
        let num2 = 12;
        console.log(`${num1 > num2 ? 'num1大':'num2大'}`)   //num2大
    }
    

    改进传统字符串模板:

    {
        let uls = document.getElementById("uls");
        let str = '';
        let a = "这是一个变量a";
        let p = "这是一个变量p";
        str = `
  • ${a}

    ${p}

  • ` uls.innerHTML += str; }
    二、标签模板

    模板字符串的功能,不仅仅是上面这些。它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能。

    {
        alert(678)
        alert`123`   //  ()==``
    }
    

    标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。
    但是,如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。

    {
        let obj = {userName:'zhangsan',userAge:18}
        function fn(a,b,c){
            console.log(a);
            console.log(b);
            console.log(c)
        }
        fn`${obj.userName}${obj.userAge}`
        //b  ==>zhansan
        //c  ==>18
        //a  ===> ["", "", "", raw: Array(3)]
    
        fn`admin${obj.userName}${obj.userAge}list`
        //b  ==>zhansan
        //c  ==>18
        //a  ===> ["admin", "", "list", raw: Array(3)]
    }
    

    你可能感兴趣的:(12-字符串扩展-模板字符串)