JavaScript 中怎么利用模板字符串拼接复杂文本内容-js教程-PHP中文网

模板字符串用反引号包裹，支持多行文本、嵌入任意javascript表达式，并可结合标签函数实现国际化、样式提取等高级功能，但需手动处理xss等安全风险。

javascript 中怎么利用模板字符串拼接复杂文本内容

模板字符串（Template Literals）是 JavaScript 中拼接复杂文本最自然、最强大的方式，用反引号 ` 包裹，支持多行书写和嵌入表达式，特别适合生成 HTML 片段、配置说明、日志消息等结构化内容。

支持多行文本，无需换行符或连接符

传统字符串换行需用 + 拼接或 \n，易出错且难读。模板字符串直接换行即可保留格式：

✅ 正确写法（清晰直观）：

const html = `
<div class="card">
<h2>${title}</h2>
<p>作者：${author}</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5703" title="deep-java-review"><img
														src="https://img.php.cn/upload/skill/000/000/081/179060057413304.jpg" alt="deep-java-review" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill5703" title="deep-java-review" class="overflowclass">deep-java-review</a>
													<p class="overflowclass">Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill5703" title="deep-java-review" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
<time>${new Date().toISOString().split('T')[0]}</time>
</div>
`;

内嵌任意 JavaScript 表达式，包括函数调用和逻辑判断

在 ${...} 中可写变量、运算、三元表达式，甚至调用函数——无需提前拼好值：

简单计算：${price * quantity}
条件渲染：${isActive ? '在线' : '离线'}
函数调用：${formatDate(post.date)}（只要函数返回字符串或可转字符串的值）
数组映射生成列表：${items.map(item => `<li>${item.name}</li>`).join('')}

避免 XSS 风险：模板字符串本身不防注入，需按场景主动转义

模板字符串只是拼接工具，不会自动过滤 HTML 或 JS。若拼接用户输入并插入 DOM，必须手动处理：

插入纯文本（如 textContent）：天然安全，无需额外操作
插入 HTML（如 innerHTML）：对动态内容做 HTML 转义，例如用 DOMPurify.sanitize() 或简易函数：
function escapeHtml(str) { return str.replace(/[&"'/]/g, c => ({'&':'&','':'>','"':'"',"'":''','/':'/'}[c])); }
服务端渲染或模板引擎中，仍需遵循该平台的转义规则