const name = '张三'const age = 25// 传统拼接：引号、加号满天飞，变量多了容易漏引号错加号const str1 = '姓名：' + name + '，年龄：' + age + '岁'// 多行字符串：手动加 \n，可读性差const multi1 = '第一行\n第二行\n第三行'

// 模板字符串：反引号包裹，${} 插值，简洁直观const str2 = `姓名：${name}，年龄：${age}岁`// 多行字符串：直接换行，书写格式和最终呈现一致const multi2 = `第一行第二行第三行`console.log(str1 === str2)        // trueconsole.log(multi1 === multi2)    // true

// 单引号字符串const a = 'hello'// 双引号字符串const b = "hello"// 模板字符串（反引号，键盘左上角 Esc 下方的符号）const c = `hello`

// 传统：内部用引号需要转义或换引号const str1 = '他说："你好"'const str2 = "他说：'你好'"// 模板字符串：内部引号随便用const str3 = `他说："你好"，她说：'你好'`

const name = '张三'const age = 25// 变量插值const str = `姓名：${name}，年龄：${age}岁`// 姓名：张三，年龄：25岁// 表达式插值const calc = `${a} + ${b} = ${a + b}`// 函数调用插值const greet = `欢迎：${getUserName()}`

// 传统：手动加 \nconst html1 = '<div>\n  <p>hello</p>\n</div>'// 模板字符串：直接换行，写起来就是渲染出来的样子const html2 = `<div>  <p>hello</p></div>`console.log(html1 === html2)  // true

const name = '张三'const age = 25const city = '北京'// 单个变量const str1 = `我叫${name}`// 我叫张三// 多个变量const str2 = `我叫${name}，今年${age}岁，住在${city}`// 我叫张三，今年25岁，住在北京

// 直接换行，不用 \nconst address = `  姓名：张三  地址：北京市朝阳区  邮编：100000`// 拼接 HTML 模板（非常常见）const card = `  <div class="card">    <h3>${title}</h3>    <p>${content}</p>    <span>${date}</span>  </div>`

const a = 10const b = 20// 算术运算const calc = `${a} + ${b} = ${a + b}，${a} × ${b} = ${a * b}`// 10 + 20 = 30，10 × 20 = 200// 比较运算const compare = `${a} > ${b} ? ${a > b}`// 10 > 20 ? false// 三元运算const level = `成绩：${score >= 60 ? '及格' : '不及格'}`// 成绩：及格// 逻辑运算const status = `状态：${isActive && isVerified ? '正常' : '异常'}`

const user = {  name: '李四',  age: 30,  address: { city: '上海', district: '浦东新区' }}const info = `  姓名：${user.name}  年龄：${user.age}  城市：${user.address.city}  区域：${user.address.district}`

const tags = ['前端', 'Vue', 'TypeScript']const tagStr = `标签：${tags.join('、')}`// 标签：前端、Vue、TypeScriptconst countStr = `共${tags.length}个标签，第一个是${tags[0]}`// 共3个标签，第一个是前端

