ES6模板字符串

02苏_2025-11-08 22:03

ES6 模板字符串（Template String）是一种增强版的字符串，主要解决传统字符串拼接繁琐、多行字符串处理麻烦等问题，通过反引号（`）包裹，支持变量嵌入 、多行字符串 和表达式计算等功能。

复制代码

// 传统方式
        const str = "第一行\n第二行\n第三行";

        // 模板字符串
        const str1 = `第一行
第二行
第三行`
        console.log(str);
        console.log(str1);

模板字符串极大简化了字符串拼接场景（如动态生成 HTML、日志输出等），是 ES6 中最常用的特性之一。

嵌入变量

复制代码

        const name = 'syz';
        const age = 18;
        const info =`姓名是:${name},年龄是:${age}`;
        console.log(info);

嵌入表达式

复制代码

   const newyear = `明年是：${age+1}岁`
   console.log(newyear)

嵌入函数调用

复制代码

 const sayhi= ()=>'您好'
        console.log(`${sayhi()},${name}`);

当你想引用反引号的时候

复制代码

// 错误写法（会报错）
const str = `这是一个反引号：`; 
// 解析时会认为第一个`是开始，第二个`是结束，中间的内容为空，导致语法错误

// 正确写法（用\转义）
const str = `这是一个反引号：\``; 
// 这里的 \` 会被解析为一个普通的反引号符号，而不是模板字符串的结束符
console.log(str); // 输出：这是一个反引号：`

标签函数(高级用法)

函数后面用``承接字符串和变量。具体用法我也不是很明白，会用的朋友可以在评论区为我答疑解难。

复制代码

// 定义一个标签函数
function myTag(strings, ...values) {
  console.log("字符串片段：", strings);
  console.log("嵌入的变量：", values);
  return "处理后的结果";
}

// 使用标签函数
const name = "Alice";
const age = 25;
const result = myTag`姓名：${name}，年龄：${age}`;