字符串转数组用split(),空字符串split("")返回空数组;includes()语义清晰但IE不支持,indexOf()可定位且兼容IE;replace()需/g或replaceAll()才替换全部;拼接长字符串优先用模板字面量或join()。

字符串转数组用 split(),但空字符串要小心
想把字符串按分隔符拆成数组,split() 是最直接的选择。比如 "a,b,c".split(",") 得到 ["a", "b", "c"]。但注意:"".split("") 在大多数浏览器返回空数组 [],而 "a".split("") 返回 ["a"] —— 这是符合规范的,不是 bug。
常见踩坑点:
-
split()第二个参数(限制长度)容易被忽略,比如"x-y-z".split("-", 2)只返回["x", "y"] - 正则作为分隔符时,捕获组会影响结果,例如
"ab12cd".split(/(\d+)/)会把数字也放进结果数组 - 对
null或undefined调用split()会报TypeError: Cannot read property 'split' of null,建议先做类型判断
includes() 和 indexOf() 选哪个?看你要不要位置信息
includes() 返回布尔值,语义清晰,适合条件判断;indexOf() 返回索引,适合需要定位或进一步操作的场景。
关键差异:
立即学习“Java免费学习笔记(深入)”;
动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包
-
includes()支持第二个参数(起始搜索位置),但不支持负数偏移;indexOf()支持负数(从末尾算起) -
includes()能正确识别NaN("abc".includes(NaN)是false),而indexOf(NaN)总是返回-1,因为NaN !== NaN - 性能上无实质差别,但
includes()更现代,IE 不支持;若需兼容 IE,必须用indexOf() !== -1
替换所有子串不能只用 replace(),得加 g 标志或用 replaceAll()
"a a a".replace("a", "b") 只换第一个 "a",得到 "b a a"。这是初学者最常误用的地方。
正确做法:
- 用正则:
"a a a".replace(/a/g, "b")→"b b b" - 用
replaceAll()(ES2021+,Chrome 85+、Firefox 78+):"a a a".replaceAll("a", "b")→"b b b",更直观,且支持字面量字符串(不用转义正则特殊字符) - 注意:
replaceAll()对undefined或null的searchValue会抛错,而replace()会将其转为字符串再匹配
拼接长字符串别堆 +=,优先用模板字面量或 join()
频繁用 str += "xxx" 拼接,在 V8 等引擎中虽有优化,但语义不清、易出错,尤其在循环里。
更稳妥的方式:
- 少量变量拼接:用模板字面量
`Hello ${name}, you have ${count} messages` - 大量片段拼接:先推入数组,最后
arr.join(""),比如日志批量构建、HTML 片段生成 - 避免隐式转换陷阱:
"1" + 2 + 3是"123",而1 + 2 + "3"是"33"—— 运算顺序和类型混合极易出错
const parts = [];
for (let i = 0; i < 100; i++) {
parts.push(`${i}`);
}
const html = parts.join(""); // 比反复 += 快且安全
字符串方法本身不修改原字符串,这点始终要记牢;真正容易出问题的,往往是链式调用时忘了括号、正则标志写错、或者对空值/边界输入没做防护。









