带标签的模板字符串

  目录

模板字符串的特殊用法

带标签的模板字符串

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

1
2
3
4
5
6
7
8
9
var a = function (strs, ...args) {
console.log(strs)
console.log(args)
}

var name ='jinux'
var age = 20

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

在浏览器的console面板打印一下。
可以看到,标签模板字符串的标签函数的第一个参数是由原始的字符串由占位字符串分割而成的字符串组成的数组,剩下的参数则是对应占位符的值。
利用这个特性常被提到的是避免XSS攻击:

1
2
3
4
5
6
7
8
function htmlEscape(literals, ...placeholders) {
return placeholders.reduce((pre, val, i) => pre + literals[i] + val
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, '&#39')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;'), '') + literals[literals.length - 1]
}