微信搜索【大招走向世界】，第一时间为大家分享前端行业动态、学习路径等。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。不知道大家在使用React.js开发网页的时候有没有用过一个非常好用的组件styled-components。Styled-components是一个用来生成元素样式的组件，可以让你在JSX中写css，实现CSS-IN-JS的技巧，我讲这么多是因为styled-component的官方文档说了这么一句话：Thisunusualbackticksyntaxisa称为标记模板文字的新JavaScript功能。这个taggedtemplateliteral让我有点好奇，因为之前在使用styled-components的时候，发现生成元素的方法是function，但是在styled-components里面看不到任何“正常”的调用函数的技巧，然后我仔细阅读MDN。我知道这是ES6的一个新方法，但是直到现在我才知道。只能说我对ES6了解太少了。模板字符串开始谈论带标签的模板文字时，您必须首先谈论模板字符串。相信用过ES6的都知道，模板字符串是一个非常有用的方法。它解决了在组合字符串拼接上使用冗长的加号的需要。//ES5varmyName='前端小智'console.log("Hello"+myName+'!')//'前端小智你好！'//ES6constmyName='前端小智'console.log(`Hello${myName}`)//'前端小智你好！'甚至模板字符串也可以使用多行的效果来实现换行的效果。//ES5console.log('Hello\n'+'前端小智')//Hello//前端小智//Es6console.log(`HelloFront-endXiaozhi`)//Hello//前端小智看到上面是不是觉得多行的写法和写styled-components很像呢？其实模板字符串的写法和接下来要讲的taggedtemplateliteral是有密切关系的，这也是为什么有必要先提一下taggedtemplateliteral的原因。的原因。标记模板文字标记模板文字只是意味着您可以使用另一种方式进行函数调用。通常，我们所知道的函数调用都是在括号内进行的，括号用于传入要使用的函数。参数，但是taggedtemplateliteral允许你使用模板技术进行函数调用，写法和上面介绍的模板字符串完全一样。在上面的例子中，你可以看到输出的格式有点奇怪。它是一个数组而不是一个简单的字符串。这是因为JavaScript需要记录模板字符串，以便捕获模板字符串中的变量。毕竟函数调用是最重要的，就是把参数传进去，知道了这个特点，接下来我们尝试用这种方式给函数传入参数，如下图。没想到，还是没有办法显示完整的字符串。实际上，在使用tagged模板字面量方法进行函数调用时，第一个参数就是模板字符串中的rawstrings，它是除variables之外的其他字符串的集合，会是一个数组，其余参数会罗列一个根据模板字符串中引入的变量逐一。例如：如果在模板字符串中一共传入了两个变量，那么这两个变量将作为该函数中的第二个和第三个参数传入，如下所示。但是这种写法真的很难看，你很难预料这个模板字符串中会传递多少个变量。这时候如果想让这个函数更好看，可以使用ES6的rest参数方式，就是把所有的变量都变成数组，所以要用的时候记得解构。示例如下：小结本次介绍一种不同的函数调用方式，希望大家收藏。我是楚万之，新的一年我们一起刷刷刷。编辑过程中可能存在的BUG无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。原文：https://medium.com/onedegree-...交流有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。
