JavaScript: JavaScript 字符串
字符串是 JavaScript 中最常用的数据类型之一。你每天写的代码里，十有八九都在跟字符串打交道——显示文字、拼接消息、处理用户输入，哪样都离不开它。
1. 字符串的创建
JavaScript 提供了三种方式创建字符串：单引号、双引号和反引号。
HTML
<script>
let a = 'hello'; // 单引号
let b = "world"; // 双引号
let c = `hello`; // 反引号
</script>
单引号和双引号没有本质区别，选哪个全看你心情。但反引号就不一样了——它支持模板字符串，功能更强大，后面会细说。
💡 提示： 团队协作时，建议统一用单引号或双引号，别混着来，代码看着干净。
▶ 示例
JAVASCRIPT
// 本节代码示例
const message = "你好，世界!";
console.log(message);
这是最简单的示例，后续章节会详细解释。## 2. 字符串是不可变的
这是很多人踩过的坑：字符串一旦创建，内容就不能修改。你调用的所有方法，都不会改变原字符串，而是返回一个新字符串。
HTML
<script>
let str = 'hello';
str[0] = 'H'; // 静默失败，str 还是 'hello'
str.toUpperCase(); // 返回 'HELLO'，但 str 本身不变
let upper = str.toUpperCase(); // 这才对，用变量接住返回值
</script>
记住：字符串方法不改变原值，必须用变量接收返回值。
3. 常用方法
JavaScript 字符串方法非常多，但日常最常用的就这几个：
| 方法 | 作用 | 示例 |
|---|---|---|
length |
获取长度 | 'abc'.length → 3 |
indexOf() |
查找子串位置 | 'hello'.indexOf('ll') → 2 |
slice() |
截取子串 | 'hello'.slice(1,3) → 'el' |
replace() |
替换内容 | 'cat'.replace('c','b') → 'bat' |
toUpperCase() |
转大写 | 'hi'.toUpperCase() → 'HI' |
toLowerCase() |
转小写 | 'HI'.toLowerCase() → 'hi' |
trim() |
去首尾空格 | ' hi '.trim() → 'hi' |
split() |
按分隔符拆成数组 | 'a,b'.split(',') → ['a','b'] |
includes() |
是否包含子串 | 'hello'.includes('ell') → true |
startsWith() |
是否以某串开头 | 'hello'.startsWith('he') → true |
endsWith() |
是否以某串结尾 | 'hello'.endsWith('lo') → true |
▶ 示例：字符串常用方法
HTML
<!DOCTYPE html>
<html>
<body>
<h2>字符串常用方法</h2>
<p id="output"></p>
<script>
let str = ' Hello, JavaScript! ';
let result = '';
result += '原始: "' + str + '"<br>';
result += 'length: ' + str.length + '<br>';
result += 'trim: "' + str.trim() + '"<br>';
result += 'indexOf("Java"): ' + str.indexOf('Java') + '<br>';
result += 'slice(2,7): "' + str.slice(2, 7) + '"<br>';
result += 'includes("Script"): ' + str.includes('Script') + '<br>';
result += 'startsWith(" H"): ' + str.startsWith(' H') + '<br>';
result += 'toUpperCase: ' + str.toUpperCase() + '<br>';
result += 'replace("JavaScript","World"): ' + str.replace('JavaScript', 'World') + '<br>';
document.getElementById('output').innerHTML = result;
</script>
</body>
</html>
注意 slice(start, end) 截取的范围是包含 start，不包含 end。这跟很多语言一样，习惯就好。
4. 模板字符串
反引号（`）创建的字符串叫模板字符串，它有两个杀手锏：
- 支持换行——不用再写
\n，直接敲回车 - 支持插值——用
${变量}嵌入变量或表达式
HTML
<!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 拼接
HTML
<!DOCTYPE html>
<html>
<body>
<h2>模板字符串对比</h2>
<p id="output"></p>
<script>
let name = '小红';
let city = '北京';
let hobby = '画画';
let old = '我叫' + name + '，来自' + city + '，喜欢' + hobby + '。';
let modern = `我叫${name}，来自${city}，喜欢${hobby}。`;
let html = '<strong>拼接方式：</strong>' + old + '<br><br>';
html += '<strong>模板字符串：</strong>' + modern + '<br><br>';
let a = 5, b = 3;
html += `<strong>还能写表达式：</strong>${a} + ${b} = ${a + b}<br>`;
html += `<strong>还能调用方法：</strong>${name.toUpperCase()}`;
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>
💡 提示： 变量多的时候，模板字符串比拼接好读十倍。别犹豫，日常写代码优先用反引号。
5. 转义字符
有些字符在字符串里有特殊含义，想输出它们本身，就需要用反斜杠 \ 转义：
| 转义字符 | 含义 |
|---|---|
\n |
换行 |
\t |
制表符（Tab） |
\\ |
反斜杠本身 |
\" |
双引号 |
\' |
单引号 |
▶ 示例：转义字符
HTML
<!DOCTYPE html>
<html>
<body>
<h2>转义字符演示</h2>
<p id="output"></p>
<script>
let s1 = '第一行\n第二行';
let s2 = '名字\t年龄\t城市';
let s3 = '路径：C:\\Users\\Admin';
let s4 = '他说："你好！"';
let s5 = 'It\'s a nice day';
let html = '';
html += '<strong>\\n 换行：</strong><pre>' + s1 + '</pre>';
html += '<strong>\\t 制表符：</strong><pre>' + s2 + '</pre>';
html += '<strong>\\\\ 反斜杠：</strong>' + s3 + '<br>';
html += '<strong>\\" 双引号：</strong>' + s4 + '<br>';
html += "<strong>\\' 单引号：</strong>" + s5 + '<br>';
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>
⚠️ 注意： 反斜杠自己也要转义。写 Windows 路径时
C:\Users 得写成 C:\\Users，忘转义的话分分钟出 bug。
6. 字符串拼接 vs 模板字符串
简单场景下两种方式都行，但变量一多，拼接就开始让人头疼：
HTML
<script>
// 拼接：变量一多就容易漏加号、多加号
let html = '<div class="' + cls + '">' + title + '</div>';
// 模板：一目了然
let html = `<div class="${cls}">${title}</div>`;
</script>
▶ 示例：生成 HTML 内容
HTML
<!DOCTYPE html>
<html>
<body>
<h2>用模板字符串生成内容</h2>
<div id="output"></div>
<script>
let products = [
{ name: '笔记本', price: 4999 },
{ name: '鼠标', price: 89 },
{ name: '键盘', price: 399 }
];
let html = '<ul>';
for (let p of products) {
html += `<li>${p.name} - ¥${p.price.toFixed(2)}</li>`;
}
html += '</ul>';
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>
模板字符串嵌在循环里生成 HTML，这在实际开发中非常常见，比拼接舒服太多。
❓ 常见问题
Q
indexOf 和 includes 有什么区别？A
indexOf 返回子串的起始位置（找不到返回 -1），includes 返回布尔值。如果你只关心"有没有"，用 includes 更直观；如果需要知道具体位置，用 indexOf。Q
replace 为什么只替换第一个匹配？A
replace 默认只替换第一个匹配项。要替换所有，用 replaceAll，或用正则表达式加 g 标志：str.replace(/abc/g, 'xyz')。Q 单引号和双引号到底用哪个？
A 功能完全一样。团队里统一就行，大多数项目约定用单引号，字符串内包含单引号时用双引号包起来。
📖 小节
- 字符串有三种写法：单引号、双引号、反引号，优先用反引号
- 字符串不可变，所有方法都返回新字符串，不会修改原值
slice(start, end)包含 start 不包含 end，indexOf找不到返回-1- 模板字符串用
${}插值，支持表达式和方法调用 - 转义字符用
\开头，\n换行、\\输出反斜杠本身 trim()去空格特别实用，处理用户输入时别忘了用
📝 作业
- 写一个程序，让用户输入一句英文，输出单词个数（提示：用
split按空格拆分，再用length） - 写一个程序，把字符串
" Hello World "处理成全小写、去空格的"hello world"，用到trim和toLowerCase - 用模板字符串生成一段自我介绍 HTML，包含姓名、年龄、爱好（用变量），并将结果显示在页面上
