什么是模板字符串_Javascript中如何使用

模板字符串是JavaScript中用反引号包裹、支持多行文本和${}嵌入表达式的字符串写法，比单/双引号更灵活；支持直接换行、变量插值、运算及函数调用；还可通过标签函数实现高级定制处理。

模板字符串是 JavaScript 中一种用反引号（`）包裹的字符串写法，它支持多行文本和嵌入表达式，比传统单引号或双引号字符串更灵活、可读性更强。

支持多行文本

普通字符串换行需用 \n 和加号连接，而模板字符串直接回车即可保留换行符，代码更直观。

• 传统写法：var str = "第一行\\n第二行";
• 模板字符串：const str = `第一行\n第二行`;（实际书写中直接换行，无需 \n）
• 示例：

  const message = `姓名：张三
  年龄：25
  城市：北京`;

  输出会保留原始换行格式。

嵌入变量和表达式

用 ${} 语法在模板字符串中插入变量、函数调用、运算等任意 JavaScript 表达式。

• 变量：const name = "李四"; console.log(`你好，${name}！`);
• 运算：const a = 3, b = 4; console.log(`和是 ${a + b}`);
• 函数调用：console.log(`时间：${new Date().toLocaleTimeString()}`);
• 注意：${} 内不能直接写语句（如 if、for），但可调用返回值的函数或使用三元运算符。

标签模板（进阶用法）

在反引号前加一个函数名，该函数会接收模板字符串的静态部分和动态插值作为参数，适合做转义、国际化、SQL 构建等定制处理。

• 基本结构：func`hello ${a} world ${b}`
• 函数接收两个关键参数：字符串数组（如 ["hello ", " world ", ""]）和插值结果数组（如 [a, b]）
• 常见用途：HTML 转义、高亮渲染、模版预编译等，例如防 XSS 的简单 sanitize 函数可封装在此模式下。

不复杂但容易忽略：反引号是英文键盘上 Tab 键上方、数字 1 左侧的符号，别误用成单引号；模板字符串中的空格和缩进也会原样输出，排版时要注意。