在 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 变量最终会拿到这个函数的返回值。