字符串与文本处理——截取、查找、替换文字

1.字符串是一串字符

第2讲说过，字符串（string）就是用引号括起来的值。双引号 "苹果" 和单引号 '苹果' 是同一个字符串；用反引号括起来的模板字符串（模板字面量）则用来把变量的值嵌进字符串里。模板字符串长什么样，请直接看下面的代码。不管用哪种引号，在同一个程序里统一成一种会更好读。

字符串是按顺序排列的一串字符，所以可以像第6讲的数组一样，用编号（索引）逐个取出字符。第一个字符是0号，s.length 是以字符为单位的长度。因此最后一个字符是 s[s.length - 1]，现在也常用 s.at(-1) 这种从后往前数的写法。取一个不存在的编号时不会报错，而是得到 undefined，这一点也和数组一样。

字符串和数组有一个很大的不同：字符串一旦创建，里面的字符就不能修改。如果像 s[0] = "z" 这样想改其中一个字，在严格模式下运行的代码（比如这个练习场）里会出现 TypeError。所以本讲的所有方法都不会改动原字符串，而是返回一个“新字符串”。要使用结果，就必须用变量接住它。

const name = "小明";
const fruit = '苹果';
const msg = `${name}买了${fruit}3个`;
console.log(msg);
console.log(msg.length);
console.log(msg[0], msg.at(-1), msg[99]);

小明买了苹果3个
8
小 个 undefined

let s = "  hello  ";
s.trim();
console.log("[" + s + "]");
s = s.trim();
console.log("[" + s + "]");

[  hello  ]
[hello]

2.字数的陷阱——汉字与表情符号

length 数的不是“看得见的字数”，而是 JavaScript 存储字符串的单位（UTF-16 编码单元）的个数。好在日常使用的常用汉字一个字就是一个单元，所以 "汉字".length 是2，"编程很有趣".length 是5，和看到的一样。英文字母、数字、空格和标点也是一个字一个单元。

表情符号就不同了。很多表情符号占两个单元，"😀".length 是2。像带肤色的手势这种由几块拼成、看起来是一个图形的表情符号，长度可能是4甚至更多。把字符串像 [...s] 这样展开，会按码点拆分，一个 😀 就算1；但拼合而成的表情符号展开后仍然按块数计算。要按屏幕上看到的图形精确计数，需要 Intl.Segmenter 这类专门的工具。

汉字也不是永远可以放心。收录在扩展区的生僻字（例如有些人名里用到的“𠮷”）不在常用范围内，一个字要占两个单元，length 是2。另外，同一个带音调符号的字母，比如 é，既可以存成一个字符，也可以存成“e + 音调符号”两个部分（分解形式，NFD），后者的长度是2。从某些程序里复制过来的文件名有时就是这种形式，所以会出现外表相同、=== 比较却是 false 的情况；韩文等文字也有同样的问题。这时先用 s.normalize("NFC") 统一成一种形式再比较。

还有一点：字数和字节数是两回事。在文件和网络中常用的 UTF-8 编码下，一个常用汉字通常占3个字节。如果输入框限制的是“最多90字节”这样的字节数，就不能用 length 来数。总结一下：以常用汉字为主的普通句子用 length 计数没问题，但一旦混入表情符号、生僻字、分解形式的字符或字节限制，就要先想清楚自己到底在数什么。

console.log("汉字".length, "编程很有趣".length);
console.log("😀".length, [..."😀"].length);
console.log("👍🏽".length, [..."👍🏽"].length);

2 5
2 1
4 2

const a = "é";
const b = a.normalize("NFD");
console.log(a.length, b.length);
console.log(a === b);
console.log(a === b.normalize("NFC"));
const bytes = new TextEncoder().encode("汉字");
console.log(bytes.length);

1 2
false
true
6

3.截取与查找——`slice`、`indexOf`、`includes`

s.slice(开始, 结束) 从开始编号截到结束编号的“前一个”，作为新字符串返回。省略结束就截到最后；给负数则从后往前数。所以 s.slice(0, 3) 是前三个字，s.slice(-4) 是后四个字。不包含结束编号这条规则，和第4讲循环里写 i < n 是同一种感觉，长度可以直接用“结束 − 开始”算出来。

查找主要用三种方法。s.indexOf("要找的词") 返回第一次出现的位置编号，找不到就返回 -1。如果不需要位置、只想知道有没有，s.includes("要找的词") 会返回 true 或 false，很适合直接放进第3讲的条件语句。startsWith 和 endsWith 检查开头或结尾是不是那个词，比如确认文件名是否以 ".csv" 结尾。

把 indexOf 的结果直接当条件用会掉进陷阱。要找的词在最前面时结果是 0，而第3讲说过 0 是假值，所以 if (s.indexOf("x")) 恰恰在“出现在最前面”时为假。只想判断有没有时用 includes；如果用 indexOf，就和 !== -1 比较。另外，这些方法区分大小写，"Apple".includes("apple") 是 false。要忽略大小写，先用 toLowerCase() 把两边统一，再查找。

const phone = "138-1234-5678";
console.log(phone.slice(0, 3));
console.log(phone.slice(-4));
console.log(phone.slice(4, 8));

138
5678
1234

const file = "2026_销售记录.csv";
console.log(file.indexOf("_"));
console.log(file.indexOf("x"));
console.log(file.includes("销售"));
console.log(file.endsWith(".csv"));
console.log("Apple".includes("apple"));
const t = "Apple".toLowerCase();
console.log(t.includes("apple"));

