JavaScript基础教程（二十五）模板字符串：告别拼接时代！JavaScript模板字符串的神级操作-优快云博客

模板字符串基础用法

模板字符串使用反引号(`)定义，突破了传统字符串的多行书写限制：

// 多行字符串
const poem = `春眠不觉晓
处处闻啼鸟
夜来风雨声
花落知多少`

// 表达式嵌入
const user = 'Alice'
const welcome = `欢迎回来，${user}！今天是${new Date().toLocaleDateString()}`

标签模板 - 超越简单拼接

标签模板允许自定义字符串处理逻辑，为模板注入强大能力：

// 安全HTML转义标签
function safeHtml(strings, ...values) {
  let result = strings[0]
  values.forEach((value, i) => {
    result += String(value)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
    result += strings[i + 1]
  })
  return result
}

const userInput = '<script>alert("xss")</script>'
const safeOutput = safeHtml`<div>${userInput}</div>`
// 输出: <div>&lt;script&gt;alert("xss")&lt;/script&gt;</div>

高级应用场景

// SQL查询构建
function query(strings, ...values) {
  return {
    sql: strings.join('?'),
    parameters: values
  }
}

const id = 123
const name = '测试'
const sqlQuery = query`SELECT * FROM users WHERE id = ${id} AND name = ${name}`
// { sql: 'SELECT * FROM users WHERE id = ? AND name = ?', parameters: [123, '测试'] }

// 多语言支持
const languages = {
  en: { welcome: 'Hello, ${name}!' },
  zh: { welcome: '你好，${name}！' }
}

function i18n(strings, ...values) {
  const key = strings.raw[0]
  return languages[currentLang][key].replace(/\${name}/, values[0])
}

const currentLang = 'zh'
const greeting = i18n`welcome${'张三'}`
// 输出: "你好，张三！"

模板字符串不仅提供了更优雅的语法，更通过标签模板打开了字符串处理的无限可能。掌握这一特性将显著提升你的JavaScript开发体验和代码质量。