JavaScript中模板字面量定义标签函数

最新推荐文章于 2024-01-07 17:56:29 发布

咱们布奇

最新推荐文章于 2024-01-07 17:56:29 发布

阅读量402

点赞数

分类专栏： JS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/sinat_21237645/article/details/124521305

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

标签函数本身是常规函数，通过前缀到模板字面量来应用自定义行为

通过实例来解读上面这句话：

const a = `Harry`;
const b = `Potter`;
const c = `Hello`; //定义三个字符串变量

function Tag(strings, x, y, z) {

//标签函数接收的参数个数取决于引用函数时后面跟的模板字面量中的插值个数，参数个数为（插值个数 + 1）. 本例中参数个数即取决于下文中`${a}${b}, ${c}!`中插值个数，这里面有${a}, ${b}, ${c}三个插值，那么这个标签函数的参数个数即为3 + 1 = 4个. 标签函数中第一个参数都为strings, 即为插值表达式中各插值之间分隔符组成的数组，详见下述
    console.log(strings);

//输出[ '', '', ', ', '!' ] 承上，[ '', '', ', ', '!' ] 为表达式`${a}${b}, ${c}!`中各插值之间分隔符组成的数组，我来将各个插值之间的间隔符标注出来以便于理解：`''${a}''${b}', '${c}'!'`. 请注意，第一个插值之前如果没有符号的话，数组中会将第一个间隔符赋值为空值，即为'',两个插值之间如果没有分隔符号，间隔符也会被赋值为数组中的一个空值''.如果分隔符里面有空格，也会一起体现，如数组中的第三个分隔符为', ' 可见逗号后面有一个空格
    console.log(x); 

//输出 Harry. x为标签函数接收到的模板字面量`${a}${b}, ${c}!`中的顺序数第一个插值，即为${a}, 也就是`Harry`
    console.log(y);

//输出 Hello. y为标签函数接收到的模板字面量`${a}${b}, ${c}!`中的顺序数第二个插值，即为${b}, 也就是`Potter`
    console.log(z);

//输出 Hello. z为标签函数接收到的模板字面量`${a}${b}, ${c}!`中的顺序数第三个插值，即为${c}, 也就是`Hello`

    return `${c} ${a}, how are you!`;
//标签函数利用读取到的插值，自定义重组并输出新的字面量
}

const res = Tag`${a}${b}, ${c}!`;
console.log(res); //输出 Hello Harry, how are you! 
//标签函数利用从`${a}${b}, ${c}!`中读取到的插值，自定义重组并输出新的字面量

下一篇会讲参数数量可变的标签函数如何定义，敬请关注.