什么是模板字符串_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 左侧的符号,别误用成单引号;模板字符串中的空格和缩进也会原样输出,排版时要注意。