JavaScript 有趣的冷知识：tagged template literals

Posted 2022-02-28 @大迁世界

作者：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 的方式，只是会把变量都变成数组，所以要使用变量时要记得解构出来，事例如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J6KazRo7-1645660636484)(/img/bVcXZBq)]

总结

这次介绍了一种不同的 function call 方式，希望大家有所收藏。

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

---

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

原文：https://medium.com/onedegree-tech-blog/javascript-%E6%9C%89%E8%B6%A3%E7%A%84%E5%86%B7%E7%9F%A5%E8%AD%98-tagged-template-literals-5ca9db71f066

交流

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

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