当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript模板字面量与标签函数教程

JavaScript模板字面量与标签函数教程

2026-01-16 16:30:35 0浏览收藏

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《JavaScript模板字面量与标签函数详解》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

模板字面量结合标签函数可实现字符串的自定义处理，通过反引号包裹并使用${}插入变量，标签函数接收字符串片段和值数组，可用于HTML转义、CSS-in-JS等场景。

JavaScript模板字面量与标签函数

模板字面量（Template Literals）是 JavaScript 中一种更灵活的字符串创建方式，它不仅支持多行字符串和变量插值，还能与函数结合实现更强大的功能——这就是“标签函数”（Tagged Templates）。

模板字面量基础

使用反引号（`）包裹字符串，可以轻松实现以下功能：

变量插值：通过 ${expression} 插入变量或表达式
多行文本：直接换行，无需转义

const name = "Alice";
const age = 25;
const message = `Hello, I'm ${name},
and I'm ${age} years old.`;
console.log(message);
// 输出：
// Hello, I'm Alice,
// and I'm 25 years old.

什么是标签函数

标签函数是一种特殊的函数调用方式，它作用于模板字面量前，用于对模板内容进行自定义处理。标签函数接收模板的原始字符串部分和插值表达式的值，返回你想要的结果。

语法是在模板前加一个函数名：

function myTag(strings, ...values) {
  // strings: 字符串片段数组
  // values: 插值表达式的值
  return /* 自定义结果 */;
}

const result = myTag`Hello ${"world"}!`;
console.log(result);