深入了解模板字符串（ES6）

深入了解模板字符串

这次将给大家带来模板字符串用法和几大注意要点

用法

模板字符串由一对反引号标识符组成，${}为取值表达式

let name = "Tony";
let age = 18 ;
name+"今年"+age+"岁" ;
//"Tony今年18岁"
等价于
`${name}今年${age}岁了`;
//"Tony今年18岁"

我们用传统写法表达字符串和变量的拼接写法非常冗余，ES6的模板字符串就可以很好的解决这个问题

要点

• 模板字符串中如需用反引号，需要用\转义

let name = "Tony";
let age = 18;
`\`${name}\`今年${age}岁`;
//"`Tony`今年18岁"

• 如果大括号里面的值不是字符串，则按照一般规则装换为字符（toString方法），特别注意的是，如果大括号里面是对象，则将返回[object Object],如下面代码

let obj = {};
`abc${obj}`;
//"abc[object Object]"

• 大括号里面就是执行JavaScript代码，因此如果大括号内部是字符串，就会将原样输出

let x = 1;
let y = 2;

大括号里面是表达式，计算后输出
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

大括号里面是字符串，将原样输出
`${"Hello World"}`
//"Hello World"

• 模版字符串所有的空格和缩进都会被保留在输出之中

let newLis = "<li>1:aaa</li>"
let ul = 
`
<ul>
${newLis}
</ul>
`;
/*
<ul>
  <li>1:aaa</li>
</ul>
*/

• 模板字符串可嵌套

let name = "Tony";
let age = 18 ;
`${name}今年${`${age}`}岁了`;
//"Tony今年18岁了"

• 标签模板，函数名+模板字符串，其实就是另外一种调用函数的表达

function fn() {
    console.log(arguments);
}
let name = "Tony";
let age = 18 ;
fn`${name}今年${age}岁了`;
//{ '0': [ '', '今年', '岁了' ], '1': 'Tony', '2': 18 }

等同于
fn([ '', '今年', '岁了' ], 'Tony', 18);
//{ '0': [ '', '今年', '岁了' ], '1': 'Tony', '2': 18 }

返回的arguments第一个属性包含了所有的除了变量外的部分，变量在后面逐个显示；注意第一个数组个数总是要比变量多一个，可以把${name}今年${name}岁了看成一条线，把每个变量${name} ${name}看成是一个分割点，分割的结果总是分割点多一份；如果变量位于首尾的时候会分割出一个空字符串'';

---

总结

• 模板字符串中如需用反引号，需要用\转义
• 模版字符串所有的空格和缩进都会被保留在输出之中
• 字符串里可以嵌套变量，大括号里内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性，函数
• 模板字符串可嵌套
• 使用标签模板，注意arguments第一个数包含所有非变量部分，且数量总比变量多一个

---

ES6总结系列参考自阮一峰大神的《ES6入门教程》