es6中标签模板

guizi08092024-02-06 9:37

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

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

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`点击跳转`