不知道大家在使用React.js开发网页的时候有没有使用过一个非常好用的组件，叫做styled-components。元素式组件让你可以在JSX中编写css来实现**CSS-IN-JS**技能。说了这么多，是因为styled-component的官方文档说了这样一句话：ThisunusualbackticksyntaxisAnewJavaScriptfeaturecalledataggedtemplateliteral。这个taggedtemplateliteral让我有点好奇，因为之前在使用styled-components的时候，发现生成元素的方法是一个函数，但是在styled-components里面看不到任何“正常”的调用functiontechnique，仔细看了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参数方式，就是把所有的变量都变成数组，所以要用的时候记得解构。示例如下：小结本次介绍一种不同的函数调用方式，希望大家收藏。
