Skip to content

在 ES 5 及之前,要实现多行字符串和大量的字符串拼接其实是比较麻烦的,ES 6 提供了一种新的方式,模板字符串,多行字符串用两个反引号包裹,支持直接换行书写,也支持使用 ${表达式} 来在字符串中插入数据

js
const str = `
	const a = 1;
	const b = 2;
	const c = ${test};
`;

在以前,字符串拼接需要加非常多加号,这非常麻烦。

如果使用以前的字符串,想要实现换行字符串的效果,推荐下面两种方式

js
const str1 = "const a = 1;\
const b = 2\
const c = 3\
";

const str2 = "const a = 1"+
	  "const b = 2";

以上两种写法都是正确的

模板字符串前面可以放上一个函数名

js
const str1 = `AAA`;
const str2 = `BBB`;

const text = myTag`str1:${str1},str2:${str2}`;
//以上代码等价于
const text = myTag(["str1:",",str2:",""],str1,str2);

能看懂吗,也就是说如果我在模板字符串前面写上一个函数名,他就会调用这个函数,第一个参数传入一个数组,这个数组是按照 ${} 分割的字符串,后面的参数依次传入插值。这个函数当然是我们自己去写,而 text 变量最终会拿到这个函数的返回值。

以笔记为镜,可以知得失