带标签的模板字符串

发布于 2022-08-03 22:39:05 字数 1326 浏览 9 评论 1

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

模板字符串中我们使用 ${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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

祁梦 2022-05-03 15:19:09 1 楼

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

~没有更多了~

关于作者

不知在何时

暂无简介

0 文章
0 评论
0 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。