es6模板字符串里用html标签,为ES6模板字符串计算标签函数

Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发。

这篇博客描述了你可以通过函数为ES6模板字符串做些什么从而获取返回值。

对于一篇针对模板字符串的介绍来说,标记的模板字符串和函数需要在《探索ES6》中查询模板字符串章节

1.通过模板字符串获取返回值

在JavaScript中获取一个值最普遍的方法就是在括号中加上参数。

546f610d7f944f53bcfea018dc754e68.png

在ES6中,你可以通过模板字符串更多地获取返回值。

9ca483f664554d1db8864fdc53aef48a.png

value现在是第一个参数为模板字符串的标签函数,并且它现在的元素就是参数值。

2.返回标签函数的函数

如果你通过一个模板字符串获取到的值是一个返回标签函数的函数,那么你可以把后一个函数作为前一个函数的参数传递过去。

比如说,在下面的交互中,repeat(x)函数就返回了一个重复自己的模板字符串x次的标签函数。

8725b0e58266417581b43a1f8edd742e.png

这是repeat()函数的实现过程。

43c0d7c2c4c54105928e0e62a491a875.png

3.返回标签函数的标签函数

你甚至可以自己创建返回标签函数的标签函数,把自己的模板字符串串联起来。

比如说,这是一个让你自己连接3个模板字符串的一个标签函数three。

8273e68d05874ed7ae1d90c3a68247fb.png

这是你如何实现函数three的过程。

17014b9ae7d447b3a5215283b10c8d30.png

下列的标签函数能联接合并你自己创建的任意长度的字符串,但是你需要通过一个空的参数列表标记联接的结束点。

b7c78ca6250c4621a9b1f2403d3e6800.png

下面这个也是有效的,因为模板字符串总是提供至少一个参数。

56c9980510c1430593ab6f3e0c6a7c75.png

4.真实世界的例子:样式元素

由Glen Maddern和Max Stoiber提出的样式元素提供了生动的原型,它可以让你通过在模板字符串中的CSS来给相互反应的元素提供样式。

来自网站的例子:

602a841b06ba459fb731e9c4ad49a695.png

5.深入阅读章节

[1].在《探索ES6》中的章节模板字符串

[2].更多关于返回函数的函数:“局部套用部分应用(使用JavaScript)”

英文原文:http://www.2ality.com/2016/11/computing-tag-functions.html

译者:他知道风从哪个方向来

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值