JavaScript学习笔记(十五)：ES6模板字符串使用指南

ES6模板字符串详解

ES6引入了模板字符串（Template Literals），使用反引号（`````）包裹内容，支持多行文本和表达式嵌入。

基本语法

普通字符串需用引号包裹，而模板字符串使用反引号：
javascript 复制代码
```
const name = 'Alice';
const greeting = `Hello, ${name}!`; // 输出: Hello, Alice!
```
表达式嵌入

通过${expression}语法嵌入变量或表达式：
javascript 复制代码
```
const a = 5;
const b = 10;
console.log(`Sum: ${a + b}`); // 输出: Sum: 15
```
多行文本

直接换行即可实现多行字符串，无需\n：
javascript 复制代码
```
const multiLine = `
  Line 1
  Line 2
`;
```

标签模板

通过自定义函数处理模板字符串，函数接收字符串部分和表达式部分：

javascript 复制代码

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => 
    `${result}${str}<mark>${values[i] || ''}</mark>`, '');
}

const name = 'Alice';
const age = 25;
console.log(highlight`Name: ${name}, Age: ${age}`);
// 输出: Name: <mark>Alice</mark>, Age: <mark>25</mark>

原始字符串

通过String.raw或标签函数的第一个参数（raw属性）获取原始字符串内容，忽略转义字符：

javascript 复制代码

const path = String.raw`C:\Development\file.txt`;
console.log(path); // 输出: C:\Development\file.txt

function showRaw(strings) {
  console.log(strings.raw[0]);
}
showRaw`Line 1\nLine 2`; // 输出: Line 1\nLine 2

嵌套模板

模板字符串可以嵌套使用，适合动态生成复杂结构：

javascript 复制代码

const items = ['apple', 'banana', 'cherry'];
const listHtml = `
  <ul>
    ${items.map(item => `<li>${item}</li>`).join('')}
  </ul>
`;

应用场景

动态拼接字符串

替代传统字符串拼接（+运算符），提升可读性：
javascript 复制代码
```
const user = { name: 'Bob', age: 25 };
const message = `User: ${user.name}, Age: ${user.age}`;
```

HTML模板生成

结合DOM操作动态生成HTML：

javascript 复制代码

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

SQL查询拼接

需注意安全风险，避免SQL注入（建议使用参数化查询）：
javascript 复制代码
```
const table = 'users';
const query = `SELECT * FROM ${table} WHERE id = ${userId}`;
```

国际化（i18n）

动态替换多语言文本中的变量：

javascript 复制代码

const i18n = { welcome: 'Hello, {name}!' };
const text = i18n.welcome.replace('{name}', 'Charlie');

与其他ES6特性的结合

模板字符串常与解构赋值、箭头函数等特性结合使用，提升代码可读性。
javascript 复制代码
```
const user = { name: 'Bob', age: 30 };
const greet = ({ name }) => `Hello, ${name}!`;
console.log(greet(user)); // 输出：Hello, Bob!
 
```

注意事项

反引号转义

若需在模板字符串中使用反引号，需通过\转义：
javascript 复制代码
```
const str = `This is a \`backtick\``;
```
表达式求值
${}内可以是任意JavaScript表达式，但需避免复杂逻辑：
javascript 复制代码
```
// 不推荐
const complex = `Result: ${(() => { return 42; })()}`;
```
性能考虑

频繁拼接大量字符串时，传统数组join()可能更高效。
XSS风险

动态生成HTML时需对用户输入转义，防止XSS攻击：
javascript 复制代码
```
const safeHtml = `<div>${escapeHtml(userInput)}</div>`;
```

优化建议

缓存模板字符串

重复使用的模板可提前定义：
javascript 复制代码
```
const getGreeting = name => `Hello, ${name}!`;
```

标签模板（Tagged Templates）

自定义模板处理逻辑，如过滤、国际化等：

javascript 复制代码

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => 
    `${result}${str}<mark>${values[i] || ''}</mark>`, '');
}
const output = highlight`Name: ${user.name}`;

避免嵌套过深

复杂逻辑建议拆分为函数调用：

javascript 复制代码

const getDetails = (user) => `${user.name} (${user.age})`;
const message = `Details: ${getDetails(user)}`;

浏览器兼容性处理

ES6模板字符串在现代浏览器中广泛支持，旧环境需通过Babel等工具转译：

javascript 复制代码

// Babel转译前的模板字符串
const name = 'Alice';
const greeting = `Hello, ${name}!`;

// 转译为ES5代码后：
var name = 'Alice';
var greeting = 'Hello, ' + name + '!';

总结

ES6模板字符串通过反引号和${}语法简化了字符串拼接，支持多行文本和动态表达式，适用于HTML生成、SQL拼接、国际化等场景。需注意转义、性能及安全问题，结合标签模板和缓存机制可进一步提升代码质量。