什么是javascript模板字符串_它比普通字符串强在哪?

7次阅读

模板字符串用反引号包裹,支持嵌入变量(${…})、多行文本及原始字符串处理(String.raw),解决普通字符串无法实现的动态拼接、格式保留与转义控制问题。

什么是 javascript 模板字符串_它比普通字符串强在哪?

模板字符串不是“更强”,而是解决普通字符串做不到的事——比如嵌入变量、换行、多行拼接。它用 `(反引号)包裹,不是语法糖,是语言层面的新能力。

怎么写模板字符串?注意反引号和插值语法

必须用 ` 开头和结尾;变量或表达式用 ${……} 插入,里面可以是任意 JavaScript 表达式,不限于变量名。

  • ${name} 是最常见用法,但 ${name.toUpperCase()}${items.length> 0 ? 'has' : 'no'} 同样合法
  • 不能混用:不能用 "${name}"'${name}',那只是字面量字符串,${} 不会被解析
  • 空模板 `` 是合法的,结果是空字符串 ""
`Hello ${user.name}, you have ${count || 0} new message${count === 1 ? '':'s'}.`

为什么 不能用 + 拼接代替?多行和缩进问题

普通字符串用 +concat() 拼接时,换行需显式加 n,且缩进空格会原样出现在结果里;模板字符串保留所有换行和空白字符,这对生成 HTML、SQL 或配置文本很关键。

  • 下面这段代码中,str1 的换行和缩进全是字面量,str2 的换行由模板字符串自然保留
  • 想让多行模板不带多余缩进?得手动删掉每行前的空格,或用 .trim() / 正则清理
const str1 = 'SELECT * FROM usersnWHERE active = true;'; 

const str2 = SELECT * FROM users WHERE active = true;;

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

String.raw 是干啥的?处理反斜杠不转义的场景

模板字符串默认会解析 nt 等转义序列;如果要原样输出反斜杠(比如 Windows 路径、正则模式、JSON 字符串),就得用 String.raw 标签函数。

  • `C:Usersname` 实际得到的是 "C:Usersname"(因为 Un 被转义)
  • String.raw`C:Usersname` 才得到真正的 "C:\Users\name"
  • String.raw 只影响字面量部分,${……} 内的表达式照常执行
console.log(`n`);           // 换行 console.log(String.raw`n`); // n 两个字符

真正容易被忽略的是嵌套模板和标签函数的组合能力——比如 styled.div`color: ${p => p.theme.color};` 这类用法,底层依赖模板字符串的“原始字符串 + 参数数组”结构。普通字符串完全无法支撑这种设计。

星耀云
版权声明:本站原创文章,由 星耀云 2026-01-05发表,共计1105字。
转载说明:转载本网站任何内容,请按照转载方式正确书写本站原文地址。本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。
text=ZqhQzanResources