javascript模板字符串是什么_怎样嵌入表达式【教程】

3次阅读

模板字符串必须用反引号定义,支持多行与${}表达式插值,可嵌套及配合标签函数实现xss过滤等高级功能,但默认不转义且旧版node.js可能不支持。

javascript模板字符串是什么_怎样嵌入表达式【教程】

javaScript 模板字符串不是语法糖的“装饰品”,而是解决字符串拼接痛点的实用工具——它用 `(反引号)包裹,支持多行和表达式插值,比 + 拼接和 String.prototype.concat() 更直观、更安全。

模板字符串怎么写?基本语法和反引号的必要性

必须用反引号 `,不能用单引号或双引号。一旦混用,比如写成 "Hello ${name}",JS 会直接报错或当成普通字符串字面量,表达式不会执行。

常见错误现象:Uncaught SyntaxError: Invalid or unexpected Token(尤其换行时),往往就是用了双引号却写了换行或 ${}

  • 正确:`Hello ${name}`
  • 错误:"Hello ${name}"'Hi ${user}'
  • 支持原生换行:`line1nline2` 或直接回车:
    `first line second line`

怎样在模板字符串里嵌入表达式?${} 里能放什么

${} 是插值占位符,里面可以是任意 javascript 表达式,不只限于变量名——函数调用、三元运算、对象属性访问、甚至简单计算都合法。

立即学习Java免费学习笔记(深入)”;

注意:表达式必须有返回值,且会被自动转为字符串(调用 .toString()),但 NULLundefined 会变成字面量字符串 "null""undefined",不是空字符串。

  • 变量:`Name: ${userName}`
  • 函数调用:`Time: ${new date().toLocaleTimeString()}`
  • 三元判断:`Status: ${isActive ? 'online' : 'offline'}`
  • 对象属性:`Price: $${product.price.toFixed(2)}`
  • 错误写法:`${let x = 1}`let 是语句,不是表达式,会报错)

嵌套模板字符串和标签函数——进阶但容易忽略的细节

模板字符串本身可嵌套,比如在 ${} 里再用一个模板字符串:${`inner ${value}`},这没问题;但更关键的是「标签函数」机制——它让模板字符串具备了运行前干预能力,比如 XSS 过滤、国际化、sql 参数化等。

标签函数接收两个参数:第一个是字符串片段数组(strings),第二个及以后是每个 ${} 的求值结果。它不是语法糖,而是一个可编程接口

  • 基础标签函数签名:function tag(strings, ...values) { }
  • 常见误用:把 html`${userInput}` 当作自动转义,其实默认不做任何处理——需要自己实现转义逻辑
  • 性能提示:带标签的模板字符串每次都会生成新数组,高频调用需留意开销
  • 调试技巧:打印 strings 可看清原始文本分段,比如 `a${1}b${2}c`["a","b","c"]

真正容易被忽略的,是模板字符串在非浏览器环境(如旧版 Node.js ${} 内部出错会导致整个字符串求值失败——比如 ${obj.user.name}obj.userundefined,就会抛 TypeError,而不是静默渲染为空。

text=ZqhQzanResources