es6中标签模板

之所以写这篇文章,是因为标签模板是一个很容易让人忽略的知识点

首先我们已经非常熟悉模板字符串的使用方法

javascript 复制代码
const name = "诸葛亮"
const templateString = `hello, My name is ${name}`

标签模板介绍

这里的标签模板其实不是模板,而是函数调用的一种特殊形式

"标签"指的就是函数(函数名),紧跟在后面的模板字符串就是它的参数

比如,下面的代码可以正常运行

javascript 复制代码
alert`hello world`

如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数

javascript 复制代码
const name = '诸葛亮'
const age = 18

console.log`hello ${name}, I know your age is ${age}`

控制台打印如下

javascript 复制代码
const name = '诸葛亮'
const age = 18

const tag = (stringArr, ...args) => {
    console.log('stringArr', stringArr)
    console.log('args', args)
}

tag`hello ${name}, I know your age is ${age}`
// 相当于调用函数tag, tag(['hello ', ', I know your age is ', ''], '诸葛亮', 18)

控制台打印如下

使用场景

  • 过滤 HTML 字符串,防止用户输入恶意内容
javascript 复制代码
function saferHTML(templateData) {
  let s = templateData[0];
  for (let i = 1; i < arguments.length; i++) {
    let arg = String(arguments[i]);
    s += arg.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    s += templateData[i];
  }
  return s;
}

const string = '<script>alert("恶意代码")</script>';
const content = saferHTML`<p>${sender}富文本内容</p>`;
// <p>&lt;script&gt;alert("恶意代码")&lt;/script&gt;富文本内容</p>
  • 多语言转换
javascript 复制代码
i18n`Welcome to China!`
// "欢迎来到中国!"
  • 将命令式编程转为声明式编程
javascript 复制代码
// 命令式编程
const url = 'xxxxxxx'
a.style.color = "red"
a.style.backgroundColor = 'blue'
a.style.fontSize = '18px'
a.style.lineHeight = '26px'
a.href = `https://${url}`
a.target = '_blank'
a.textContent = '点击跳转'

// 声明式编程
a.styles`
	color: red;
	backgroundColor: blue;
	fontSize: 18px;
	lineHeight: 26px;
`.props`
	href: `https://${url}`;
	target: '_blank';
`.content`点击跳转`
相关推荐
web守墓人39 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
烛阴9 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子9 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead9 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界10 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
@Dream_Chaser10 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
上单带刀不带妹10 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript