JavaScript模板字符串用反引号包裹,支持${}插值、多行文本和任意表达式运算,提升可读性与安全性,但不自动防XSS,需手动转义用户输入。

JavaScript模板字符串(Template Literal)是一种用反引号(`)包裹的字符串语法,它支持嵌入表达式、多行文本和字符串插值,让字符串拼接更直观、更安全。
支持变量插值,告别加号拼接
传统字符串拼接常靠+连接,容易出错且可读性差;模板字符串用${}直接插入变量或表达式,逻辑一目了然。
- 普通写法:
"Hello " + name + ", you are " + age + " years old." - 模板字符串:
`Hello ${name}, you are ${age} years old.` - 还能放表达式:
`Next year you'll be ${age + 1}`
天然支持多行字符串
不用\n或+换行,直接回车就能换行,缩进和格式保留原样。
- 以前:
"Line 1\nLine 2\nLine 3"或用+连多行 - 现在:
`Line 1
(换行符会真实显示)
Line 2
Line 3` - 适合HTML片段、SQL查询、说明文案等场景
可嵌套函数调用与条件逻辑
大括号里不限于变量,任何合法JS表达式都可运行,包括三元运算、函数调用甚至简单对象属性访问。
立即学习“Java免费学习笔记(深入)”;
`Status: ${isActive ? 'Online' : 'Offline'}``Price: $${(price * 1.1).toFixed(2)}`-
`User: ${user?.name || 'Anonymous'}`(配合可选链)
注意点:不是万能,但比旧方式更可靠
模板字符串本身不会自动转义HTML或防XSS,需自行处理敏感内容;另外反引号不能嵌套,如需在${}中用反引号,得用字符串拼接或转义。
- 别这样:
`text ${`inner`}`❌(语法错误) - 可以这样:
`text ${"inner"}`✅ 或`text ${"`inner`"}`✅ - 服务端渲染或插入DOM前,仍需校验/转义用户输入











