ES6——模板字符串

一、背景

1.传统用法：

之前我们也可以使用JavaScript输出模版字符串，通常是下面这样的：

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

这样的传统做法需要使用大量的“”（双引号）和+来拼接才能得到我们需要的模版。但是这样是十分不方便的。并且存下一下几点缺陷：

• 传统的字符串拼接不能正常换行
• 传统的字符串拼接不能友好的插入变量
• 传统的字符串拼接不能友好的处理单引号、双引号互相嵌套的问题。

2.ES6用法：

ES6中提供了模版字符串，用 `（反引号：windows键盘英文输入法下tab键上面那个键）标识，用${}将变量括起来 。上面的例子可以用模版字符串写成下面这样：

$("#result").append(
	`He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
);

二、使用

1、传统拼接html字符串

var html = '<ul>'+
'<li>1</li>'+
'<li>2</li>'+
'</ul>'

2、ES6拼接html字符串

var html = `<ul>
<li>1</li>
<li>2</li>
</ul>`

3、支持变量的嵌套，甚至功能更加强大

var s1 = `hello vue`;
`xxx ${s1} xxx` //xxx hello vue xxx

模板字符串中还可以嵌套另一个模板字符串。

//嵌套模板字符串
const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;

上面的代码就是拼接变量，用${data.province}替换了+ ’ data.province ’ +
这都很简单，但在项目中的需求有的时候想在字符串拼接里面写入循环啊、函数啊之类的。

4、 {}里面可以插入任何js表达式，可以是一个对象、数组，甚至是一个函数。

对象或数组会调用它们的tostring()方法

• 对象

  //对象
  var obj = {a:1,b:2};
  `xxx ${obj} xxx`//xxx [object Object] xxx
  

• 数组

  //数组
  var arr = [1,2,3];
  `xxx ${arr} xxx`//xxx 1,2,3 xxx
  

• 函数
  分两种情况：

  • 函数本身，同样会调用它的tostring()方法

  • 直接调用函数，则输出函数的返回值

    var fn1 = function(){
    console.log('hello vuex');
    }
    var fn2 = function(){
    return 'hello vue-router'
    }
    `xxx ${fn1}`//xxx function fn(){....}
    `xxx ${fn1()}`//xxx underfind
    `xxx ${fn2()}`//xxx hello vue-router