第三十二天：字符串扩展 — 模板字符串与便捷方法
蜗牛往上爬 · 前端工业可视化学习笔记 第 32 篇
字符串拼接曾是 JS 最繁琐的部分之一——又是+又是\n。ES6 的模板字符串用反引号 +${}彻底改变体验，支持多行和表达式。再加 includes/startsWith/padStart 等便捷方法，字符串处理效率倍增。
目录
一、模板字符串（最重要）
const name = "CNC-001";
const temp = 65;
// ES5：拼接麻烦
console.log("设备 " + name + " 温度 " + temp + "°C");
// ES6：模板字符串（反引号 ``）
console.log(`设备 ${name} 温度 ${temp}°C`);
// 支持多行（不用 \n）
const info = `
设备编号：${name}
当前温度：${temp}°C
状态：运行中
`;
// 支持任意表达式
console.log(`温度翻倍：${temp * 2}`);
console.log(`是否高温：${temp > 50 ? "是" : "否"}`);
二、模板字符串进阶用法
生成列表 HTML（大屏渲染核心场景）
const devices = [
{ id: "CNC-001", temp: 65 },
{ id: "AGV-002", temp: 42 }
];
// map 生成每一项 + join 合并
const listHTML = devices
.map(d => `<li>${d.id}（${d.temp}°C）</li>`)
.join("");
// "<li>CNC-001（65°C）</li><li>AGV-002（42°C）</li>"
// 实际渲染：生成卡片
function renderCards(devices) {
const container = document.getElementById("device-list");
container.innerHTML = devices
.map(d => `
<div class="card ${d.temp > 50 ? "is-hot" : ""}">
<span>${d.id}</span>
<strong>${d.temp}°C</strong>
</div>
`)
.join("");
}
三、includes / startsWith / endsWith
// includes：是否包含子串
const id = "CNC-001";
console.log(id.includes("CNC")); // true
console.log(id.includes("AGV")); // false
// startsWith / endsWith：开头/结尾
const status = "device-running";
console.log(status.startsWith("device")); // true
console.log(status.endsWith("running")); // true
// 应用：筛选某类设备
const devices = ["CNC-001", "AGV-002", "CNC-004"];
const cncList = devices.filter(d => d.startsWith("CNC"));
// ["CNC-001", "CNC-004"]
对比 indexOf：
// ES5
console.log(id.indexOf("CNC") !== -1); // true
// ES6（更直观）
console.log(id.includes("CNC")); // true
四、repeat / padStart / padEnd
// repeat：重复字符串
console.log("-".repeat(20)); // "--------------------"
// padStart/padEnd：补全到指定长度
console.log("5".padStart(3, "0")); // "005"
console.log("8".padEnd(3, ".")); // "8.."
// 应用：设备编号补零
const formatId = n => String(n).padStart(4, "0");
console.log(formatId(5)); // "0005"
console.log(formatId(123)); // "0123"
// 应用：大屏加载进度条
function loading(percent) {
const bar = "█".repeat(percent / 10) + "░".repeat(10 - percent / 10);
return `${bar} ${percent}%`;
}
console.log(loading(70)); // "███████░░░ 70%"
五、其他扩展
// trim：去首尾空格（表单输入必用）
const input = " CNC-001 ";
console.log(input.trim()); // "CNC-001"
// 字符串解构
const [a, b] = "XY";
console.log(a); // "X"
// 数字转字符串简写
const t = 65;
console.log(`${t}`); // "65"
六、实战：模板字符串改造渲染代码
// ===== ES5：拼接（难读）=====
function renderDevice(device) {
return "<div class='card'>" +
"<div class='header'>" + device.name + "</div>" +
"<div class='temp'>" + device.temp + "°C</div>" +
"</div>";
}
// ===== ES6：模板字符串（清晰）=====
const renderDevice = ({ name, temp, status }) => {
const statusClass = status === "故障" ? "danger" : "normal";
return `
<div class="card">
<div class="header">${name}</div>
<div class="temp">${temp}°C</div>
<div class="status status--${statusClass}">${status}</div>
</div>
`;
};
模板字符串 vs 拼接：
七、总结
🎯 模板字符串是渲染 HTML、拼接提示语的首选。明天学数组扩展——展开运算符
...是最后一个高频语法。