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

第三章：字符串增强与模板字符串

news 2025/10/11 9:13:16

ES6 对字符串的增强，是最直观、最常用的改进之一。
这一章将带你全面掌握模板字符串、多行字符串以及新增加的字符串方法，让文本处理更高效、更优雅。

一、传统字符串的问题

在 ES5 中，字符串拼接是一件繁琐又容易出错的事：

var name = "Tom";
var message = "Hello, " + name + "! Welcome to " + new Date().getFullYear() + ".";
console.log(message);
// Hello, Tom! Welcome to 2025.

不仅可读性差，而且容易遗漏空格或符号。

多行字符串也需要用 \n 手动换行：

var html = "<ul>\n" +"  <li>Home</li>\n" +"  <li>About</li>\n" +"</ul>";

这种写法既难读又难维护。

二、模板字符串的基本语法

ES6 引入了模板字符串（Template Literals），使用 反引号（``） 包裹。

const name = "Tom";
const year = new Date().getFullYear();const message = `Hello, ${name}! Welcome to ${year}.`;
console.log(message);
// Hello, Tom! Welcome to 2025.

语法规则

使用反引号（``）包裹内容
使用 ${表达式} 进行变量插值
支持任意换行，无需 \n

三、多行字符串

模板字符串天然支持多行：

const html = `
<ul><li>Home</li><li>About</li>
</ul>
`;console.log(html);

输出中会完整保留换行和缩进。
这让生成 HTML、SQL、或大段文本变得极为方便。

四、表达式插值与计算

${} 中不仅能插入变量，也能放入任意表达式：

const a = 10, b = 20;
console.log(`Sum: ${a + b}`); // Sum: 30

甚至可以调用函数：

function greet(name) {return `Hello, ${name.toUpperCase()}!`;
}console.log(`${greet("tom")}`); // Hello, TOM!

五、模板字符串中的嵌套

模板字符串可以嵌套使用：

const user = { name: "Tom", role: "Admin" };
const message = `
<div><h1>${user.name}</h1><p>Role: ${user.role === "Admin" ? "Administrator" : "User"}</p>
</div>
`;console.log(message);

嵌套结构让前端模板生成更清晰直观。

六、标签模板（Tagged Templates）

标签模板是一种高级用法，它允许你在模板字符串前加上一个函数名，对模板进行定制化处理。

示例：

function highlight(strings, ...values) {return strings.reduce((result, str, i) => {const value = values[i] ? `<b>${values[i]}</b>` : "";return result + str + value;}, "");
}const name = "Tom";
const age = 25;const message = highlight`My name is ${name}, and I am ${age} years old.`;
console.log(message);
// My name is <b>Tom</b>, and I am <b>25</b> years old.

工作原理：

strings 是模板中静态文本的数组
values 是 ${} 中插入的变量值
可以用来实现国际化、多语言、HTML 转义、代码高亮等功能

七、字符串新增方法

ES6 为 String 增加了多个实用方法：

方法	作用
`includes(str)`	判断是否包含子串
`startsWith(str)`	判断是否以指定字符串开头
`endsWith(str)`	判断是否以指定字符串结尾
`repeat(n)`	重复字符串 n 次
`padStart(len, padStr)`	在开头补全字符串至指定长度
`padEnd(len, padStr)`	在结尾补全字符串至指定长度

示例：

const str = "ES6";console.log(str.includes("S"));     // true
console.log(str.startsWith("E"));   // true
console.log(str.endsWith("6"));     // true
console.log(str.repeat(3));         // ES6ES6ES6
console.log(str.padStart(5, "0"));  // 00ES6
console.log(str.padEnd(6, "."));    // ES6...

八、实战示例：动态生成 HTML 模板

假设我们需要在前端动态渲染用户卡片：

const users = [{ name: "Alice", age: 20 },{ name: "Bob", age: 25 },
];const html = `
<div class="user-list">${users.map(u => `<div class="user">${u.name} (${u.age})</div>`).join("")}
</div>
`;document.body.innerHTML = html;

模板字符串让动态内容拼接更自然，可读性也大大提升。

九、常见问题与陷阱

问题	说明
模板字符串中必须使用反引号（``）	单引号或双引号不支持插值
`${}` 内可执行任意表达式	包含运算、函数调用等
注意输出的 HTML 字符未转义	若直接插入用户输入，需防范 XSS 攻击
标签模板函数可以修改输出内容	常用于防注入或国际化

十、小结

模板字符串让字符串拼接与换行更自然、更安全
标签模板为字符串处理带来了新的扩展能力
新增的字符串方法让日常文本处理更便捷

总结一句话：
模板字符串让 JavaScript 的字符串处理从“手工拼接”进入了“表达式模板时代”。