前端学习26 ES6 模板字符串（Template Literals）

模板字符串是ES6引入的一种新型字符串表示法，使用反引号( ` ) 包裹内容，相比传统字符串具有更强大的功能。

1.核心特性

• 多行字符串：直接支持换行。
• 字符串插值：使用 ${ 对象 } 嵌入变量和表达式。
• 标签模板：可以自定义字符串处理函数。

1.1 基本语法

// 传统字符串
const name = 'Alice';
const greeting = 'Hello, ' + name + '!';

// 模板字符串
const greeting = `Hello, ${name}!`;

1.2 多行字符串处理

// ES5实现多行字符串
var message = '第一行\n' +
              '第二行\n' +
              '第三行';

//ES6新特性 可以直接换行
const message = `第一行
第二行
第三行`;

1.3 字符串插值

//基本插值
const name = 'Alice';
const age = 25;
console.log(`Name: ${name}, Age: ${age}`); // "Name: Alice, Age: 25"

//表达式计算
const a = 10;
const b = 20;
console.log(`Sum: ${a + b}`); // "Sum: 30"

//函数调用
function getAge() {
  return 25;
}
console.log(`Age: ${getAge()}`); // "Age: 25"

//嵌套模板
const isMember = true;
console.log(`Status: ${
  isMember ? `Member since ${2020}` : 'Not a member'
}`); // "Status: Member since 2020"

1.4 标签模板(Tagged Templates)

标签模板允许使用函数解析模板字符串，第一个参数是字符串数组，后续参数是插值表达式。

function tag(strings, ...values) {
  console.log(strings); // ["Hello ", "!"]
  console.log(values); // ["Alice"]
  return 'Processed string';
}

const name = 'Alice';
const result = tag`Hello ${name}!`;
// 当调用 tag 函数时：
// strings 参数接收模板字符串中的文本部分。
// values 参数接收模板字符串中的嵌入值。

1.5 特殊字符处理

//转义字符
console.log(`反引号: \` 美元符号: \${`); // "反引号: ` 美元符号: ${"

//原始字符串 使用String.raw 标签获取原始字符串（不处理转义字符）
const path = String.raw`C:\Development\project\files`;
console.log(path); // "C:\Development\project\files"

// 等同于
function raw(strings, ...values) {
  let result = strings.raw[0];
  for (let i = 0; i < values.length; i++) {
    result += values[i] + strings.raw[i + 1];
  }
  return result;
}

1.6 性能考虑

• 静态字符串：对于纯静态字符串，模板字符串与普通字符串性能相当
• 动态插值：频繁变化的插值内容可能影响性能，在极端性能敏感场景需测试
• 标签模板：自定义处理会增加开销，但通常可忽略不计

1.7 相关实践

• 优先使用模板字符串：替代所有字符串拼接场景
• 复杂逻辑处理：对于复杂插值逻辑，考虑提前计算表达式

// 不推荐
console.log(`Result: ${calculateA() + calculateB() * complexCalculation()}`);

// 推荐
const result = calculateA() + calculateB() * complexCalculation();
console.log(`Result: ${result}`);

• 多行缩进处理：使用.trim()消除不必要的缩进

function getHtml() {
  return `
    <div>
      <p>Content</p>
    </div>
  `.trim();
}