ES6模板字符串

文章目录

1. 1. 基础用法
2. 2. 嵌入变量
3. 3. 标签模板

基础用法

let message = `Hello World`;
console.log(message);

如果你碰巧要在字符串中使用反撇号，你可以使用反斜杠转义：

let message = `Hello \` World`;
console.log(message);

值得一提的是，在模板字符串中，空格、缩进、换行都会被保留：

let message = `
	<ul>
		<li>1</li>
		<li>2</li>
	</ul>
`;
console.log(message);

注意，打印的结果中第一行是一个换行，你可以使用 trim 函数消除换行：

let message = `	<ul>		<li>1</li>		<li>2</li>	</ul>`.trim();
	<ul>
		<li>1</li>
		<li>2</li>
	</ul>
`
console.log(message);

嵌入变量

模板字符串支持嵌入变量，只需要将变量名写在 ${} 之中，其实不止变量，任意的 JavaScript 表达式都是可以的：

let x = 1, y = 2;
let message = `<ul><li>${x}</li><li>${x + y}</li></ul>`;
console.log(message); // <ul><li>1</li><li>3</li></ul>

值得一提的是，模板字符串支持嵌套:

 let arr = [{value: 1}, {value: 2}];
 let message = `
 	<ul>
 		${arr.map((item) => {
 			return `
 				<li>${item.value}</li>
			`
 		})}
 	</ul>
`;
 console.log(message);

打印结果如下：

注意，在 li 标签中间多了一个逗号，这是因为当大括号中的值不是字符串时，会将其转为字符串，比如一个数组 [1, 2, 3] 就会被转为 1,2,3，逗号就是这样产生的。

如果你要消除这个逗号，你可以先 join 一下：

let arr = [{value: 1}, {value: 2}];
let message = `
	<ul>
		${arr.map((item) => {
			return `
				<li>${item.value}</li>
			`
		}).join('')}
	</ul>
`;
console.log(message);

打印结果如下：

标签模板

模板标签是一个非常重要的能力，模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串，举个例子：

let x = 'Hi', y = 'Kevin';
var res = message`${x}, I am ${y}`;
console.log(res);

我们可以自定义 message 函数来处理返回的字符串:

// literals 文字
// 注意在这个例子中 literals 的第一个元素和最后一个元素都是空字符串
function message(literals, value1, value2) {
	console.log(literals); // [ "", ", I am ", "" ]
	console.log(value1); // Hi
	console.log(value2); // Kevin
}

我们利用这些参数将其拼合回去：

function message(literals, ...values) {
 	let result = '';
 
 	for (let i = 0; i < values.length; i++) {
 		result += literals[i];
 		result += values[i];
 	}
 
 	result += literals[literals.length - 1];
 
	return result;
 }

你也可以这样写：

function message(literals, ...values) {
	let result = literals.reduce((prev, next, i) => {
	    let value = values[i - 1];
	    return prev + value + next;
	});

	return result;
}

学着拼合回去是一件非常重要的事情，因为我们经过各种处理，最终都还是要拼回去的……