JavaScript模板字面量

模板字面量

众所周知，我们可以在``里面使用${}进行占位的操作就像下面这样

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，大概就是这样，介于本人也是菜鸟，不知道这能拿来干嘛，就先记在这，方便以后需要的时候使用。