用ES6中的模板字符串实现在字符串中添加变量和字符串换行

什么是模板字符串

它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

例如：

var str1 = '你好吗' +
    '李华';
    
var str2 = `你好吗
李华`;

console.log(str1);
console.log(str2);

输出结果：

注意：上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

上面代码中，所有模板字符串的空格和换行，都是被保留的，比如

• 标签前面会有一个换行。如果你不想要这个换行，可以使用trim方法消除它。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

模板字符串中嵌入变量，需要将变量名写在${}之中。

var uname = '李华';

console.log(`你好 ${
      
      uname} `);

输出结果：

大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

var x = 1;
var y = 2;
console.log(`${
      
      x}+${
      
      y}=${
      
      x+y}`);

var obj = {
    
    
    uname:'李华',
    age:18
}

console.log(`${
      
      obj.uname}的年龄是${
      
      obj.age}`);

输出结果：

模板字符串之中还能调用函数。

function fn() {
    
    
  return "Hello World";
}

`foo ${
      
      fn()} bar`
// foo Hello World bar

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。
如果模板字符串中的变量没有声明，将报错。

// 变量place没有声明
var msg = `Hello, ${
      
      place}`;
// 报错

由于模板字符串的大括号内部，就是执行JavaScript代码，因此如果大括号内部是一个字符串，将会原样输出。

`Hello ${
      
      'World'}`
// "Hello World"