`` 反引号在前端的作用：模板字符串_style中使用 反引号

在利用 React.js 开发网页的时候有没有用过一个很好用的组件叫 styled-components，styled-components 是一个用来产生元素样式的组件，让你可以在 JSX 中编写 css 达到 CSS-IN-JS 的技巧。

之前在使用 styled-components 的时候有发现明明要产生元素的 method 都是 function，可是在 styled-compoents 中却看不到任何 "平常" 会使用的 call function 技巧，后来仔细去看了 MDN 才知道原来这个是 ES6 新进的方法。

Template Strings

在开始讲 tagged template literal 时，必须要先讲一下 template strings，相信有在使用 ES6 的人都知道 template strings 是非常好用的方法，解决了以往组合字串上需要用冗长的加号不断的拼接。

// ES5
var myName = '前端Sky'
console.log("Hello " + myName + '!')
// 'Hello 前端Sky!'
 
// ES6
const myName = '前端Sky'
console.log(`Hello ${myName}`)
// 'Hello 前端Sky!'

甚至 template strings 也可以利用 multi-line 的效果进而达到换行的效果。

// ES5
console.log('Hello\n' + '前端Sky')
// Hello   
// 前端Sky
 
 
// Es6
console.log(`
Hello
前端Sky
`)
// Hello   
// 前端Sky

我们知道当字符串变得很长，用普通的拼接写法是很繁琐的，而且在插入一些javascript、template或者html template的时候，会写的很冗长。而且一步小心就会因为引号的缺失导致整个template报错。
这个时候，我们就要请出来我们今天要说的es6增加的模版字符串。

语法

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
最后我们用模版字符串改写一下上面的一些场景:

// 拼接变量
var inner = `这里有${count}个炒粉工`
// 换行
var _inner = `
                这里有<b>${count}</b>个炒粉工
                每天只知道吹水
             `
// 因为模版字符串外部为反引号，所以单双嵌套的场景还是比较少，如果在内部的字符串出现了单双嵌套规则还是和原来一致的。
// javascript template(百度埋点是比较常见的一个了)
var doc = document.body, 
    hmc = document.createElement('script');
hmc.innerHTML = `
                  var _hmt = _hmt || [];        
                  (function() {           
                    var hm = document.createElement("script");          hm.src = "https://hm.baidu.com/hm.js";           
                    var s = document.getElementsByTagName("script")[0];     s.parentNode.insertBefore(hm, s);
                    })();       
                  `;
doc.appendChild(hmc);
// 嵌套反引号需要转义
var $r = `这里有\`${count}\`个炒粉工`
// 表达式
`${count} + ${count} = ${count * 2}` // 2 + 2 = 4
// 运行方法（默认会调用toString）
const $function = function(count) { return `这里有${count}个炒粉工` }
`其实, ${$function(count)}` // 其实，这里有2个炒粉工
// 模版字符串中调用模版字符串
var $$r = `你确定这里是${count > 0 ? `${count}个炒粉工` : '水军'}`

alert`123`
// 等同于
alert('123')

科普: ECMAScript 6.0(简称es6)