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`点击跳转`
相关推荐
博客zhu虎康1 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海1 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
上单带刀不带妹2 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
码上暴富3 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
伍哥的传说3 小时前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入
@菜菜_达3 小时前
Lodash方法总结
开发语言·前端·javascript
GISer_Jing3 小时前
低代码拖拽实现与bpmn-js详解
开发语言·javascript·低代码
YAY_tyy3 小时前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
Yvonne爱编码4 小时前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
Pu_Nine_95 小时前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5