4. 模板字符串生成结构化文本

模板字符串生成结构化文本

模板字符串使用反引号（`）包裹，支持多行书写、${} 嵌入变量和表达式。本节用一份订单摘要来演示：把订单号、客户、商品明细、小计、运费、合计拼成一段对齐的多行文本，并验证换行与缩进。

订单数据结构

先准备一份订单数据，商品明细用数组保存，每项包含名称、单价、数量：

const order = {
  id: "SO-20240612-0087",
  customer: "林晓",
  items: [
    { name: "机械键盘", price: 399, qty: 1 },
    { name: "USB-C 数据线", price: 29.9, qty: 3 },
    { name: "鼠标垫", price: 45, qty: 2 }
  ],
  shipping: 12
};

用模板字符串拼接摘要

关键点有三个：多行直接换行书写；表达式用 ${} 计算行小计与合计；对齐用 padEnd 补齐商品名，让金额列整齐。

const lineTotal = (it) => it.price * it.qty;
const subtotal = order.items.reduce((s, it) => s + lineTotal(it), 0);
const total = subtotal + order.shipping;

const detail = order.items
  .map(it => `  ${it.name.padEnd(12, " ")} x${it.qty}  ¥${lineTotal(it).toFixed(2)}`)
  .join("\n");

const summary = `订单摘要
订单号：${order.id}
客户：${order.customer}
------------------------------
商品明细：
${detail}
------------------------------
小计：¥${subtotal.toFixed(2)}
运费：¥${order.shipping.toFixed(2)}
合计：¥${total.toFixed(2)}`;

console.log(summary);

预期输出与验证

运行后控制台应输出如下结构（金额由给定数据直接算出：小计 399 + 89.7 + 90 = 578.70，合计 590.70）：

订单摘要
订单号：SO-20240612-0087
客户：林晓
------------------------------
商品明细：
  机械键盘        x1  ¥399.00
  USB-C 数据线    x3  ¥89.70
  鼠标垫          x2  ¥90.00
------------------------------
小计：¥578.70
运费：¥12.00
合计：¥590.70

验证换行与缩进是否符合预期，可用以下断言：

const lines = summary.split("\n");
console.log(lines.length);              // 12 行
console.log(lines[0] === "订单摘要");    // true
console.log(lines[5].startsWith("  ")); // true，明细行有 2 空格缩进
console.log(summary.includes("¥590.70")); // true

可复用要点

• 多行文本直接写在反引号内，换行和缩进原样保留，无需 \n 拼接。
• ${} 内可放变量、函数调用、三元表达式，但不能放语句。
• 对齐用 padEnd，金额统一 toFixed(2)，避免浮点显示误差。
• 用 split("\n") 拆行后逐行断言，是验证换行与缩进最直接的方式。