当前位置: 首页 > web >正文

JavaScript 字符串的常用方法有哪些?

导语:
JavaScript 中的字符串操作几乎贯穿所有业务场景。字符串的常用方法不仅是笔试高频题,更是代码阅读和重构能力的重要体现。本文将从面试官视角出发,详解 JS 字符串常用方法的考点、应用及易错点,助你轻松应对前端面试中的这类问题。


一、面试主题概述

字符串处理是前端开发的“基本功”,JS 提供了大量内置方法(如 slicesplitreplaceincludes 等),在数据格式转换、用户输入处理、正则匹配等业务场景中频繁使用。

面试中,这类问题可用于考察候选人是否具备扎实的语言基础与良好的逻辑表达能力,尤其是在不依赖第三方库的原生处理能力上。


二、高频面试题汇总

  1. JavaScript 中字符串有哪些常用方法?请分类列举。
  2. 如何截取字符串中的指定部分?slicesubstring 有何区别?
  3. 如何实现字符串的反转?
  4. replace 和正则实现一个手机号脱敏函数。
  5. 判断一个字符串中是否包含某个子串,有几种方式?

三、重点题目详解

题目一:
如何使用 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 vs includes
    • 能结合业务说明场景(如手机号脱敏、URL 参数解析等);
    • 回答中体现出对原始数据不变性的理解与注重函数的“纯粹性”。

五、总结与建议

  • JS 字符串方法虽然简单,却是面试中最容易暴露基本功的地方;
  • 推荐重点掌握以下方法:slice()substring()substr()(已废弃)、split()join()replace()includes()indexOf()startsWith()trim()
  • 平时可通过模拟业务需求(如脱敏、格式转换、截取)加深理解;
  • 面试中回答时注意结合场景、补充边界、解释清楚原理,更能打动面试官。

实用记忆口诀:

分割组合靠 split/join,截取替换看 slice/replace,查找判断用 includes/indexOf,格式清洗靠 trim/padStart。

http://www.xdnf.cn/news/10941.html

相关文章:

  • SpringCloud 分布式锁Redisson锁的重入性与看门狗机制 高并发 可重入
  • ALLEN BRADLEY特价型号1715-OB8DE 模块
  • 屈原精神的深度剖析:阶级局限与时代启示
  • 涨薪技术|0到1学会性能测试第94课-全链路脚本开发
  • 【iOS安全】Macbook更换brew源
  • 2025 年人脸识别技术应用备案政策已落地
  • 基于SpringBoot的“嗨玩旅游”网站设计与实现(源码+定制+开发)嗨玩旅游平台开发:景点展示与个性化推荐系统(SpringBoot)
  • Foundation Models for Generalist Geospatial Artificial Intelligence(NASA发布Prithvi)论文阅读
  • 定时线程池失效问题引发的思考
  • 远程桌面端口如何设置?你知道本地计算机怎么让外网电脑远程桌面连接访问吗?
  • nginx去掉暴漏外边的版本号
  • RTOS,其基本属性、语法、操作、api
  • Python 子进程通信:构建可靠的进程间消息交换系统
  • 5.3_3由遍历序列构造二叉树
  • 集合类基础概念
  • SMART原则讲解
  • centos挂载目录满但实际未满引发系统宕机
  • leetcode491.递增子序列:HashSet同层去重与递增条件的双重保障
  • 【python】三元图绘制(详细注释)
  • 春秋云镜 Certify Writeup
  • 光耦电路学习,光耦输入并联电阻、并联电容,光耦输出滤波电路
  • Vert.x学习笔记-Verticle原理解析
  • 一、类模板
  • ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务
  • 【数据结构知识分享】顺序表详解
  • 《中国城市统计年鉴》面板数据(1985-2024)
  • 如何安装huaweicloud-sdk-core-3.1.142.jar到本地仓库?
  • 板凳-------Mysql cookbook学习 (九--3)
  • AtCoder Beginner Contest 408(ABCDE)
  • Ⅲ-2.计算机二级选择题(三大结构之选择结构)