模板字符串是可能是咱们耳熟能详的一个ES6新个性，它能够容许咱们在字符串中插入变量，还可能换行等等，的确应用起来十分中央便。然而，ES6还新增了一种次要用于和模板字符串配合应用的标签函数。
1.什么标签函数？
顾名思义，标签函数也是一种函数。这是一个很简略的标签函数申明：
function tagFoo() { console.log('这是一个标签函数');}仔细观察一下，看看tagFoo和咱们罕用的一般函数有什么区别呢？是不是看不出区别呢？得出这个论断很失常，因为标签函数其实就是一个函数，所以它的申明和函数申明是齐全一样的。
那么，咱们怎么晓得tagFoo是一个标签函数呢，或者说标签函数绝对于一般函数有什么非凡之处呢？答案是看tagFoo的调用形式。
tagFoo();//这是一个标签函数tagFoo`一个模板字符串`;//这是一个标签函数标签函数除了能够作为一般函数，通过()调用之外，还能够应用模板字符串``来调用。换句话说，当一个函数应用模板字符串的形式调用时， 这个函数就能够被称为标签函数，所以咱们无妨把标签函数了解为新增的一种函数调用形式。
那么咱们可能会想到，这两种调用形式有什么不同呢？它们的返回值是什么呢？
不管哪种调用形式，都是调用了这个函数，最终的返回值也都是执行这个函数之后的后果。咱们给tagFoo加上一个返回值来看看：
function tagFoo() { return '我是返回值';}let res1 = tagFoo(); let res2 = tagFoo`一个模板字符串`; console.log({ res1, res2 });//{ res1: '我是返回值', res2: '我是返回值' }2.标签函数的参数
excuse me?难道这两种调用形式就只有看起来不一样吗？当然不是。想来咱们都曾经留神到了，一般函数的调用形式容许咱们自行传入参数，而标签函数调用形式仿佛没有给咱们提供传入参数的机会。一起看看标签函数存在参数时，它的参数是什么吧：
function tagFoo(...args) { console.log(...args);}tagFoo`一个一般的模板字符串`; // [ '一个一般的模板字符串' ]tagFoo`一个有插值的模板字符串：${'var'}`; //[ '一个有插值的模板字符串：', '' ] vartagFoo`一个有插值的模板字符串：${'var1'}-${'var2'}`; //[ '一个有插值的模板字符串：', '-', '' ] var1 var2从下面能够看出，标签函数调用时，接管到的一个参数总是一个数组，数组中的元素就是模板字符串中的字符串局部；从第二个参数开始的残余参数接管的是模板字符串的插值变量，这些变量的数目是任意的。换种形式申明的话，可能更直观一些：
function tagFoo(templateStrings, ...insertVars) { console.log({ templateStrings, insertVars });}tagFoo`一个一般的模板字符串`; //{ templateStrings: [ '一个一般的模板字符串' ], insertVars: [] }tagFoo`一个有插值的模板字符串：${'var'}`; //{ templateStrings: [ '一个有插值的模板字符串：', '' ], insertVars: [ 'var' ] }tagFoo`一个有插值的模板字符串：${'var1'},${'var2'}`; //{ templateStrings: [ '一个有插值的模板字符串：', '-', '' ], insertVars: [ 'var1', 'var2' ] }也能够用一张图来示意：
兴许能够形容为，templateStrings中的每两个元素之间，都应该有一个insertVars中插入的变量。两个数组中元素的程序是有对应关系的。
3.标签函数有什么用？
标签函数让咱们依据模板字符串进行本人的逻辑行为，让一些操作变得很简略。
举一个简略的例子，将模板字符串中的价格n转成$n：
function $(templateStrings, ...insertVars) { return templateStrings.reduce((res, temp, i) => { return res + temp + (i >= insertVars.length ? '' : '$' + insertVars[i]); }, '');}console.log($`1号衣服原价${42},打折后的价格是${2}`); //1号衣服原价$42,打折后的价格是$2console.log($`2号鞋子原价${58},打折后的价格是${88}`); //2号鞋子原价$58,打折后的价格是$88不应用标签函数当然也能实现这个成果，也很简略：
function $(n) { return '$' + n;}console.log(`1号衣服原价${$(42)},打折后的价格是${$(2)}`); //1号衣服原价$42,打折后的价格是$2console.log(`2号鞋子原价${$(58)},打折后的价格是${$(88)}`); //2号鞋子原价$58,打折后的价格是$88应用哪种形式取决于咱们本人的爱好。
然而，在解决一些非凡的情景时，标签函数可能会整一个大惊喜给到咱们。
比方styled-components所做的：
const Button = styled.a` /* This renders the buttons above... Edit me! */ display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; /* The GitHub button is a primary button * edit this to target it specifically! */ ${props => props.primary && css` background: white; color: black; `}`失去的Button就是一个React组件。通过styled-components，咱们能够在JS中写css款式了！
咱们也能够模拟styled-components，实现一个简略的styled.a
const styled = { a(stringProps, ...getProps) { const varProps = getProps.map((f) => f({}) || ''); const style = stringProps .reduce((prop, stringProp, i) => { return ( prop + stringProp + (i >= varProps.length ? '' : varProps[i]) ); }, '') //删除正文和换行 .replace(/(\n|(\/\*[\s\S]*?\*\/))/g, '') //删除空格 .replace( /\s*?(?<propName>\w+):(?<propValue>[\s\S]*?);\s*/g, (...args) => { const { propName, propValue } = args.pop(); return `${propName}:${propValue};`; } ); //为了不便展现，返回一个字符串 return `<a style="${style}"></a>`; },};const Button = styled.a` /* This renders the buttons above... Edit me! */ display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; /* The GitHub button is a primary button * edit this to target it specifically! */ ${(props) => !props.primary && 'background: white;'}`;console.log(Button);//<a style="display: inline-block;border-radius: 3px;padding: 0.5rem 0;margin: 0.5rem 1rem;width: 11rem;background: transparent;color: white;border: 2px solid white;background: white;"></a>不得不说，标签函数在解决字符串的时候，真的很有吸引力。
当然，你会不会应用标签函数，还是取决于本人的爱好，萝卜白菜，各有所爱嘛。