JavaScript 模板字符串的高级用法：标签模板与多行字符串

1. 模板字符串基础回顾

1.1 基本语法

模板字符串使用反引号(`)包裹，支持嵌入表达式和换行：

const name = 'Alice';
const age = 28;

// 传统字符串拼接
const str1 = 'My name is ' + name + ', age is ' + age;

// 模板字符串
const str2 = `My name is ${
     
     name}, age is ${
     
     age}`;

1.2 核心特性对比

2. 多行字符串的高级应用

2.1 基础多行字符串

// 传统方式
const oldMultiline = '第一行\n' +
                     '第二行\n' +
                     '第三行';

// 模板字符串方式
const newMultiline = `第一行
第二行
第三行`;

2.2 缩进处理技巧

多行字符串会保留所有空白字符，有时需要处理缩进：

function dedent(str) {
   
   
  const lines = str.split('\n');
  const minIndent = lines.filter(s => s.trim())
                        .reduce((min, line) => {
   
   
    const indent = line.match(/^\s*/)[0].length;
    return Math.min(min, indent);
  }, Infinity);
  
  return lines.map(line => line.slice(minIndent)).join('\n');
}

const indentedString = `
    <div>
      <p>Hello World</p>
    </div>
`;

console.log(dedent(indentedString));
// <div>
//   <p>Hello World</p>
// </div>

2.3 多行字符串的实际应用

2.3.1 SQL 查询构建

const userId = 123;
const query = `
  SELECT * FROM users
  WHERE id = ${
     
     userId}
  AND status = 'active'
`;

2.3.2 HTML 模板生成

const items = ['Apple', 'Banana', 'Orange'];
const html = `
  <ul>
    ${
     
     items.map(item => `<li>${ 
       item}</li>`).join('')}
  </ul>
`;

3. 标签模板深入解析

3.1 基本概念

标签模板是一种特殊的函数调用语法：

function tag(strings, ...values) {
   
   
  // 处理逻辑
}

const name = 'Alice';
const age = 28;
tag`My name is ${
     
     name}, age is ${
     
     age}`;

3.2 参数解析

标签函数接收两个参数：

1. strings: 模板字符串的静态部分数组
2. ...values: 插值表达式的计算结果数组