• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

标签函数的使用场景_CSS学习

当前位置：网站建设 > 技术支持

标签函数的使用场景？

标签函数的语法是函数名后面直接带一个模板字符串，并从模板字符串中的插值表达式中获取参数，举个例子。

定义一个 greet 函数接收三个参数。

function greet(arg1, arg2, arg3){

console.log(arg1);

console.log(arg2);

console.log(arg3);

}

下面两句代码等价

// 普通函数

greet(["I'm ", ". I'm ", " years old."], name, age)

// tag 函数

greet`I'm ${name}. I'm ${age} years old.`、

// 最终输出

[ 'I\'m ', '. I\'m ', ' years old.' ]

Alfred

47

标签函数的第一个参数是被嵌入表达式分隔的文本的数组。第二个参数开始是嵌入表达式的内容。

函数返回标签函数

function cook(strs, ...substs) {

return substs.reduce(

(prev,cur,i) => prev+cur+strs[i+1],

strs[0]

);

}

function repeat(times) {

return function (...args) {

return cook(...args).repeat(times);

};

}

// 运行结果

> repeat(3)`abc`

'abcabcabc'

> repeat(3)`abc${3+1}`

'abc4abc4abc4'

标签函数返回标签函数

// 实现一个 three 函数

const three = (...args1) => (...args2) => (...args3) =>

cook(args1) + cook(args2) + cook(args3);

// 我们可以这么调用

> three`hello``world``!`

'helloworld!'

标签函数有什么用

举个例子 styled-components ：

styled-components 就是通过 Tag 函数来给 React 和 ReactNative 设置 CSS 样式。

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。