4
-1
true
true
false
true

const email = "[email protected]";
const at = email.indexOf("@");
if (at === -1) {
  console.log("不是邮箱格式");
} else {
  console.log(email.slice(0, at));
}

minsu

4.拆分、拼接、修整——`split`、`join`、`trim`

文本处理有一半靠 split 和 join。s.split(",") 以逗号为界把字符串切开，返回一个数组；arr.join("-") 反过来把数组连成一个字符串。字符串变成数组后，第6讲学过的 length、map、filter 都能用上，所以“拆分 → 当数组处理 → 再拼回去”就成了基本流程。第9讲的自动化例子也建立在这个流程上。

split 有几个需要知道的边角情况。拆分空字符串 "" 得到的不是空数组，而是装着一个空字符串的数组 [ '' ]。两个逗号连在一起时，中间会多出一个空字符串。所以如果用 split(" ").length 数“有几个词”，空输入会算成1个，空格重叠的地方数量也会变多。这就是一定要同时测试边界值的原因。

trim() 去掉首尾的空格、制表符和换行（中间的空格不动）。人输入的值前后经常带着空格，比较或保存前先过一遍 trim() 是好习惯。toUpperCase() 和 toLowerCase() 转换英文字母的大小写，汉字这类没有大小写的字符保持不变。padStart(3, "0") 在前面补 "0" 直到长度为3，把 "7" 变成 "007"，在按位数对齐显示编号或时间时很常用。

const line = "小明,苹果,3";
const cols = line.split(",");
console.log(cols);
console.log(cols.length, cols[1]);
console.log(cols.join(" / "));

[ '小明', '苹果', '3' ]
3 苹果
小明 / 苹果 / 3

console.log("".split(","));
console.log("a,,b".split(","));
console.log("  Hi  ".trim().toUpperCase());
console.log("7".padStart(3, "0"));
console.log("甲乙丙".toUpperCase());

[ '' ]
[ 'a', '', 'b' ]
HI
007
甲乙丙

• split("")（以空字符串为界）按单元逐个切开。混有表情符号时可能把它切坏，所以按字切分时用 [...s] 更安全。
• split、trim、toUpperCase 都返回新值，原字符串保持不变。
• 按行拆分用 split("\n")。在 Windows 上生成的文件，行尾可能多一个看不见的字符，所以拆分后对每行再 trim() 一下更稳妥。

5.替换——`replace` 与 `replaceAll`

s.replace("要找的词", "替换成的词") 只替换第一次出现的那一处。要全部替换就用 replaceAll。正因为这个区别，“怎么只换了第一个？”的情况经常出现，所以写好替换代码后，一定要用同一个词出现两次以上的输入试一试。两个方法都不改原字符串，而是返回替换后的新字符串。

替换也可以用来“删除”。把替换成的词设为空字符串 ""，找到的部分就会消失。例如 "138-1234-5678".replaceAll("-", "") 的结果是 "13812345678"。反过来，想给只有数字的电话号码加上连字符，用 slice 切开再用 join 拼起来更干净。不管做什么处理，原文都保持不变、另外生成新值，所以很容易把处理前后并排对比。

const s = "苹果-梨-苹果";
console.log(s.replace("苹果", "橘子"));
console.log(s.replaceAll("苹果", "橘子"));
console.log(s);

橘子-梨-苹果
橘子-梨-橘子
苹果-梨-苹果

const raw = "138-1234-5678";
const digits = raw.replaceAll("-", "");
console.log(digits);
const parts = [
  digits.slice(0, 3),
  digits.slice(3, 7),
  digits.slice(7),
];
console.log(parts.join("-"));

13812345678
138-1234-5678

6.初尝正则表达式——按形状查找

到目前为止我们找的都是“正好是这个词”。想按形状查找，比如“连在一起的数字”“连续好几个空格的地方”，就要用正则表达式。在 JavaScript 里，模式写在两个 / 之间，后面跟的 g 表示“不是第一个，而是全部”。正则表达式本身就是一门小语言，这里只看几个常用写法，达到能读懂的程度。

\d 表示一个数字，\s 表示一个空白字符（空格、制表符、换行），后面跟的 + 表示“一个或多个连在一起”。所以 /\d+/g 是“所有连在一起的数字块”，/\s+/g 是“所有连续的空白”。match 把找到的块作为数组返回；注意一个都没找到时返回的不是空数组，而是 null。test 只用 true 或 false 告诉你找没找到。

正则表达式很强大，但难读，稍有差错就会匹配到不该匹配的地方，或者漏掉该匹配的。原则有两条。第一，能用 includes、split、replaceAll 完成的事就用它们，只在确实需要时才用正则。第二，不管是 AI 给的正则还是自己写的，都要准备几个应该匹配和不应该匹配的例子，在正则表达式测试器里确认之后再用。

const memo = "订单3件，退货12件";
console.log(memo.match(/\d+/g));
console.log("没有数字".match(/\d+/g));
console.log(/\d/.test(memo));

[ '3', '12' ]
null
true

const messy = "  苹果   梨  橘子 ";
const clean = messy.trim().replace(/\s+/g, " ");
console.log("[" + clean + "]");
const masked = "138-1234-5678".replace(/\d/g, "*");
console.log(masked);

[苹果 梨 橘子]
***-****-****