关于javascript:JavaScript-有趣的冷知识模板字符串

作者：Andy Chen
译者：前端小智
起源: medium

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

不知道大家在利用 React.js 开发网页的时候有没有用过一个很好用的组件叫 styled-components，styled-components 是一个用来产生元素款式的组件，让你能够在 JSX 中编写 css 达到 CSS-IN-JS 的技巧，讲了这么多就是因为 styled-component 的官网文件有说了这句话：

This unusual backtick syntax is a new JavaScript feature called a tagged template literal.

这个 tagged template literal 让我有点好奇了，因为之前在应用 styled-components 的时候有发现明明要产生元素的 method 都是 function，可是在 styled-compoents 中却看不到任何 “ 平时 ” 会应用的 call function 技巧，起初认真去看了 MDN 才晓得原来这个是 ES6 新进的办法，而我直到现在才晓得，只能说本人意识的 ES6 真的太少了。

Template Strings

在开始讲 tagged template literal 时，必须要先讲一下 template strings，置信有在应用 ES6 的人都晓得 template strings 是十分好用的办法，解决了以往组合字串上须要用简短的加号一直的拼接。

// ES5
var myName = '前端小智'
console.log("Hello" + myName + '!')
// 'Hello 前端小智!'

// ES6
const myName = '前端小智'
console.log(`Hello ${myName}`)
// 'Hello 前端小智!'

甚至 template strings 也能够利用 multi-line 的成果进而达到换行的成果。

// ES5
console.log('Hello\n' + '前端小智')
// Hello   
// 前端小智


// Es6
console.log(`
Hello
前端小智
`)
// Hello   
// 前端小智

看到下面的 multi-line 写法有没有霎时感觉跟在写 styled-components 很像呢

其实 template strings 的写法跟接下来要讲的 tagged template literal 能够说是非亲非故，这也是为甚麽要前必须要先提到 tagged template literal 的起因。

Tagged Template Literal

tagged template literal 简略来说就是让你能够用另一种形式进行 function call，通常咱们认知的 function call 都是利用小括号的形式进行，并且在小括号中传入要让此 function 应用的参数，但 tagged template literal 能够让你利用 template 的技巧进行 function call，写法就跟下面介绍的 template strings 能够说是截然不同。

在下面的例子能够看到输入的格局有点奇怪，居然是个数组而不是单纯的字符串而已，这是因为 JavaScript 要把 template string 记录起来，这样能力把 template string 中的变量抓进去，毕竟 function call 最重要的就是要把参数传进去。

晓得了该特点后，接下来咱们尝试用这种形式传参数进去 function 内，就像上面这样。

没想到还是没方法把残缺的字串显示进去，其实利用 tagged template literal 的形式进行 function call 时，第一个参数是 template strings 中的 raw strings 也就是除了变量以外的其余字串的汇合，会是一个数组，其余的参数则是会依据 template strings 中带入的变量一一的列举进去。

举例来说：如果在 template strings 中一共传入了两个变数，则这两个变量都会被当作此 function 中的第二及第三个参数带入，事例如下。

但这样写真的是很丑，而且你很难预期这个在这个 template strings 中一共会传多少个变量进去，这时候如果要让这个 function 写起来比拟难看能够用 ES6 的 rest parameter 的形式，只是会把变量都变成数组，所以要应用变量时要记得解构进去，事例如下：

总结

这次介绍了一种不同的 function call 形式，心愿大家有所珍藏。

我是刷碗智，新的一年，咱们一起刷刷刷。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://medium.com/onedegree-…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。