JS 模板字符串

深入学习模板字符串和表达式 · 难度：入门 · +10XP

JavaScript 模板字符串完全指南

模板字符串（Template Literals）是 ES6 引入的强大字符串特性，使用反引号 </code> 替代单引号或双引号。模板字符串支持<strong>多行字符串</strong>、<strong>表达式插值</strong>（<code>${expression}</code>）、<strong>标签模板</strong>（Tagged Templates）等高级功能，极大提升了字符串处理的效率和可读性。</p> <h3>基本特性：插值与多行</h3> <ol> <li>使用反引号 <code> 包裹

const name = "张三";
const age = 25;
const score = 92.5;
// 表达式插值
const msg = "你好，" + name + "，今年" + age + "岁，成绩" + score + "分";
// 模板字符串写法（更清晰）：
const msg2 = "你好，" + name + "，今年" + age + "岁，成绩" + score + "分";
// ${} 中可以写任意表达式
const info = "姓名: " + name + "，明年: " + (age + 1) + "岁";
const math = "1 + 2 = " + (1 + 2);
// 三元运算
const status = "成绩：" + (score >= 60 ? "及格" : "不及格");
// 函数调用
function getLevel(s) { return s >= 90 ? "优秀" : s >= 60 ? "良好" : "需努力"; }
const level = name + " 的等级是：" + getLevel(score);

多行字符串与嵌套

// 多行 HTML 模板
const items = ["苹果", "香蕉", "橘子"];
const html = "

" +
  items.map(item => "  
" + item + "
").join("
") +
  "
";
console.log(html);

// 多行 SQL 查询
const table = "users";
const id = 123;
const sql = "SELECT *
" +
  "FROM " + table + "
" +
  "WHERE id = " + id + "
" +
  "  AND status = 'active'";
// 生成带样式的 HTML（模板字符串用于组件渲染的雏形）
function card(title, body) {
  return "

" +
    "  
" + title + "
" +
    "  
" + body + "
" +
    "
";
}
console.log(card("新闻", "这是内容"));

标签模板（Tagged Templates）

// 标签模板：在模板字符串前面加上一个函数名
// 函数接收两个参数：字符串片段数组 + 插值表达式值列表
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const val = values[i] ? "" + values[i] + "" : "";
    return result + str + val;
  }, "");
}
const name = "张三", city = "北京";
const result = highlight("姓名:" + name + "，城市:" + city);
console.log(result); // 姓名:张三，城市:北京

// 自定义 SQL 标签（防注入示例）
function sql(strings, ...values) {
  return strings.reduce((prev, curr, i) =>
    prev + curr + (i < values.length ? "'" + String(values[i]).replace(/'/g, "''") + "'" : ""), "");
}
const u = "admin", p = "123' OR '1'='1";
console.log(sql("SELECT * FROM users WHERE user=" + u + " AND pass=" + p));