模板字面量
众所周知,我们可以在``里面使用${}
进行占位的操作就像下面这样
let name = 'Jack';
let str = `Welcome ${name}`; // 这里为`` 而非''
console.log(str); // Welcome Jack
那么配合innerHTML
我们和``的特性我们就可以在JS页面里面写HTML代码
let name = 'Jack';
document.body.innerHTML =
`
<span>Hello ${name}, Welcome Back<span/>
`
当然写css代码也是没有问题的
let name = 'Jack';
document.body.innerHTML =
`
<span style='color: red;'>Hello ${name}, Welcome Back<span/>
<span style=${`color: red;`}>Hello ${name}, Welcome Back<span/>
`
// 上面展示了两种不同的方式
因为${}
内是表达式所以加减乘除一样奏效
let a = 6;
let b = 9;
let str = `${a} + ${b} = ${a + b}`;
console.log(str); // 6 + 9 = 15;
同理函数也是没问题的。
接下来就是重点了,标签函数
const a = 6;
const b = 9;
function simpleTag(strings, aValExpression, bValExpression, sumExpression) {
console.log(strings);
console.log(aValExpression);
console.log(bValExpression);
console.log(sumExpression);
return 'foobar';
}
let untaggedResult = `${a} + ${b} = ${a + b}`;
let taggedResult = simpleTag`${a} + ${b} = ${a + b}`;
console.log(untaggedResult);
console.log(taggedResult);
结果如下
[ '', ' + ', ' = ', '' ]
6
9
15
6 + 9 = 15
foobar
慢慢解读一下[ '', ' + ', ' = ', '' ]
是一个数组(废话,是taggedResult那句话调用的,我们可以发现的是``里面就是传入的函数参数的地方(类似于调用函数时的括号),string
存的就是这个数组,这个数组我们可以发现是把占位的地方显示成了 ''
,剩下的就是占位符传入的字符,所以我们就可以发现这里参数被分为了两类,一类是非占位符的字符,另一类就是属于占位符的字符。
因为表达式参数的数量是可变的,所以通常应该使用剩余操作符(rest operator)将它们收集到一个 数组中:
const a = 6;
const b = 9;
function simpleTag(strings, ...expressions) {
console.log(strings);
for (const expression of expressions) {
console.log(expression);
}
return 'foobar';
}
let untaggedResult = `${a} + ${b} = ${a + b}`;
let taggedResult = simpleTag`${a} + ${b} = ${a + b}`;
console.log(untaggedResult);
console.log(taggedResult);
OK,大概就是这样,介于本人也是菜鸟,不知道这能拿来干嘛,就先记在这,方便以后需要的时候使用。