值得一看
双11 12
广告
广告

JS中的标签模板是什么?如何使用?

标签模板是javascript中模板字符串的高级用法,通过在模板字符串前添加一个函数名作为“标签”,将模板中的静态部分和动态插值分别传入该函数进行自定义处理。它允许开发者灵活控制字符串的拼接方式,常用于格式化输出、防止xss、构建html或css片段等场景。其基本形式是定义一个函数(如mytag),接收两个参数:strings(模板中的静态文本部分)和values(动态插值的值),然后按需组合它们。例如,logcolor函数可用于高亮控制台输出,safehtml函数可自动转义html字符以防止xss攻击,css函数则可用于构建样式字符串。使用时需要注意:第一个参数strings是一个数组,包含所有静态文本;后续参数为变量值,可用…values一次性获取;strings.raw属性可用于访问原始字符串。掌握标签模板可在需要精细控制字符串内容时提供强大支持。

JS中的标签模板是什么?如何使用?

标签模板是 JavaScript 中模板字符串的一种高级用法,它允许你通过一个函数来处理模板字符串和它的变量部分,从而实现更灵活的字符串操作。最常见的用途比如:格式化输出、防止 XSS、构建 HTML 片段等。


什么是标签模板?

标签模板的基本形式就是在模板字符串前加一个“标签”——其实就是一个函数名。这个函数会接收到模板中的静态部分和动态插值作为参数,然后由你决定如何组合它们。

举个最简单的例子:

function myTag(strings, ...values) {
console.log(strings);  // ["Hello, ", "!", raw: Array]
console.log(values);   // ["World"]
}
myTag`Hello, ${"World"}!`;

在这个例子里,myTag 就是标签函数,后面的模板字符串会被拆分成两个部分传入:一部分是不变的文字(strings),另一部分是变量值(values)。


标签模板能用来做什么?

1. 自定义字符串处理逻辑

你可以根据不同的变量做不同的处理。例如,拼接带颜色的日志信息:

function logColor(strings, ...values) {
let str = '';
strings.forEach((s, i) => {
str += s;
if (i < values.length) {
str += `%c${values[i]}%c`;
}
});
console.log(str, ...Array.from({length: values.length * 2}, (_, i) =>
i % 2 === 0 ? 'color: red;' : ''
));
}
logColor`当前用户:${'张三'},等级为${5}`;

这样在控制台中,变量部分就可以高亮显示了。

2. 安全地转义 HTML 内容

如果你正在手动拼接 HTML 字符串,可以用标签模板来自动转义某些字符,避免 XSS 攻击:

function safeHTML(strings, ...values) {
const escape = str =>
str.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
return strings.reduce((result, s, i) => {
return result + s + (values[i] ? escape(String(values[i])) : '');
}, '');
}
const userInput = '<script>alert("XSS")</script>';
const html = safeHTML`<div>${userInput}</div>`;
console.log(html); // 输出:<div><script>alert("XSS")</script></div>

3. 构建结构化的字符串片段

像一些库(如 styled-components)就利用了标签模板来解析 CSS 字符串,并结合变量进行样式注入:

function css(strings, ...values) {
return strings.reduce((acc, s, i) => acc + s + (values[i] || ''), '');
}
const color = 'blue';
const styles = css`
color: ${color};
font-size: 16px;
`;
console.log(styles);
// 输出:
// color: blue;
// font-size: 16px;

使用标签模板时需要注意什么?

  • 第一个参数是字符串数组,里面包含了模板中所有的静态文本。
  • 后续参数是变量的值,如果模板中有多个 ${},就会对应多个参数。
  • 如果你使用的是展开运算符 …values,那就能一次性拿到所有变量值。
  • 如果想访问原始字符串(不处理转义),可以使用 strings.raw 属性。

总结一下

标签模板并不是必须掌握的内容,但当你需要对字符串进行精细控制的时候,它非常有用。无论是日志美化、安全转义,还是构建 DSL(领域特定语言),都能派上用场。

基本上就这些,理解了结构之后,剩下的就是根据具体场景去定制你的标签函数了。

温馨提示: 本文最后更新于2025-06-07 22:42:20,某些文章具有时效性,若有错误或已失效,请在下方留言或联系易赚网
文章版权声明 1 本网站名称: 创客网
2 本站永久网址:https://new.ie310.com
1 本文采用非商业性使用-相同方式共享 4.0 国际许可协议[CC BY-NC-SA]进行授权
2 本站所有内容仅供参考,分享出来是为了可以给大家提供新的思路。
3 互联网转载资源会有一些其他联系方式,请大家不要盲目相信,被骗本站概不负责!
4 本网站只做项目揭秘,无法一对一教学指导,每篇文章内都含项目全套的教程讲解,请仔细阅读。
5 本站分享的所有平台仅供展示,本站不对平台真实性负责,站长建议大家自己根据项目关键词自己选择平台。
6 因为文章发布时间和您阅读文章时间存在时间差,所以有些项目红利期可能已经过了,能不能赚钱需要自己判断。
7 本网站仅做资源分享,不做任何收益保障,创业公司上收费几百上千的项目我免费分享出来的,希望大家可以认真学习。
8 本站所有资料均来自互联网公开分享,并不代表本站立场,如不慎侵犯到您的版权利益,请联系79283999@qq.com删除。

本站资料仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
THE END
喜欢就支持一下吧
点赞5 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容