ES6模板字符串

1.模板字符串（template string）含义：

ES6新出的一种新型的字符串字面量的语法，是一种能在字符中内嵌表达式的字符串字面量（ string literal ）。模板字符串在早期的Harmony提案中称之为半字面量(Quasi Litaral),现已更名为模板字符串。

2.用法：

1）模板字符串是增强版的字符串，使用了反引号（`）来代替普通字符串的单引号或者双引号来标示，它主要是解决了字符串繁琐和不方便的问题。

早期的字符串（繁琐，不方便）：

         var template = {
	string:"yyq",
		old:'23'
	}
	var str = '<a href="javaScript:;">' 
		 + "A <strong>" + template.string + "</strong> "
		 +"uses back ticks instead of double quotes or single quotes. The template string can contain place holders, which use the <em>${}</em> syntax. </a>"
	$('#box').append(str);

字符串模板：

        //模板字符串
	var str2 = `<a href="javaScript:;">
		   A <strong>${ template.string }
		   uses back ticks instead of double quotes or single quotes. The template string can contain place holders, which use the <em>${template.old}</em> syntax. </a>`;
	$('#box').append(str2);

以上，将变量template.string和template.old放到字符串中，明显的发现，字符串模板更加的简便。

其中更让我们觉得简便的例子（错误消息提示）：

       //模板字符串的起作用
	function error(userName , action ){
		if(!user.hasPrivilege(action)){
			throw new Error(
				`用户${userName}违背授权执行${action}操作!`
			);
		}
	}
        error('yyq' , '玩')

这个示例中，${userName}和${action}称为模板占位符。javaScript将userName和action的值插入到最终生成的字符串中。

2）模板占位符中的代码可以是任意的javaScript表达式，所以函数调用，模板字符串嵌套（模板套构），变量等都可以。如果是个对象则会自动调用toString方法，如果大括号内是一个变量，则改变量必须声明，否则报错。

需要注意的地方：

如果你在模板字符串中嵌套另一个模板字符串，必须使用反斜杠进行转意，‘ \` ’等价与' ` '.并且在模板字符串中引用$和{}，无论怎么用都必须使用反斜杠进行转义。在模板字符串中，可以多行书写，模板字符串中所有的空格、新行、缩进，都会原样输出在生成的字符串中。

        var str = 'return' + '`Hello,${name}`';
	var fn = new Function( 'name' , str);
	console.log(fn('dlj'));

	var old = 23;
	var string = `Hello,${place}..
		.\`只是为了凑字${old}\``;
	console.log(string);

3. 模板实例：

在模板字符串中放置一个常规模板，该模板使用<%.......%>放置javaScript代码，使用<%= .......... %>放置javaScript表达式（此处使用了baidu Template编译该模板字符串）

         var arry = ['a','s','d','f','g','h','k'];
	
	var template =`
			<ul>
			  <% for(var i=0; i < 7; i++) { %>
			    <li><%= arry[i] %></li>
			  <% } %>
			</ul>
			`;

	$('#box').append(baidu.template(template));

4.标签模板：

标签模板不是一种模板，实质上是指一种函数的特殊调用。

       //标签模板
	alert`123`;
	//等价
	alert(123);

标签指的就是函数，紧跟其后的模板则是其参数

        var a = 10;
	var b = 20;
	var tag = function(){
		console.log(arguments);//[Array[3], 30, 10]
	};
	tag `${a+b}大于${b-a}`
	//等同于
	//tag(arry['','大于',''] , 30 ,10)
	// function tag(stringArr,value1,value2...){}

tag的第一个参数是数组，内容是没有变量替换的部分，后面的参数为替换变量的值。

利用函数进行还原

      //创建一个函数还原输入的模板字符串
	function tagBack(string){
		var result = "";
		var i = 0;
		while(i < string.length){
			result += string[i++];
			if(i < arguments.length){
				result += arguments[i];
			}
		}
		return result;
	}
	console.log(tagBack `得到${a+b}大于${b-a}`);