JavaScript 模板字符串：更优雅的字符串处理方式

最新推荐文章于 2025-06-29 16:17:47 发布

原创最新推荐文章于 2025-06-29 16:17:47 发布 · 548 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

什么是模板字符串？

模板字符串（Template Literals）是 ES6（ES2015）引入的一种新的字符串表示方式，它提供了更强大、更灵活的字符串拼接功能。与传统的字符串使用单引号（'）或双引号（"）不同，模板字符串使用反引号（`）来包裹内容。

模板字符串的主要特点包括：

支持多行字符串
可以嵌入表达式
支持标签模板（Tagged Templates）
保留换行和缩进格式

基本语法

多行字符串

const message = `这是一个
多行
字符串`;

console.log(message);
/* 输出:
这是一个
多行
字符串
*/

表达式嵌入

使用 ${expression} 语法可以在模板字符串中嵌入 JavaScript 表达式：

const name = 'Alice';
const age = 30;

const greeting = `你好，我是 ${name}，今年 ${age} 岁。`;
console.log(greeting); // 你好，我是 Alice，今年 30 岁。

表达式中可以使用任何 JavaScript 代码

const a = 10;
const b = 20;

const result = `计算结果: ${a + b}，${a * b}`;
console.log(result); // 计算结果: 30，200

标签模板（Tagged Templates）

标签模板是模板字符串的高级用法，它允许你使用函数来处理模板字符串。标签函数的第一个参数是一个包含字符串字面量的数组，后续参数是每个表达式的值。

function tag(strings, ...values) {
  console.log(strings);   // ['Hello ', ', your score is ', '.']
  console.log(values);    // ['Alice', 95]
  
  // 自定义处理
  return strings.reduce((result, str, i) => {
    return result + str + (values[i] !== undefined ? values[i] : '');
  }, '');
}

const name = 'Alice';
const score = 95;

const output = tag`Hello ${name}, your score is ${score}.`;
console.log(output); // Hello Alice, your score is 95.

实际应用场景

动态生成 HTML 片段

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const html = `
<ul>
  ${users.map(user => `
    <li>${user.name} (${user.age})</li>
  `).join('')}
</ul>
`;

console.log(html);
/* 输出:
<ul>
  <li>Alice (25)</li>
  <li>Bob (30)</li>
  <li>Charlie (35)</li>
</ul>
*/

构建 URL

const baseUrl = 'https://api.example.com';
const endpoint = 'users';
const id = 123;

const url = `${baseUrl}/${endpoint}/${id}`;
console.log(url); // https://api.example.com/users/123

条件表达式

const isLoggedIn = true;
const welcome = `欢迎${isLoggedIn ? '回来' : '注册'}`;
console.log(welcome); // 欢迎回来

多行 SQL 查询

const table = 'users';
const limit = 10;

const query = `
SELECT * 
FROM ${table} 
WHERE age > 18 
LIMIT ${limit}
`;

console.log(query);
/* 输出:
SELECT * 
FROM users 
WHERE age > 18 
LIMIT 10
*/

模板字符串与传统字符串的对比

传统字符串拼接

const firstName = 'John';
const lastName = 'Doe';
const fullName = 'Hello, ' + firstName + ' ' + lastName + '!';
console.log(fullName); // Hello, John Doe!

模板字符串

const fullName = `Hello, ${firstName} ${lastName}!`;
console.log(fullName); // Hello, John Doe!

注意事项

反引号中的转义

如果你需要在模板字符串中使用反引号，需要使用转义字符 \

const message = `这个字符串包含一个反引号 (\`)。`;
console.log(message); // 这个字符串包含一个反引号 (`)。

标签函数的参数处理

标签函数的第一个参数是字符串数组，后续参数是表达式的值。注意处理边界情况：

function tag(strings, ...values) {
  // 确保正确处理所有字符串和值
  return strings.reduce((result, str, i) => {
    return result + str + (values[i] !== undefined ? values[i] : '');
  }, '');
}