你遇到过这种情况吗？在移动端开发时，用户输入的信息长得要命，怎么快速截取关键内容？比如手机号中间打码、地址只显示前10个字，或者把用户评论缩略成"..."结尾。今天咱们就唠唠JS字符串截取的三大绝活，保准你听完直拍大腿："原来还能这么玩！"

一、先搞懂基础知识

JS处理字符串就跟切菜似的，关键得选对刀法。移动端开发特别要注意两件事：一是不同浏览器对方法的支持度，二是用户输入内容可能千奇百怪。举个栗子，有些安卓机用户就爱在地址里加emoji，这要是处理不好直接截断，界面可就乱套了。

??方法1：substr() 这把老菜刀??

javascript复制
let str = "13812345678";
console.log(str.substr(3,4)); // 输出"1234"

• 参数说明：第一个是起始位置，第二个是截取长度
• 适用场景：已知具体截取长度的需求，比如隐藏手机号中间四位
• ??重点注意??：这个方法虽然简单，但有个大坑——第二个参数不能是负数，否则直接返回空字符串。移动端开发时要是遇到用户输入超长文本，记得先做长度校验

??优缺点对比表??

??方法2：substring() 智能剪刀??

javascript复制
let address = "北京市朝阳区建国路88号";
console.log(address.substring(0,5)); // 输出"北京市朝阳"

• 参数玄机：两个参数分别是开始和结束位置，但有个隐藏设定——会自动比较两个参数大小，小的作为起点
• 真实案例：某电商APP的商品详情页地址展示，PC端显示完整地址，移动端只显示前10个字符，就是用这个方法实现的
• ??血泪教训??：上次帮朋友改代码，他非要用负数参数，结果页面直接白屏。切记这个方法不支持负值！

??方法3：slice() 瑞士军刀??

javascript复制
let comment = "这件衣服质量真的超级好！快递也快！";
console.log(comment.slice(0,8) + "..."); // 输出"这件衣服质量真的..."

• 独门绝技：支持负数参数！比如.slice(-5)就是取最后5个字符
• 移动端适配：iOS和Android对特殊字符的计数方式不同，用slice前最好先用正则过滤异常字符
• ??个人推荐??：说实话现在做项目首选slice，既能正向切又能反向切，参数还灵活，关键是所有现代框架都推荐用这个

二、实战中的灵魂三问

??问：为什么我的截取结果总是不对？??
八成是中文惹的祸！一个中文占2个字符位置，建议先用Array.from(str)转成数组再操作，或者用正则匹配。

??问：移动端怎么处理带emoji的字符串？??
这里有个骚操作：先把字符串转成数组[...str]，这样每个emoji算一个元素，截取时就不会出现半个表情的尴尬情况。

??问：三种方法到底该用哪个？??
记住这个口诀：

• 要长度固定 → substr
• 要安全截取 → substring
• 要灵活操作 → slice

三、来自一线的避坑指南

上个月帮客户改了个BUG，他们用substring处理用户昵称，结果有人昵称带特殊符号直接导致页面崩溃。现在我们的标准处理流程是：

1. 先用正则/[^\x00-\xff]/g 过滤双字节字符
2. 判断设备类型（iOS/Android）
3. 根据屏幕宽度动态计算截取长度
4. 最后用slice+三元运算符处理边界值

有次测试发现，同样的代码在华为手机上截取结果少了一个字，后来发现是某些机型对空格的计算方式不同。所以移动端开发切记：??永远不要相信用户输入的内容！??

说点掏心窝的话

用了这么多年JS，发现字符串处理这事就跟谈恋爱似的——没有最好的方法，只有最合适的。刚开始学的时候我也纠结该用哪个方法，后来想通了：先把这三个方法的特点摸透，具体项目看需求用。

现在前端框架更新这么快，说不定哪天又出新方法了。但万变不离其宗，掌握好这三个基础方法，至少能解决80%的移动端开发需求。最后送大家一句话：代码是人写的，别被代码牵着鼻子走，该截取就截取，该换方法就换方法！