JavaScript: JavaScript 字符串

最后更新：2026-10-13

字符串是 JavaScript 中最常用的数据类型之一。你每天写的代码里，十有八九都在跟字符串打交道——显示文字、拼接消息、处理用户输入，哪样都离不开它。

相关字符串方法：toLowerCase() toUpperCase() startsWith() includes() replaceAll endsWith() indexOf() replace() slice() split() trim()

1. 字符串的创建

JavaScript 提供了三种方式创建字符串：单引号、双引号和反引号。

<script>
let a = 'hello';     // 单引号
let b = "world";     // 双引号
let c = `hello`;     // 反引号
</script>

单引号和双引号没有本质区别，选哪个全看你心情。但反引号就不一样了——它支持模板字符串，功能更强大，后面会细说。

这是很多人踩过的坑：字符串一旦创建，内容就不能修改。你调用的所有方法，都不会改变原字符串，而是返回一个新字符串。

<script>
let str = 'hello';
str[0] = 'H';       // 静默失败，str 还是 'hello'
str.toUpperCase();   // 返回 'HELLO'，但 str 本身不变
let upper = str.toUpperCase(); // 这才对，用变量接住返回值
</script>

记住：字符串方法不改变原值，必须用变量接收返回值。

3. 常用方法

JavaScript 字符串方法非常多，但日常最常用的就这几个：

▶ 示例：字符串常用方法

注意 slice(start, end) 截取的范围是包含 start，不包含 end。这跟很多语言一样，习惯就好。

4. 模板字符串

反引号（`）创建的字符串叫模板字符串，它有两个杀手锏：

1. 支持换行——不用再写 \n，直接敲回车
2. 支持插值——用 ${变量} 嵌入变量或表达式

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>模板字符串</title></head>
<body>
<div id="output"></div>
<script>
let name = '小明';
let age = 20;

// 以前：拼字符串，容易漏加号
let msg1 = '我叫' + name + '，今年' + age + '岁。';

// 现在：模板字符串，清爽多了
let msg2 = `我叫${name}，今年${age}岁。`;

document.getElementById('output').innerHTML =
  '<strong>拼接方式：</strong>' + msg1 + '<br>' +
  '<strong>模板字符串：</strong>' + msg2;
</script>
</body>
</html>

▶ 示例：模板字符串 vs 拼接

5. 转义字符

有些字符在字符串里有特殊含义，想输出它们本身，就需要用反斜杠 \ 转义：

▶ 示例：转义字符

6. 字符串拼接 vs 模板字符串

简单场景下两种方式都行，但变量一多，拼接就开始让人头疼：

<script>
// 拼接：变量一多就容易漏加号、多加号
let html = '<div class="' + cls + '">' + title + '</div>';

// 模板：一目了然
let html = `<div class="${cls}">${title}</div>`;
</script>

▶ 示例：生成 HTML 内容

模板字符串嵌在循环里生成 HTML，这在实际开发中非常常见，比拼接舒服太多。

相关字符串方法：toLowerCase() toUpperCase() startsWith() includes() replaceAll endsWith() indexOf() replace() slice() split() trim()

❓ 常见问题

📖 小节

• 字符串有三种写法：单引号、双引号、反引号，优先用反引号
• 字符串不可变，所有方法都返回新字符串，不会修改原值
• slice(start, end) 包含 start 不包含 end，indexOf 找不到返回 -1
• 模板字符串用 ${} 插值，支持表达式和方法调用
• 转义字符用 \ 开头，\n 换行、\\ 输出反斜杠本身
• trim() 去空格特别实用，处理用户输入时别忘了用

📝 作业

1. 写一个程序，让用户输入一句英文，输出单词个数（提示：用 split 按空格拆分，再用 length）
2. 写一个程序，把字符串 " Hello World " 处理成全小写、去空格的 "hello world"，用到 trim 和 toLowerCase
3. 用模板字符串生成一段自我介绍 HTML，包含姓名、年龄、爱好（用变量），并将结果显示在页面上

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们