模板字符串与动态传值总结
1. 模板字符串（反引号 ``）
模板字符串是ES6引入的字符串语法，用反引号（``）包裹，主要优势是简化动态字符串处理。
核心特点
- 支持变量/表达式嵌入（通过
${}语法） - 可直接换行（无需手动添加
\n） - 替代传统字符串拼接，更简洁易读
示例：Vue中的路由跳转
<!-- 模板字符串写法 --> <button @click="$router.push(`/detail?id=${item.id}`)">查看详情</button>等价于传统拼接写法，但更简洁：
<!-- 传统字符串拼接 --> <button @click="$router.push('/detail?id=' + item.id)">查看详情</button>2. ${} 模板占位符
${} 是模板字符串中用于嵌入动态内容的语法，仅在反引号内有效。
作用
- 嵌入变量（如
${userId}） - 执行表达式（如
${age + 1}） - 调用函数（如
${getUserName()}）
示例
const name = "小明"; const age = 20; const info = `姓名：${name}，明年年龄：${age + 1}`; // 输出："姓名：小明，明年年龄：21"3. 不用模板字符串的替代写法
模板字符串并非必须，以下是常用替代方案：
（1）单/双引号 + 字符串拼接（+ 号）
<!-- 动态绑定图片路径 --> <img :src="'/images/' + imgName + '.png'"> <!-- 多参数路由跳转 --> <button @click="$router.push('/user/' + userId + '?name=' + userName)">跳转</button>（2）Vue专属：对象/数组语法（推荐复杂场景）
路由跳转用对象传参：
<!-- 替代多参数拼接 --> <button @click="$router.push({ path: '/detail', query: { id: item.id, type: 'info' } })">跳转</button>动态class用数组语法：
<!-- 替代class字符串拼接 --> <div :class="['base-class', isActive ? 'active' : '', sizeClass]"></div>（3）多行字符串处理
// 用 \n 手动换行 const text = "第一行\n第二行\n第三行"; // 用数组拼接 const text = [ "第一行", "第二行", "第三行" ].join('\n');总结
- 模板字符串（反引号+
${}）是简化动态字符串的语法糖，非强制但推荐使用 ${}用于在模板字符串中嵌入变量、表达式或函数调用- 替代方案包括：字符串拼接（+号）、Vue对象/数组语法、手动换行符
- 复杂场景（如多参数路由、动态样式）优先用对象/数组语法，更易维护
