我是 PHP 程序员

模板字面量，是允许嵌入表达式的字符串字面量。

他的语法结构是：`string ${expression} string`

1. 用反引号包括住整个模板字面量。

2. 表达式要用${}包括。

3. 要在模板字面量内使用反引号，需要用斜杠转义输出。

4. 支持输出多行模板字面量

5. 支持表达式

    var name = '李华';
    var age = 19;
    alert(`${name} 已经 ${age} 岁了 `);

    alert(`这里要输出一个反引号\``);

[object Object]

    alert(`这里要输出一个反引号：\``);

    alert(`
        hello!
        goodbye!
        nice to meet u!    `);

输出多行模板字面量时，换行处不需要手动输入\n转义符进行换行，编译器会自动识别字面量中的换行。

这有什么用呢？

当然你需要输入一大段json或者写一段html代码的时候，用多行模板字面量会非常的方便。

    /*输出一段html*/
    //注意：模板字符串内的正常单引号、双引号不需要转义
    const html=`
   <a href="">
        <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg" alt=""><span>京东超市</span>
   </a>
    `
    document.body.innerHTML=html;

除了常规变量以外，模板字面量还支持插入表达式。

  var a = 5;
    var b = 10;
    console.log(`十五 是 ${a + b} 而 
    不是 ${2 * a + b}.`);

模板字面量不仅支持简单运算符，还支持三目运算符。

    var a = 5;
    var b= 10;
    alert(`最大的是：${a>b? a:b}`);

将普通参数传入函数时，我们用圆括号包裹；

将模板字面量传入函数时，我们用反引号包裹。

    function add(){}

    add(1,2);
    add`1,2`

当我们将一个模板字面量传入一个函数，且这个函数有两个以上的
参数时，这两个参数会有默认意义。

第一个参数

第一个参数（非占位符）：

是以模板字面量中的${}即表达式为分隔符，分割模板字符串，只取字符串而不取表达式或者参数而构成的数组。

如：

    const template =`你好！${name}!`;

将template传入函数，那么函数的第一个参数就默认是['你好！','!',raw:Array(2)]

可以看见，除了“你好！”和“！”还有一个特殊的属性raw，这个raw并不是数组的成员，也就是说，你不能用arr[2]去访问到它。

把raw属性展开：

可以看到对转义符的处理，raw的属性跟arr1是不一样的。

string会识别转换转义符，而raw会将转义符再次转义成普通字符串，最后输出原样的字符串。

其他参数

第二个及以后的参数（占位符）

如果函数只有2个参数，而传入的模板字面量有多个占位符（表达式）时，
那么，第二个参数只能对应模板字面量中的第一个占位符（表达式）

    const name = '小明';
    const greet = '你好呀！';

    function show(arr, holder){
        console.log(holder);
    }

    show`${name} 给小红打招呼,说：“${greet}”`;

如果函数参数继续增加，那么则可以与占位符继续对应。

    const name = '小明';
    const greet = '你好呀！';

    function show(arr, holder1,holder2){
        console.log(holder1);
        console.log(holder1);
    }

    show`${name} 给小红打招呼,说：“${greet}”`;

可以使用剩余参数。

     const name = '小明';
    const greet = '你好呀！';

    function show(arr, ...holder){
        console.log(holder);
    }

    show`${name} 给小红打招呼,说：“${greet}”`;

 const name = '小明';
    const greet = '你好呀！';

    const tag=(arr, ...placeholder)=>
        arr.reduce( (pre,cur,index)=>
        pre + placeholder[index-1] +cur );
    
    var res = tag`${name} 给小红打招呼,说：“${greet}”`;
    console.log( res );

这有什么用？

占位符与非占位符分开输出，可以给他们分别加上css样式，达到强调某些文本的效果：

const name = '小明';
    const greet = '你好呀！';

    const tag=(arr, ...placeholder)=>
        arr.reduce( (pre,cur,index)=>
        pre + `<span style="color:red">${placeholder}</span>` +cur );
    
    var res = tag`${name} 给小红打招呼,说：“${greet}”`;
    console.log( res );
—————————————