function formatDate(date) {  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`}const now = new Date()const dateStr = `今天是：${formatDate(now)}`// 今天是：2026-10-7// 模板字符串中调用模板字符串（嵌套）const full = `用户信息：${`姓名：${name}，年龄：${age}`}` 

let count = 0const str = `计数：${count++}`  // 定义时 count++ 就执行了console.log(count)  // 1（已经自增了）console.log(str)    // 计数：0（自增前的值）

`数字：${123}`        // "数字：123"`布尔：${true}`        // "布尔：true"`数组：${[1,2,3]}`     // "数组：1,2,3"（数组 toString）`对象：${{a:1}}`       // "对象：[object Object]"`null：${null}`        // "null：null"`undefined：${undefined}` // "undefined：undefined"

const x = 10const y = 20const str = `数值1：${x}，数值2：${y}`

模板：`数值1：${x}，数值2：${y}`按 ${} 切割：  第一个 ${} 前面："数值1："  第一个 ${} 和第二个 ${} 之间："，数值2："  第二个 ${} 后面：""（空字符串）字符串片段数组：["数值1：", "，数值2：", ""]插值变量数组：[10, 20]最终拼接：  "数值1：" + 10 + "，数值2：" + 20 + ""  = "数值1：10，数值2：20"

const x = 10const y = 20// 标签函数：第一个参数是字符串片段数组，剩余参数是插值变量function logTemplate(strings, ...values) {  console.log('字符串片段：', strings)  // ["数值1：", "，数值2：", ""]  console.log('插值变量：', values)  // [10, 20]  console.log('原始字符串（raw）：', strings.raw)  // ["数值1：", "，数值2：", ""]（raw 保留原始转义符）  // 手动拼接还原  return strings.reduce((acc, str, i) => acc + str + (values[i] || ''), '')}logTemplate`数值1：${x}，数值2：${y}`

interface TemplateStringsArray extends ReadonlyArray<string> {  readonly raw: ReadonlyArray<string>}

function logRaw(strings, ...values) {  console.log('处理后：', strings[0])  // "路径：C:user\node"（\n 被解析为换行）  console.log('原始：', strings.raw[0]) // "路径：C:\\user\\node"（转义符保留）}logRaw`路径：C:\user\node`

// ES6 模板字符串const str = `姓名：${name}，年龄：${age}岁`// 编译后（近似）var str = "姓名：" + name + "，年龄：" + age + "岁"

// ES6 标签模板tag`姓名：${name}`// 编译后（近似）tag(_templateObject, name)// _templateObject 是缓存的 TemplateStringsArray（["姓名：", ""]）

// 传统方式：手动加 \n，可读性差const html1 = '<divclass="card">' +  '<h3>' + title + '</h3>' +  '<p>' + content + '</p>' +  '</div>'// 模板字符串：直接换行，写起来就是渲染出来的样子const html2 = `<divclass="card">  <h3>${title}</h3>  <p>${content}</p></div>`

const str = `  hello`console.log(str)// 输出：// (空行)//   hello// (空行)// 开头和结尾的换行、中间的缩进都保留了

const str = `  hello`.trim()console.log(str)  // "hello"（首尾空白去掉了，中间缩进保留）

function renderUserCard(user) {  return `    <div class="user-card">      <img src="${user.avatar}" alt="${user.name}" />      <div class="user-info">        <h3>${user.name}</h3>        <p class="title">${user.title}</p>        <p class="desc">${user.description || '暂无简介'}</p>      </div>      <button class="follow-btn" data-id="${user.id}">        ${user.isFollowed ? '已关注' : '关注'}      </button>    </div>  `}

function buildQuery(filters) {  return `    SELECT       u.id, u.name, u.email, u.created_at    FROM users u    WHERE 1=1      ${filters.name ? `AND u.name LIKE '%${filters.name}%'` : ''}      ${filters.status ? `AND u.status = '${filters.status}'` : ''}      ${filters.startDate ? `AND u.created_at >= '${filters.startDate}'` : ''}    ORDER BY u.created_at DESC    LIMIT ${filters.pageSize || 20}    OFFSET ${(filters.page - 1) * (filters.pageSize || 20)}  `}

function logError(error, context) {  const message = `========================================  错误时间：${newDate().toISOString()}  错误类型：${error.name}  错误信息：${error.message}  错误堆栈：${error.stack}  上下文：${JSON.stringify(context)}========================================  `  console.error(message)}

const price = 99const count = 3const discount = 0.8const isVip = true// 算术运算const total = `总价：${price * count * discount}元`// 总价：237.6元// 三元运算const vipTag = `会员：${isVip ? 'VIP会员' : '普通用户'}`// 会员：VIP会员// 嵌套三元（多层判断）const level = `评级：${score >= 90 ? '优秀' : score >= 80 ? '良好' : score >= 60 ? '及格' : '不及格'}`// 逻辑运算const status = `状态：${isActive && isVerified ? '正常' : '待验证'}`// 比较运算const compare = `价格对比：原价${originalPrice}${originalPrice > currentPrice ? '>' : '<='} 现价${currentPrice}`

import dayjs from 'dayjs'const date = new Date()const amount = 1234567.89// 格式化日期const dateStr = `创建时间：${dayjs(date).format('YYYY-MM-DD HH:mm:ss')}`// 创建时间：2026-10-07 10:30:00// 格式化金额const moneyStr = `金额：¥${amount.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}`// 金额：¥1,234,567.89// 编码 URLconst url = `链接：https://api.example.com/search?q=${encodeURIComponent(keyword)}`// 转义 HTMLconst safeHtml = `内容：${escapeHtml(userInput)}`

// 函数返回对象，再访问属性const userStr = `用户名：${getUser().name}`// 数组方法链式调用const top3 = `前三名：${users.map(u => u.name).slice(0, 3).join('、')}`// 异步函数（注意：直接调用会显示 Promise 对象）const bad = `用户：${fetchUser()}`  // 用户：[object Promise]

function buildPattern(keyword) {  // 动态生成匹配关键词的正则  return new RegExp(`(${keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi')}

// 普通模板字符串：解析转义符const normal = `路径：C:\user\node`console.log(normal)// 输出：// 路径：C:user// ode// \u 被尝试解析为 Unicode 转义（可能报错或忽略），\n 被解析为换行// String.raw：保留原始字符串（不解析转义符）const raw = String.raw`路径：C:\user\node`console.log(raw)// 输出：路径：C:\user\node// \u 和 \n 都保留为字面量字符，不被解析

// String.raw 的简化实现function myRaw(strings, ...values) {  let result = ''  strings.forEach((str, i) => {    result += strings.raw[i]  // 用 raw 数组（原始未转义）    if (i < values.length) {      result += values[i]    }  })  return result}// 效果和 String.raw 一样console.log(myRaw`C:\user\node`)  // C:\user\node

function compare(strings, ...values) {  console.log('处理后（strings）：', strings[0])  // "C:user\node"（\n 被解析为换行）  console.log('原始（strings.raw）：', strings.raw[0])  // "C:\\user\\node"（反斜杠保留，显示为 \\）}compare`C:\user\node`

// 普通字符串：反斜杠被转义，路径出错const path1 = 'C:\Users\Admin\Documents\file.txt'console.log(path1)// C:UsersAdminDocumentsfile.txt（反斜杠全没了）// 普通字符串：需要双反斜杠转义const path2 = 'C:\\Users\\Admin\\Documents\\file.txt'console.log(path2)// C:\Users\Admin\Documents\file.txt（正确，但写起来麻烦）// String.raw：直接写，不用转义const path3 = String.raw`C:\Users\Admin\Documents\file.txt`console.log(path3)// C:\Users\Admin\Documents\file.txt（正确，简洁）

// 普通字符串构造正则：需要双重转义（字符串转义 + 正则转义）const pattern1 = new RegExp('\\d{3}-\\d{4}-\\d{4}')// \\d 在字符串中变成 \d，正则再解析 \d 为数字// String.raw 构造正则：只需要正则层面的转义const pattern2 = new RegExp(String.raw`\d{3}-\d{4}-\d{4}`)// \d 直接保留，正则解析为数字// 两种方式等价，但 String.raw 更简洁console.log(pattern1.source === pattern2.source)  // true

// 普通字符串：每个反斜杠都要双写const escapeSeq1 = '换行符：\\n，制表符：\\t，回车：\\r，反斜杠：\\\\'// String.raw：直接写const escapeSeq2 = String.raw`换行符：\n，制表符：\t，回车：\r，反斜杠：\\`

function generateCode(variableName) {  return String.raw`    const ${variableName} = "hello\nworld";    console.log(${variableName});  `}// 生成的代码中 \n 保留为字面量，不会被解析成换行

const dir = 'Users'const file = 'config.json'const path = String.raw`C:\${dir}\Admin\${file}`console.log(path)// C:\Users\Admin\config.json// 插值正常计算，静态部分的反斜杠保留

// 问题：\` 被解析为转义反引号，模板没结束// const bad = String.raw`路径：C:\`// 解决：用 \\ 结尾const good = String.raw`路径：C:\\`console.log(good)  // 路径：C:\

// 普通模板字符串：直接拼接const str1 = `姓名：${name}`// 标签模板：在模板前加标签函数const str2 = myTag`姓名：${name}`// 等价于：myTag(["姓名：", ""], name)// 引擎把模板拆解后传给 myTag 函数

function myTag(strings, ...values) {  // strings：字符串片段数组（TemplateStringsArray）  //   - 按 ${} 切割的静态文本  //   - 有 raw 属性（原始未转义字符串）  // values：插值变量数组（${} 内表达式的计算结果）  //   - values.length = strings.length - 1（通常）  console.log('strings:', strings)  // ["姓名：", "，年龄：", "岁"]  console.log('values:', values)    // ["张三", 25]  // 自定义处理逻辑，返回处理后的字符串  return strings.reduce((acc, str, i) => acc + str + (values[i] || ''), '')}const name = '张三'const age = 25myTag`姓名：${name}，年龄：${age}岁`

模板：`姓名：${name}，年龄：${age}岁`按 ${} 切割：  strings[0] = "姓名："  ${name} → values[0] = "张三"  strings[1] = "，年龄："  ${age} → values[1] = 25  strings[2] = "岁"调用标签函数：myTag(strings, "张三", 25)

function sanitizeHTML(strings, ...values) {  let result = ''  strings.forEach((str, i) => {    result += str    if (values[i] !== undefined) {      // 对插值变量进行 HTML 转义      result += String(values[i])        .replace(/&/g, '&amp;')        .replace(/</g, '&lt;')        .replace(/>/g, '&gt;')        .replace(/"/g, '&quot;')        .replace(/'/g, '&#39;')    }  })  return result}// 使用：静态部分不转义，只有插值变量（用户输入）被转义const userInput = '<script>alert("恶意代码")</script>'const safeHTML = sanitizeHTML`<div>用户输入：${userInput}</div>`console.log(safeHTML)// <div>用户输入：&lt;script&gt;alert(&quot;恶意代码&quot;)&lt;/script&gt;</div>// 浏览器只当作文字显示，不会执行脚本

function formatMoney(strings, ...values) {  return strings.reduce((acc, str, i) => {    const value = values[i]    // 数字类型的插值自动格式化为千分位金额    const formatted = typeof value === 'number'      ? `¥${value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`      : value    return acc + str + (formatted !== undefined ? formatted : '')  }, '')}const price = 123456.789const fee = 987.6const result = formatMoney`订单金额：${price}，手续费：${fee}，总计：${price + fee}`console.log(result)// 订单金额：¥123,456.79，手续费：¥987.60，总计：¥124,444.39

const i18n = {  zh: { greet: '你好', welcome: '欢迎使用{0}功能' },  en: { greet: 'Hello', welcome: 'Welcome to {0} feature' }}function t(lang) {  return (strings, ...values) => {    let result = strings.join('')    // 替换 {0}、{1} 占位符    values.forEach((val, i) => {      result = result.replace(`{${i}}`, val)    })    // 匹配多语言配置    return i18n[lang][result.trim()] || result  }}const zhT = t('zh')const enT = t('en')console.log(zhT`greet`)      // 你好console.log(enT`greet`)      // Hello

import styled from 'styled-components'// 标签模板定义样式组件const Button = styled.button`  background: ${props => props.primary ? 'blue' : 'white'};  color: ${props => props.primary ? 'white' : 'blue'};  padding: 10px 20px;  border-radius: 4px;  cursor: pointer;`// 使用<Button primary>主要按钮</Button>

import { sql } from 'slonik'// 标签模板安全构建 SQL（自动参数化，防 SQL 注入）const query = sql`  SELECT * FROM users  WHERE name = ${userName}  AND age > ${minAge}`// slonik 会自动把插值转为参数化查询，不会直接拼字符串

// 标签模板：语法简洁，静态和动态分离sanitizeHTML`<div>${userInput}</div>`// 普通函数调用：需要手动区分静态和动态sanitizeHTML('<div>' + userInput + '</div>')// 函数无法区分哪部分是静态的、哪部分是用户输入的，只能全部转义

// 返回数组function toArray(strings, ...values) {  return values}const arr = toArray`a${1}b${2}c`  // [1, 2]// 返回对象function toObject(strings, ...values) {  return { strings, values }}

// 字符串字面量类型：变量只能是这几个值之一type Color = 'red' | 'blue' | 'green'type Size = 'small' | 'large'const c: Color = 'red'    // 合法// const c2: Color = 'yellow'  // 报错：类型不匹配

type Color = 'red' | 'blue'type Size = 'small' | 'large'// 模板字面量类型：组合出所有可能的字符串type Style = `${Color}-${Size}`// Style = "red-small" | "red-large" | "blue-small" | "blue-large"const s1: Style = 'red-small'   // 合法const s2: Style = 'blue-large'  // 合法// const s3: Style = 'green-small' // 报错：green 不在 Color 中// const s4: Style = 'red-medium'  // 报错：medium 不在 Size 中

type Color = 'red' | 'blue'// Uppercase<T>：转大写type UpperColor = `${Uppercase<Color>}`// "RED" | "BLUE"// Lowercase<T>：转小写type LowerColor = `${Lowercase<'RED' | 'BLUE'>}`// "red" | "blue"// Capitalize<T>：首字母大写type CapColor = `${Capitalize<'red' | 'blue'>}`// "Red" | "Blue"// Uncapitalize<T>：首字母小写type UncapColor = `${Uncapitalize<'Red' | 'Blue'>}`// "red" | "blue"

type ApiModule = 'user' | 'order' | 'product'type ApiAction = 'list' | 'detail' | 'create' | 'update' | 'delete'// 约束 API 路径格式：/模块/操作type ApiPath = `/${ApiModule}/${ApiAction}`// "/user/list" | "/user/detail" | ... | "/product/delete"// 共 3×5 = 15 种可能的路径function request(path: ApiPath) {  console.log('请求：', path)}request('/user/list')      // 合法request('/order/detail')   // 合法// request('/goods/list')   // 报错：goods 不在 ApiModule 中// request('/user/export')   // 报错：export 不在 ApiAction 中// request('user/list')      // 报错：缺少开头的 /

type EventName = 'click' | 'change' | 'input' | 'submit'type EventHandler = `on${Capitalize<EventName>}`// "onClick" | "onChange" | "onInput" | "onSubmit"interface Props {  onClick?: () => void  onChange?: (value: string) => void  // 可以用 EventHandler 约束所有事件处理函数  [key: `on${Capitalize<EventName>}`]: ((...args: any[]) => void) | undefined}

type ButtonVariant = 'primary' | 'secondary' | 'danger'type ButtonSize = 'sm' | 'md' | 'lg'type ButtonClass = `btn-${ButtonVariant}-${ButtonSize}`// "btn-primary-sm" | "btn-primary-md" | ... | "btn-danger-lg"function getButtonClass(variant: ButtonVariant, size: ButtonSize): ButtonClass {  return `btn-${variant}-${size}`  // TS 能推断返回类型是 ButtonClass}

type UserField = 'name' | 'email' | 'phone'// 约束 get/set 方法名type UserGetter = `get${Capitalize<UserField>}`// "getName" | "getEmail" | "getPhone"type UserSetter = `set${Capitalize<UserField>}`// "setName" | "setEmail" | "setPhone"// 约束带前缀的属性type UserState = {  [K in UserField as `user_${K}`]: string}// { user_name: string; user_email: string; user_phone: string }

// Vue 组件的 v-model 事件名约束type ModelEvent = `update:${string}`// 约束以 "update:" 开头的事件名// React 的 data-* 属性interface DataAttributes {  [key: `data-${string}`]: string}// 约束所有以 "data-" 开头的属性

function greet<T extends string>(name: T): `Hello, ${T}!` {  return `Hello, ${name}!`}const result = greet('World')// result 的类型被推断为 "Hello, World!"（字面量类型，不是 string）

type A = 'a' | 'b' | 'c' | 'd' | 'e'  // 5个type B = '1' | '2' | '3' | '4' | '5'  // 5个type C = `${A}-${B}`  // 25个类型，还能接受// 如果 A 和 B 各有 100 个，就是 10000 个类型，编译会很慢

type N = numbertype Bad = `value-${N}`  // 报错：number 不能用于模板字面量类型type Good = `value-${string}`  // 合法（string 是宽泛类型）

const name = '张三'`姓名：${name}`  // 姓名：张三

const a = 10, b = 20`和：${a + b}，积：${a * b}，商：${(a / b).toFixed(2)}`// 和：30，积：200，商：0.50

`${a} > ${b} ? ${a > b}`// 10 > 20 ? false

const isActive = true, isVerified = false`状态：${isActive && isVerified ? '正常' : '异常'}`// 状态：异常

const score = 85`评级：${score >= 90 ? '优秀' : score >= 80 ? '良好' : score >= 60 ? '及格' : '不及格'}`// 评级：良好

const user = { name: '李四', address: { city: '上海' } }`城市：${user.address.city}`// 城市：上海

const users = [{ name: '张三', score: 90 }, { name: '李四', score: 80 }]`前三名：${users.map(u => u.name).join('、')}`// 前三名：张三、李四`平均分：${(users.reduce((sum, u) => sum + u.score, 0) / users.length).toFixed(1)}`// 平均分：85.

function formatDate(date) {  return date.toISOString().slice(0, 10)}`日期：${formatDate(newDate())}`// 日期：2026-10-07

const name = '张三'`用户信息：${`姓名：${name}`}`// 用户信息：姓名：张三

const user = null`姓名：${user?.name ?? '未知'}`// 姓名：未知

interface User {  name: string  tags: string[]  score: number}const user: User = { name: '李四', tags: ['前端', 'TS'], score: 85 }const userInfo = `  用户名：${user.name}  标签：${user.tags.join('、') || '无标签'}  评级：${user.score >= 90 ? '优秀' : user.score >= 80 ? '良好' : '及格'}  加分后：${user.score + user.tags.length * 5}`

async function getUserId(name) {  // 模拟接口请求  return new Promise(resolve => setTimeout(() => resolve(1001), 100))}// 问题：直接调用异步函数，显示 Promise 对象const badStr = `用户ID：${getUserId('李四')}`console.log(badStr)// 用户ID：[object Promise]

async function renderUserInfo(name) {  const userId = await getUserId(name)  // 先 await 拿到结果  const str = `用户ID：${userId}`        // 再用结果插值  console.log(str)  // 用户ID：1001  return str}renderUserInfo('李四')

// 在 Vue/React 组件中const userId = ref(null)async function loadUser() {  userId.value = await getUserId('李四')}// 模板中用变量插值（变量有值后才渲染）// <div>用户ID：{{ userId }}</div> 

// 不推荐，可读性差const str = (async () => {  const userId = await getUserId('李四')  return `用户ID：${userId}`})()// str 还是 Promise，需要 await  

let count = 0// 副作用：count++ 会立即执行const str = `计数：${count++}`console.log(count)  // 1（已经自增了）console.log(str)    // 计数：0（自增前的值，因为 count++ 是后自增）// 更危险：函数调用有副作用function increment() {  count++  return count}const str2 = `计数：${increment()}`console.log(count)  // 2

let name = '张三'const str = `姓名：${name}`name = '李四'console.log(str)  // 姓名：张三（不会自动更新）

const render = (name) => `姓名：${name}`console.log(render('张三'))  // 姓名：张三console.log(render('李四'))  // 姓名：李四

function formatMoney(strings, ...values) {  return strings.reduce((acc, str, i) => {    const value = values[i]    // 只对数字类型的插值做格式化    const formatted = typeof value === 'number'      ? `¥${value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`      : value    return acc + str + (formatted !== undefined ? formatted : '')  }, '')}// 使用const price = 123456.789const fee = 987.6const result = formatMoney`订单金额：${price}，手续费：${fee}，总计：${price + fee}`console.log(result)// 订单金额：¥123,456.79，手续费：¥987.60，总计：¥124,444.39

function money(options = {}) {  const { prefix = '¥', decimals = 2, thousands = ',' } = options  return (strings, ...values) => {    return strings.reduce((acc, str, i) => {      const value = values[i]      const formatted = typeof value === 'number'        ? `${prefix}${value.toFixed(decimals).replace(/\B(?=(\d{3})+(?!\d))/g, thousands)}`        : value      return acc + str + (formatted !== undefined ? formatted : '')    }, '')  }}// 美元格式const usd = money({ prefix: '$', decimals: 2 })console.log(usd`价格：${99.9}`)  // 价格：$99.90// 人民币格式const cny = money({ prefix: '¥', decimals: 2 })console.log(cny`价格：${99.9}`)  // 价格：¥99.90

// 多语言配置const i18n = {  zh: {    greet: '你好',    welcome: '欢迎使用{0}功能',    orderCount: '您有{0}个订单，其中{1}个待处理'  },  en: {    greet: 'Hello',    welcome: 'Welcome to {0} feature',    orderCount: 'You have {0} orders, {1} pending'  }}// 标签函数工厂：根据语言返回标签函数function t(lang) {  return (strings, ...values) => {    // 把字符串片段拼接成 key    const key = strings.join('').trim()    // 从多语言配置中查找翻译    let template = i18n[lang][key] || key    // 替换 {0}、{1} 等占位符    values.forEach((val, i) => {      template = template.replace(`{${i}}`, val)    })    return template  }}// 使用const zh = t('zh')const en = t('en')console.log(zh`greet`)        // 你好console.log(en`greet`)        // Helloconsole.log(zh`welcome`('模板字符串'))  // 欢迎使用模板字符串功能console.log(zh`orderCount`(5, 2))       // 您有5个订单，其中2个待处理

function compileTemplate(template) {  // 1. 提取插值变量名：匹配 ${变量名}  const varMatches = template.match(/\$\{(\w+)\}/g) || []  const varNames = varMatches.map(v => v.slice(2, -1))  // 去掉 ${ 和 }  // 2. 生成函数体：用模板字符串拼接  const funcBody = `return \`${template}\`;`  // 3. 动态创建函数（参数是提取的变量名，函数体是模板拼接）  return new Function(...varNames, funcBody)}// 使用：编译一次，重复调用const userTemplate = compileTemplate(`姓名：${name}，年龄：${age}岁`)// 第一次渲染console.log(userTemplate('张三', 25))  // 姓名：张三，年龄：25岁// 第二次渲染（无需重新解析模板，直接调用函数）console.log(userTemplate('李四', 30))  // 姓名：李四，年龄：30岁

不编译：每次渲染都要解析模板字符串 → 拆解 strings/values → 拼接  渲染1000次 = 解析1000次 + 拼接1000次编译后：只解析一次生成函数 → 每次渲染直接调用函数  渲染1000次 = 解析1次 + 函数调用1000次（函数调用比解析快得多）

// 标签函数：自动转义插值，安全渲染 HTMLfunction html(strings, ...values) {  let result = ''  strings.forEach((str, i) => {    result += str    if (values[i] !== undefined) {      // 如果是数组（嵌套 html 调用），递归处理      if (Array.isArray(values[i])) {        result += values[i].join('')      } else {        // 转义 HTML 特殊字符        result += String(values[i])          .replace(/&/g, '&amp;')          .replace(/</g, '&lt;')          .replace(/>/g, '&gt;')          .replace(/"/g, '&quot;')      }    }  })  return result}// 使用const userInput = '<script>alert("xss")</script>'const safeHTML = html`<div>  <p>用户名：${userInput}</p>  <p>年龄：${25}</p></div>`// 插值变量被转义，静态 HTML 标签保留

// 标签函数：安全构建 SQL，自动参数化function sql(strings, ...values) {  let query = ''  const params = []  strings.forEach((str, i) => {    query += str    if (values[i] !== undefined) {      params.push(values[i])      query += `$${params.length}`  // 用占位符代替直接拼接    }  })  return { query, params }}// 使用const name = '张三'const age = 25const { query, params } = sql`SELECT * FROM users WHERE name = ${name} AND age > ${age}`console.log(query)   // SELECT * FROM users WHERE name = $1 AND age > $2console.log(params)  // ['张三', 25]// 自动参数化，防止 SQL 注入

// 问题：内部反引号会被当作模板结束符// const str = `反引号：`，插值：${100}`  // 语法错误// 解决：用 \ 转义反引号const str = `反引号：\`，插值：${100}`console.log(str)  // 反引号：`，插值：100

// 显示字面量 ${const str = `显示 \${ 字面量`console.log(str)  // 显示 ${ 字面量

let count = 0// 问题：count++ 会立即自增const badStr = `计数：${count++}`console.log(count)  // 1（已经自增了）console.log(badStr) // 计数：0（后自增返回的是旧值）// 更隐蔽的问题：函数调用有副作用function incrementAndReturn() {  count++  return count}const str2 = `计数：${incrementAndReturn()}`console.log(count)  // 2

// 1. 插值中用纯表达式，无副作用const goodStr = `计数：${count}`// 2. 有副作用的操作放在模板外面count++const str = `计数：${count}`

let name = '张三'// 问题：定义时插值已固定为"张三"const badTemplate = `姓名：${name}`name = '李四'  // 修改变量console.log(badTemplate)  // 姓名：张三（不会自动更新为李四）

// 正确：封装为函数，每次调用时重新插值const renderName = (name) => `姓名：${name}`console.log(renderName('张三'))  // 姓名：张三console.log(renderName('李四'))  // 姓名：李四（调用时用新值插值）

async function getData() {  return new Promise(resolve => setTimeout(() => resolve('数据'), 100))}// 问题：直接调用异步函数const badStr = `结果：${getData()}`console.log(badStr)  // 结果：[object Promise]

// 1. 先 await 拿到结果，再插值（在 async 函数中）async function render() {  const data = await getData()  const str = `结果：${data}`  console.log(str)  // 结果：数据}// 2. 先把结果存到变量，再插值（组件中）const data = ref(null)onMounted(async () => {  data.value = await getData()})// 模板中用 {{ data }}

const str = `  hello  world`console.log(JSON.stringify(str))// "\n  hello\n  world\n"// 开头有换行，每行有缩进，结尾有换行

// 1. 用 .trim() 去除首尾空白const str1 = `  hello`.trim()console.log(JSON.stringify(str1))  // "hello"（首尾空白去掉了，中间缩进保留）// 2. 用 .trimStart() / .trimEnd() 只去一端const str2 = `  hello`.trimStart()// 3. 不在模板中写缩进（但可读性差）const str3 = `helloworld`

const user = { name: '张三', age: 25 }// 问题：对象直接插值const badStr = `用户：${user}`console.log(badStr)  // 用户：[object Object]

// 1. 访问具体属性const str1 = `用户：${user.name}，年龄：${user.age}`// 用户：张三，年龄：25// 2. 用 JSON.stringify 转成 JSON 字符串const str2 = `用户：${JSON.stringify(user)}`// 用户：{"name":"张三","age":25}// 3. 给对象自定义 toString 方法const user2 = {  name: '张三',  age: 25,  toString() {    return `${this.name}(${this.age}岁)`  }}const str3 = `用户：${user2}`// 用户：张三(25岁)

const obj = {  name: '张三',  greet: function() {    return `你好，${this.name}`  // this 指向 obj  },  greetArrow: () => {    return `你好，${this.name}`  // this 指向外层（可能是 undefined 或全局）  }}console.log(obj.greet())       // 你好，张三console.log(obj.greetArrow())  // 你好，undefined（箭头函数的 this 是外层的）

// 问题：正则中的 ${ 被当作插值// const pattern = new RegExp(`\d${2}`)  // 语法错误或意外插值// 解决：用 \\$ 转义，或用 String.rawconst pattern1 = new RegExp(`\\d\${2}`)const pattern2 = new RegExp(String.raw`\d${2}`)  // String.raw 中 ${ 还是插值// 注意：String.raw 也会解析 ${} 插值，只是不解析转义符