模板字符串在定义时需要用反逗号(`)进行定义
模板字符串可以自动识别换行,空格等操作
模板字符串中可以使用字符串插值
例如:

let foo={toString:()=>'World'};
console.log(`Hello, ${foo}!`);

输出:Hello, World!

这里有两点,第一是字符串插值隐式调用了toString函数,二是这里的箭头函数对toString方法进行了重写,由于冒号(:)后面没有花括号({}),所以会自动将后面的字符串理解为return 'World'从而出现输出的结果

在这里又不得不提到标签函数
直接上代码:

let a=6;
let 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(taggedResult);

输出:
["","+","=",""]
6
9
15
foobar
这里的simpleTag`${a}+${b}=${a+b}`便是调用了标签函数,对于(`)里面所包含的模板字符串,将会被分为两部分解析,第一部分是除了字符串插值以外的部分,中间由字符串插值隔开,作为字符串数组中的元素被保存并传入标签函数的第一个参数strings,第二部分则是每一个字符串插值都作为一个参数被传入标签函数。

注意:simpleTag`${a}+${b}=${a+b}`代表运行这个标签函数,从而会跳入这个函数执行内部的语句,最后return的结果会保存到taggedResult中,从而在最后的console.log函数中输出

Last modification:July 26th, 2021 at 10:46 am
如果觉得我的文章对你有用,请随意赞赏