JAVASCRIPT · 第三章

字符串 (用得最多)

字符串就是文字:节点名、提醒文案、订阅地址……你天天打交道的全是它。这一章把最常用的文字处理方法一次学完,代码里的英文单词当固定写法记就行,意思都用中文标好了。

1

这一章学什么

一句话目标:会用模板字符串拼文字,会用最常用的字符串方法——查包含、截取、切分、替换、去空白、补零。学完这一章,你就能自己处理节点名、拼提醒文案了。
2

概念

① 模板字符串:拼文字最方便的写法

用反引号 ` 把文字包起来,里面写 ${ },花括号里可以直接放变量名、也可以放算式,运行时会被换成算出来的值。

const name = "香港";   // 变量 name,存文字「香港」
const n = 5;           // 变量 n,存数字 5
const msg = `节点 ${name} 有 ${n} 个,第一个是 ${name}0${n}`;
console.log(msg);      // 把拼好的文字打出来看
运行结果是:节点 香港 有 5 个,第一个是 香港05
看明白没:${name} 变成了「香港」,${n} 变成了 5,其他文字原样保留。这样拼文案,比用加号一段段连方便得多。

② 常用方法速查表

「方法」就是字符串自带的小工具,写法是 文字.方法名(...)。下面这 11 个是日常最常用的,先混个眼熟,用的时候回来查就行。

.length
长度:一共有几个字符
"abc".length → 3(a、b、c 三个字符)
.includes(s)
是否包含:里面有没有 s 这段文字,有返回 true,没有返回 false
"香港节点".includes("香港") → true
.startsWith(s) / .endsWith(s)
是不是以 s 开头 / 以 s 结尾
"香港01".startsWith("香港") → true;"a.yaml".endsWith(".yaml") → true
.indexOf(s)
第一次出现的位置:从 0 开始数;找不到返回 -1
"香港节点".indexOf("节点") → 2;"abc".indexOf("z") → -1
.slice(a, b)
截取:取第 a 个到第 b 个(不含第 b 个)
"abcdef".slice(1, 3) → "bc"
.split(s)
切分:按 s 把文字切成一段一段,得到一个数组
"a,b,c".split(",") → ["a", "b", "c"]
.replace(a, b) / .replaceAll(a, b)
替换:replace 只换第一个,replaceAll 全部都换;a 可以是正则
"香港 香港".replace("香港", "日本") → "日本 香港";用 replaceAll → "日本 日本"
.trim()
去掉首尾空白:开头的空格、末尾的空格和换行都去掉,中间的不动
" 香港 ".trim() → "香港"(处理用户输入、文件内容必用)
.toLowerCase() / .toUpperCase()
全转小写 / 全转大写
"AbC".toLowerCase() → "abc"(比较域名、代号之前,先统一大小写再比)
.match(正则)
按正则提取:从文字里把符合规则的部分捞出来
"香港05".match(/\d+/) → 捞出 "05" 这段数字
.padStart(n, c)
左侧补字符:在左边补 c,一直补到总长 n 位
"5".padStart(2, "0") → "05"
先记住三个最常用的:includes(查包含)、split(切分)、模板字符串(拼文字)。这三个在你的 tg-bot 和订阅脚本里出现得最多。
3

动手试

下面的代码框可以直接改,点「运行」就会真的执行,在下方显示输出。改错了也不怕,会用中文告诉你错在哪。建议每个都先直接运行看结果,再改一改数字和文字试试。

练习一:模板字符串拼消息

把变量拼进文字里,看拼出来的完整消息。

试试把 n 改成 12,再运行一次

练习二:查包含 + 切分

includes 看有没有,split 按逗号切开。

试试把「香港」改成「日本」,看第一个结果变成什么

练习三:补零 + 截取

padStart 补零,slice 截一段出来。

试试把 slice(1, 3) 改成 slice(0, 2),猜猜结果再运行
4

练一练

一共 5 题,已答对 0 题。点一下选项,马上就知道对错。

第 1 题 下面这行代码的结果是多少?

"abc".length

第 2 题 用反引号包裹的这行代码,结果是什么?

`节点 ${"香港"} 有 ${2+3} 个`

第 3 题 下面这行代码得到什么?

"a,b,c".split(",")

第 4 题 下面这行代码的结果是什么?

"香港01".includes("港")

第 5 题 下面这行代码截出来的是什么?

"abcdef".slice(1, 3)
5

适用案例

这三个场景全是你自己在用的东西,字符串方法就是这么干活的。

案例一tg-bot 的到期提醒文案

机器人发提醒时,节点名和剩余天数每次都不一样。用模板字符串把变量拼进一句话里,就不用一段一段拿加号连了:

const name = "香港01";  // 节点名
const days = 3;         // 还剩几天到期
const text = `⏰ 提醒:节点 ${name} 还有 ${days} 天到期`;
console.log(text);
打出来是:⏰ 提醒:节点 香港01 还有 3 天到期。名字和时间一变,文案自动跟着变。

案例二按地区过滤节点名

一堆节点里只想留香港的,就逐个问一句「名字里包不包含『香港』」——核心就是这一章的 includes:

const list = ["香港01", "日本02", "香港03", "美国01"];
const hk = list.filter(x => x.includes("香港"));
console.log(hk);   // 只留下名字里带「香港」的
结果是:["香港01", "香港03"]。filter 是下一章数组的内容,这里先看 includes 怎么判断就行。

案例三节点编号补零

编号想要统一两位数,5 不能显示成光秃秃的「5」,要用 padStart 在左边补个 0:

const num = "5".padStart(2, "0");  // "5" 补成 "05"
const label = `香港${num}`;
console.log(label);   // 香港05
这样拼出来的编号就是整齐的香港05,和香港12、香港30 排在一起不会乱。

一句话小结

文字处理记住这套组合:模板字符串拼文案、includes 查包含、split 切分、slice 截取、trim 去空白、padStart 补零——你的脚本里九成的文字活儿,都是这几招。

第三章完。先把「动手试」三个都运行一遍,再做练习题,全对了再往下走。