es6中标签模板实例中的tab函数的理解

let a = 5;
let b = 10;
tag`A ${ a + b } B ${ a * b }`;
// 等同于
tag(['A', ' B', ''], 15, 50);
function tag(stringArr, value1, value2){
  // ...
}

1、tag函数的第一个参数是一个数组,该数组的成员是模板字符串中那些没有变量替换的部分,也就是说,变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间,以此类推。

2、tag函数的其他参数,都是模板字符串各个变量被替换后的值。由于本例中,模板字符串含有两个变量,因此tag会接受到value1和value2两个参数。
3、tag函数所有参数的实际值如下。
第一个参数:[‘A’, ’ B’, ”]
第二个参数: 15
第三个参数:50
为了方便把hello world换成了AB
关于这个函数的理解。

tag`A ${ a } B ${ b }`;

a、这个函数的参数是该模板字符串。
A ${ a } B ${ b }
该模板字符串解析成为

[A, B, ' '], ${ a },  ${ b }

三个参数。至于这三个参数是怎么解析出来的。我是这样理解的。
首先查看该模板字符串中有几个变量。(即有几个“${}”)
该模板字符串中有n个变量就有n+1个参数。

第一个参数:
它是由所有的非变量组成的数组,数组的成员总比变量多一个。
每个变量前后都有非变量包括(缺少的非变量由空白字符串填充。),他们的分布是这样的。

非变非变...非变非

根据这个规则对应模板字符串就可以找到各个参数了。
而第二,三,四。。。个参数,则是各个变量。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值