[JavaScript知识库]Js - 模板字面量

背景

模板字面量是ES6新增的定义字符串的方式。模板字面量使用反引号标识，在模板字符串内使用单引号和双引号无需转义（在模板字符串内使用反引号需要转义）。

模板字面量的使用

• 模板字面量会保持反引号内的空格和换行符（开始和结尾的空格换行符可以通过trim方法去除），支持多行字符串。

let str = `
hello world`;			//	str = '\nhello world'
console.log(str.trim())	//	hello world

• 模板字面量支持字符串插值，出现在${}中的表达式都将被内联的求值。严格意义上来说，模板字面量不是字符串，而是一种特殊的JavaScript表达式，这种表达式求值的结果是一个字符串实例（通过toString()方法得到字符串），所以在模板字面量中插入的变量也会从它们最近的作用域中取值。

let value = 5;
value = `${ value } to the second power is ${ value * value }`;
console.log(value);					//	5 to the second power is 25

//	重写的toString方法被调用
let foo = { toString: () => 'World' };
console.log(`Hello, ${ foo }`)		//	Hello, World

//	在插值表达式中使用函数
function capitalize(word) {
    return `${ word[0].toUpperCase() } ${ word.slice(1) }`;
}
console.log(`${ capitalize('hello') }, ${ capitalize(`world`) }`);	//	Hello, World

• 嵌套使用

let a = 1, b = 2;
let str = `${ a } plus ${ b } ${`equals to ${ a + b }`}`;
console.log(str);	//	1 plus 2 equals to 3

标签函数

标签函数是Js函数的一种特殊用法，通过前缀在模板字面量上的方式来使用。
标签函数的第一个参数为模板字面量中被插值表达式分隔的字符串的数组。剩余的参数则对应每个插值表达式的内容。

alert`Hello World`;		//	弹窗显示：Hello World

let a = 1, b = 2;
function tagFunc(str, ...restExps) {
	console.log(str);
	for (const v of restExps) {
		console.log(v);
	}
}
tagFunc`${ a } + ${ b } = ${ a + b }`;
/**
['', ' + ', ' = ', '']
1
2
3
**/

可以使用String.raw标签函数或者数组的.raw方法获取原始字符串

console.log(String.raw`Hello world\n`);	//	Hello world\n
function tagFunc(str, ...restExps) {
	console.log(str.raw);
}
tagFunc`Hello World\n`					//	Hello world\n

标签函数的链式调用

let consoleThree = (...args1) => (...args2) => (...args3) => console.log(arg1s[0], args2[0], args3[0]);
consoleThree`Hello``World``!`;	//	['Hello']['World']['!']

参考资料

1. JavaScript高级程序设计（第4版）
2. ES6 – 模板字符串使用方法
3. ES6 - 标签函数