笔记 --- ES6 标签模板 tagged template

问题要从上次拼接 URL 用到的 npm 包 encodeuricomponent-tag 说起， 它的使用方式是否让你有些迷惑？

const uri = require('encodeuricomponent-tag')
console.log(uri`/category/${'big horses'}?q=${'saddles & bears'}`)
// Output: /category/big%20horses?q=saddles%20%26%20bears

形如 uri`/a/b?q=${name=123}` 的这种字符串，就是标签模板（tagged template）了。它是 ES6模板字符串的高级用法，可以允许我们用函数调用的方式解析字符串。uri 就是一个函数，只不过它的调用方式，用的标签模板的形式。

使用方式：

a`abc`   
//  等价于：a(['abc'])

myTag`That ${ person } is a ${ age }` 
//  等价于：myTag(['That', 'is a', ''], person, age) 

以myTag`That ${ person } is a ${ age }`为例，我们来看一下标签模板的结构：

• 显而易见，myTag 是标签（tag），也是模板函数的函数名， `That ${ person } is a ${ age }` 字符串作为参数传给 myTag。
• `That ${ person } is a ${ age }`字符串在传入方法之前，会先进行拆解操作，拆解成变量（person， age）和strings（That , is a ,    请注意这里还有一个空格），
• strings按顺序放入 StringArr中，作为 myTag函数第一个参数，其余变量依次加入参数列表，
• 最终形成常规的函数调用形式myTag(['That', 'is a', ''], person, age) 

了解了标签模板的结构，是不是就清晰了很多呢。

最后来看下标签模板的应用场景：

• 1. 过滤 HTML 字符串，防止用户输入恶意内容
• 2. 多语言转换（国际化处理）
• 3. 在 JavaScript 语言之中嵌入其他语言
   

参考： 

MDN Tagged Template

阮一峰 ES6 字符串扩展