JavaScript 中 ES6 怎么使用模板字符串（Template Literals）拼接多行文本与变量-js教程-PHP中文网

ES6模板字符串用反引号包裹，支持多行文本和${}变量插值，可嵌入变量、属性、表达式及函数调用，但需注意反引号不可替换、null/undefined会转为字符串、高频拼接性能较低且不防XSS。

javascript 中 es6 怎么使用模板字符串（template literals）拼接多行文本与变量

ES6 模板字符串用反引号（`）包裹，天然支持多行文本和变量插值，比传统加号拼接更直观、安全、易维护。

必须使用反引号，单引号或双引号内写${}不会生效。变量、属性、运算结果均可直接放入${}中，JS 自动求值并转为字符串：

const name = "小明"; const age = 25; console.log(`姓名：${name}，年龄：${age}`);
const user = { id: 1001, city: "杭州" }; console.log(`用户 ${user.id} 来自 ${user.city}`);
console.log(`2 + 3 = ${2 + 3}`); // 输出：2 + 3 = 5

换行符会原样保留在输出中，适合写 HTML 片段、SQL 查询、说明文案等：

const html = ` ${title} ${content} JavaScript 测试模式使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编下载 `;
const sql = `SELECT id, name FROM users WHERE status = 'active' AND created_at > '${startDate}'`;
注意：缩进空格也会被保留，如需整洁格式可配合字符串 trim 或工具函数处理

模板字符串内部可直接使用三元运算、函数调用、数组方法等，避免提前拼接中间变量：

console.log(`状态：${isActive ? "上线" : "下线"}，已运行 ${days} 天`);
const items = ["苹果", "香蕉"]; console.log(`共 ${items.length} 项：${items.join("、")}`);
const formatTime = t => new Date(t).toLocaleTimeString(); console.log(`更新时间：${formatTime(Date.now())}`);

用得顺手，但几个细节容易忽略：

反引号是必须的，误用单/双引号会导致${}变成普通文本
${undefined}或${null}会转成字符串"undefined"或"null"，建议提前判断或用空值合并操作符：${user?.name || "匿名"}
高频循环拼接（如渲染上千条列表）时，模板字符串每次都会生成新字符串，性能不如先 push 到数组再.join("")
拼接 HTML 时，若变量来自用户输入，需自行转义防 XSS，不能依赖模板字符串做安全过滤