当前位置：首页 > news >正文

JavaScript 模板字符串

news 2025/6/29 18:27:40

模板字符串（Template Literals）是 JavaScript ES6 引入的一项功能，它让字符串的处理变得更加灵活和直观。以下是对模板字符串的详细介绍，包括它的基本特性、用法以及一些高级用法。

一基本特性

1. 多行字符串

模板字符串允许创建多行字符串，不需要使用换行符（\n）或连接符（+）。

const multiLineString = `This is a string
that spans multiple lines.
You can write as many lines as you want.`;
console.log(multiLineString);
// Output:
// This is a string
// that spans multiple lines.
// You can write as many lines as you want.

2. 插值表达式

模板字符串使用 ${} 来嵌入变量和表达式，可以是任何有效的 JavaScript 表达式。

const name = "John";
const age = 30;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // Output: Hello, my name is John and I am 30 years old.

3. 表达式嵌入

不仅可以插入变量，还可以插入更复杂的表达式，例如函数调用和数学运算。

const a = 5;
const b = 10;
const sum = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(sum); // Output: The sum of 5 and 10 is 15.const user = {name: 'Alice',age: 25
};
const description = `User: ${user.name}, Age: ${user.age}, Uppercase Name: ${user.name.toUpperCase()}`;
console.log(description); // Output: User: Alice, Age: 25, Uppercase Name: ALICE

二高级用法

1. 标签模板（Tagged Templates）

标签模板允许你对模板字符串应用自定义处理函数。函数可以接收模板字符串的字面量部分和插值的值作为参数，并返回一个处理后的字符串或其他值。

function highlight(strings, ...values) {return strings.reduce((accumulator, string, index) => {const value = values[index] ? `<b>${values[index]}</b>` : '';return `${accumulator}${string}${value}`;}, '');
}const name = 'world';
const highlightedMessage = highlight`Hello, ${name}!`;
console.log(highlightedMessage); // Output: Hello, <b>world</b>!

2. 嵌套模板字符串

你可以在模板字符串中嵌套其他模板字符串，这使得构建复杂的字符串变得更加灵活。

const firstName = "Jane";
const lastName = "Doe";
const fullName = `${firstName} ${lastName}`;
const message = `Hello, my name is ${fullName}.`;
console.log(message); // Output: Hello, my name is Jane Doe.

3. 动态创建模板字符串

模板字符串可以用来动态构造复杂的字符串和标签模板，特别是在处理动态内容时非常有用。

const user = { name: 'Bob', age: 28 };
const template = (name, age) => `Name: ${name}, Age: ${age}`;
const result = template(user.name, user.age);
console.log(result); // Output: Name: Bob, Age: 28