ES6 模板字符串 模板字符串标记 概述

模板字符串

ES6之前处理字符串繁琐的两个方面

• 多行字符串

	var text = '红红火火恍恍惚惚'//这是一个正常声明的字符串
	//如果我们要换行怎么办
	var text = '红红火火恍\n恍惚惚'//一般我们是直接加一个/n
	var text = '红红火火\
	恍恍惚惚'					//或者加一个反斜杠也可以换行
	
	//再或者
	var txet = [
		'红红火火',
		'恍恍惚惚'
	].join['\n']//像这样
	

但是不管怎么写总显得比较繁琐

• 字符串拼接

	var text = '红红' + '火火' + '恍恍' + '惚惚'

这是正常的字符串拼接，但是如果拼接的多了，一个是麻烦再一个是代码的臃肿。

---

ES6中新增的

在ES6中提供了模板字符串的书写，可以非常方便的拼接，要做的，仅仅是将字符串的开始或结尾改成

``//反斜杠符号

	var text = `红红火火
	恍恍惚惚`//看这样就不会报错直接就可以换行了
	//但是记住不要加table因为在字符串里他会记录下你所输入的字符串的这样也会输入进去
	

拼接

	var text = '红红' + '火火' + '恍恍' + '惚惚'//也可以像原来一样拼接了

	//但是在ES6中有更方便的方法

如果要在字符串中拼接js表达式，只需要在模板字符串中使用${js表达式}

	var text = '红红火火${1 + 1}恍恍惚惚'//这样也可以完成拼接
	//并且表达式可以是任何有意的数据
	//但是注意是表达式不是语句
	//你不能写一个for循环在那

而且表达式是可以进行嵌套的

	var text = '红红火火${666${1 + 1}}恍恍惚惚'

其原理是遇到 $时进行编译从而执行表达式，并且也可以在模板字符串中写转义字符

	var text = `红红火火
	恍恍惚惚
	\n
	`

他同样会执行换行的

那么如果我要打印出${}怎么办呢
我们只需要将$进行转义就能打印出来，因为$转义之后取消了其特殊性那么后面的大括号{}也就没有了特殊意义了。

模板字符串标记

在模板字符串书写之前，可以加上标记：

	标记名`模板字符串`
	
	var text = myTag`邓哥喜欢${love1}，邓哥也喜欢${love2}。`;

	//相当于： 
	text = myTag(["邓哥喜欢", "，邓哥也喜欢", "。"], "秋葵", "香菜")
	//每一位的的字符串都会合并作为数组
	//每一位的表达式都会作为剩余参数储存起来

此时我们可以来模拟一下原理

	var love1 = "秋葵";
	var love2 = "香菜";
	
	var text = myTag`邓哥喜欢${love1}，邓哥也喜欢${love2}。`;
	
	//相当于： 
	// text = myTag(["邓哥喜欢", "，邓哥也喜欢", "。"], "秋葵", "香菜")在这里向相当于吧表达式的结果传进来
	//myTag是一个函数
	function myTag(parts) {
	    const values = Array.prototype.slice.apply(arguments).slice(1);//截取到下标为1的位置
	    let str = "";
	    for (let i = 0; i < values.length; i++) {
	        str += `${parts[i]}：${values[i]}`;//进行拼接，我们还可以加上我们想要拼接的字符串
	        if (i === values.length - 1) {//判断到达values.length最后一位减一时再把最后一位的字符串拼接上
	            str += parts[i + 1];
	        }
	    }
	    return str;//此时你返回什么你所输出的就是什么
	}

	console.log(text);//此时输出		邓哥喜欢：秋葵，邓哥也喜欢：香菜。

标记是一个函数，函数参数如下：

• 参数一：被差值分割的字符串数组
• 后续参数：所有的差值

而myTag则是一个函数

如果我们想输入一个字符串而这个字符串需要里面是纯字符串正则表达式和其他表达式都原封不动的输入进去怎么办呢？一般我们会直接转义想要转义的字符比如转移//斜杠

而ES6中出现了一个新的方法能够将字符串里面的所有字符转换为纯字符串，书写方式是在字符串前面加上一个函数String.raw

	let text = String.raw`abc\t\nbcd`//他会原封不动的输出所有字符串

以上就是 ES6 模板字符串 模板字符串标记的全部内容了，希望对你有帮助。