JavaScript 字符串的常用方法有哪些?
导语:
JavaScript 中的字符串操作几乎贯穿所有业务场景。字符串的常用方法不仅是笔试高频题,更是代码阅读和重构能力的重要体现。本文将从面试官视角出发,详解 JS 字符串常用方法的考点、应用及易错点,助你轻松应对前端面试中的这类问题。
一、面试主题概述
字符串处理是前端开发的“基本功”,JS 提供了大量内置方法(如 slice
、split
、replace
、includes
等),在数据格式转换、用户输入处理、正则匹配等业务场景中频繁使用。
面试中,这类问题可用于考察候选人是否具备扎实的语言基础与良好的逻辑表达能力,尤其是在不依赖第三方库的原生处理能力上。
二、高频面试题汇总
- JavaScript 中字符串有哪些常用方法?请分类列举。
- 如何截取字符串中的指定部分?
slice
和substring
有何区别? - 如何实现字符串的反转?
- 用
replace
和正则实现一个手机号脱敏函数。 - 判断一个字符串中是否包含某个子串,有几种方式?
三、重点题目详解
题目一:
如何使用 JavaScript 实现字符串反转?
function reverseString(str) {return str.split('').reverse().join('');
}console.log(reverseString("hello")); // 输出:"olleh"
解析:
split('')
将字符串转为字符数组;reverse()
翻转数组;join('')
拼接为新字符串。
考察点:
- 是否熟悉字符串与数组的转换;
- 是否理解方法链式调用;
- 对原始数据不变性有无认知(此方法不会修改原始字符串)。
面试官关注:
反转是算法题常见变体,考察思维清晰度和基础操作熟练度。
题目二:
slice()
与 substring()
有何区别?实际开发中更推荐哪一个?
const str = "abcdef";console.log(str.slice(1, 4)); // 输出:"bcd"
console.log(str.substring(1, 4)); // 输出:"bcd"// 区别测试
console.log(str.slice(-3)); // 输出:"def"
console.log(str.substring(-3)); // 输出:"abcdef"
解析:
方法 | 支持负数索引 | 参数顺序影响结果 | 原字符串是否改变 |
---|---|---|---|
slice() | ✅ 支持 | ✅ 影响 | ❌ 不改变 |
substring() | ❌ 不支持 | ❌ 不影响 | ❌ 不改变 |
面试官关注:
- 是否了解常用 API 细节;
- 是否理解边界条件(如负索引);
- 是否清楚使用场景:推荐
slice()
,更灵活、语义清晰。
题目三:
如何用字符串方法实现手机号脱敏处理?
function maskPhone(phone) {return phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
}console.log(maskPhone("13812345678")); // 输出:"138****5678"
解析:
- 利用正则分组提取首尾;
replace()
可使用$1/$2
引用分组内容;- 实际项目中用于用户隐私保护处理。
扩展:
也可用 slice()
+ 拼接实现,更适合初学者理解:
function maskPhoneAlt(phone) {return phone.slice(0, 3) + '****' + phone.slice(-4);
}
面试官关注:
- 正则基础掌握情况;
- 多种实现方式对比(正则 vs 普通拼接);
- 可读性与健壮性,尤其是否考虑非法输入。
四、面试官视角与加分项
-
出题目的:
- 检查基础是否扎实,是否对原生字符串方法熟练;
- 考察对常见业务场景的抽象能力;
- 方便扩展为手写算法题,例如“手写实现
split
方法”。
-
加分建议:
- 不仅会用,还能解释参数意义、边界行为;
- 熟悉方法之间的差异,如
indexOf
vsincludes
; - 能结合业务说明场景(如手机号脱敏、URL 参数解析等);
- 回答中体现出对原始数据不变性的理解与注重函数的“纯粹性”。
五、总结与建议
- JS 字符串方法虽然简单,却是面试中最容易暴露基本功的地方;
- 推荐重点掌握以下方法:
slice()
、substring()
、substr()
(已废弃)、split()
、join()
、replace()
、includes()
、indexOf()
、startsWith()
、trim()
; - 平时可通过模拟业务需求(如脱敏、格式转换、截取)加深理解;
- 面试中回答时注意结合场景、补充边界、解释清楚原理,更能打动面试官。
实用记忆口诀:
分割组合靠 split/join,截取替换看 slice/replace,查找判断用 includes/indexOf,格式清洗靠 trim/padStart。