ES6函数参数包含标签模板字符串如何解析？

68 阅读 0 评论 45 点赞

我是靠谱客的博主精明机器猫，最近开发中收集的这篇文章主要介绍ES6函数参数包含标签模板字符串如何解析？，觉得挺不错的，现在分享给大家，希望可以做个参考。

ES6标签模板：当模板字符串紧跟在一个函数名后面的时候，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。

如果没有参数的话，那个普通的调用没什么区别，比如

alert`123`
// 等同于 (但是使用模板字符串传入的参数是一个数组，包含一个row属性。注1)
alert(123)
复制代码

但是，如果模板字符串中带有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。

let a = 5;
let b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
复制代码

带有变量的模板字符串会被先处理成参数形式，再传入函数中。规则就是：字符串中的非变量被拆成数组形式，变量作为值紧跟数组后面作为参数传入。

转载于:https://juejin.im/post/5d09e7e3e51d454fbe24a68f

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。