带标签的模板字符串

Question

这是一个被很多人忽略的模板字符串的特性，在我的工作生活中反反复复出现了很多次，并且当我向一些大咖介绍这个特性的时候，发现其实他们似乎也忽略了这点。

模板字符串中我们使用 ${exporession} 作为占位符，而作为字符串连接的语法糖是其最基本的用法，而带标签的模板字符串则是一种函数调用，这能够让模板字符串更加强大，拥有真正模板引擎的功能。

var a = function (strs, ...args) {
  console.log(strs)
  console.log(args)
}

var name ='huruji'
var age = 12

a `name: ${name}, age: ${age}`

输出如下：

可以看到，标签模板字符串的标签函数的第一个参数是由原始的字符串由占位字符串分割而成的字符串组成的数组，剩下的参数则是对应占位符的值。

利用这个特性常被提到的是避免 XSS 攻击：

function htmlEscape(literals, ...placeholders) {
  return placeholders.reduce((pre, val, i) => pre + literals[i] + val
    .replace(/&/g, '&')
    .replace(/"/g, '"')
    .replace(/'/g, ''')
    .replace(/</g, '<')
    .replace(/>/g, '>'), '') + literals[literals.length - 1]
}

另外，这项特性已经被广泛当做模板引擎功能，例如 lint-html

Answer 1

另外有大神通过这个特性实现国际化 具体可看 https://jaysoo.ca/2014/03/20/i18n-with-es2015-template-literals/