JS中的模板字符串(ES6新增)

模板字符串(template strings)

ES6引入了一种新的字符串字面量语法，特点如下：

使用反引号`包围字符串(常规是用单引号'或双引号")。
字符串中可直接换行等操作(无需转义字符)。
字符串中可以${varName}的格式(称为模板占位符)获取变量值
返回值统一为string类型。
${varName}或${value}。即${}中可为变量名，也可直接为字面量值(如${123}或${asd})。

一般用于减少转义字符，或减少字符串拼接符。

应用

多行字符串(减少转义字符)

var text = `Hello
世界
		你好
`;
console.log(text);

输出为：

Hello
世界
		你好

字符串拼接(减少字符串拼接符+)

如果要对多个变量的值进行字符串拼接，要使用的+数量会非常的多。
使用模板字符串就会少些很多代码并减少语法错误。

var a = "蜜";
var b = "探";
var text = `秘密的${a}, 探案的${b}`;
console.log(text);		// 秘密的蜜, 探案的探

标签模板(Tag Template)

标签模板是一个函数的调用，其中调用的参数是模板字符串。
当模板字符串中带有变量，会将模板字符串参数处理成多个参数。

alert(`hello world`);
alert`hello world`;   // 等效

console.log参数串
若参数串中有${varName}，则这些取值点会将参数串分割为字符串数组(字符串个数为取值点个数+1)。
并将各个取值点的值也传入函数。

若参数中无${varName}，则传入的参数为字符串数组：[参数串]。
即：console.loghello等效于console.log([“hello”])
若参数中穿插着${varName}，则传入的参数为字符串数组:[字符串,...] value1...
如：console.loghe{1}ll{2}o相当于console.log([“he”, “ll”, “0”], 1, 2)。
代码：

console.log`hello`		// ["hello", raw: Array(1)]
console.log(["hello"])	// ["hello"]

console.log`he${1}llo`			// ["he", "llo", raw: Array(2)] 1
console.log(["he", "llo"], 1)	// ["he", "llo"] 1

console.log`he${1}ll${"asd"}o`				// ["he", "ll", "o", raw: Array(3)] 1 "asd"
console.log(["he", "ll", "o"], 1, "asd")	// ["he", "ll", "o"] 1 "asd"