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`点击跳转`
相关推荐
gnip4 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
掘金安东尼6 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手10 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
Hilaku10 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
LuckySusu10 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu10 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu10 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu10 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu10 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
LuckySusu10 小时前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript