JavaScript

JavaScript 字符串 substr() 已被废弃：为什么会踩坑？替代用法详解 想快速答案？结论是：不要再使用 substr()。它已被标准标记为弃用，未来存在移除风险；推荐统一使用 slice()（必要时再用 substring()）。 下面是详细解释与迁移清单。 那个90%前端还在踩的坑：substr()，一个早已被浏览器“拉黑”的API！ 你有没有经历过这样的场景：一段代码在你的电脑上跑得好好的，一上线就出了岔子？或者，你在维护一坨“上古代码”时，总感觉哪里不对劲，却又说不上来？ 小心，你可能踩中了一颗早已被埋下的“地雷”。而这颗雷的名字，很可能就是 substr()。 没错，就是那个我们用来截取字符串，熟练得像每天吃饭喝水一样的 substr()。可是一个残酷的事实是：这个API已经被现代浏览器标准给“拉黑”了。它就像一个过期的罐头，虽然暂时吃不坏肚子，但随时可能让你“中毒”。 更惊人的是，据不完全统计，可能还有90%的开发者在项目中无意识地使用它。 一场“家族内斗”：为什么 substr() 被踢出群聊？ 要理解 substr() 为何失宠，我们得认识一下它的两位兄弟：slice() 和 substring()。这三位都干着截取字符串的活儿，但脾气秉性却大不相同。 想象一下，String 是一个大家族，这三兄弟是家族里最擅长切分家产（字符串）的。 slice(起点, 终点) substring(起点, 终点) substr(起点, 长度) 发现问题了吗？ 老大 slice 和老二 substring 早就商量好了，切分家产的规矩是“从几号位置切到几号位置”，简单明了。 唯独老三 substr，天生“反骨”，非要自己搞一套：“从几号位置开始，数几个单位再下刀”。 这种不合群的设计，就是它被废弃的根本原因。这就像你开车导航，所有地图都告诉你“从人民广场开到世纪大道”，突然一个导航非要说“从人民广场出发，向东 5 公里”。在快节奏的编码中，这种思维模式的切换极易导致混乱和 bug。 代码不仅是给机器执行的，更是给人读的。这种不一致性，就是程序员世界的“万恶之源”。 王者之选：为什么 slice() 是你的最佳伴侣？ 既然 substr() 不推荐用了，那我们该用谁？首选，也是我的唯一推荐：slice()。 slice() 不仅严格遵守“起点-终点”的约定，它还有一个独门绝技——支持负数索引！ 这简直是神来之笔！想取字符串末尾的几个字符？在过去，你可能需要 str.substr(str.length - 4)，又臭又长。 现在用 slice() 呢？ const str = "你好，梦兽编程！"; // 想从后面取 4 个字？一个负数搞定！ str.slice(-4); // "编程！" // 从第 4 个字开始，切到倒数第 2 个字 str.slice(3, -1); // "梦兽编程" 看到没？slice() 的负数索引就像给你开了一扇后门，操作起来优雅又高效。它就像一个经验丰富、做事滴水不漏的专业人士，指令清晰，从不让你猜。 ...

LocalStorage 终极指南：5个致命陷阱，99%开发者踩过坑 嘿，各位前端战友们！ 提到 LocalStorage，你是不是觉得它就像个老实巴交的工具人？一个随叫随到、任劳任怨的浏览器仓库管理员？我们天天用它存点数据，感觉熟悉得就像左手摸右手。 但说真的，你这位“老朋友”，其实藏着不少秘密。它有些怪癖，有些“黑料”，你要是不知道，关键时刻它就能给你来个背刺，让你加班到夜深人静，对着电脑屏幕怀疑人生。 今天，我就来当一回“扒皮先锋”，揭露 LocalStorage 的 5 个惊天“黑料”，带你看看它不为人知的一面。 黑料一：它是个“路霸”，一人干活，全家罚站 你可能觉得 localStorage.setItem('key', 'value') 这行代码快如闪电，但真相是，它是个不折不扣的“路霸”！ LocalStorage 的所有操作都是同步的。这是什么概念？ 打个比方，你的代码是条繁华的单行道（浏览器的主线程），各种车辆（渲染、动画、用户交互）都在有序通行。突然，localStorage 这辆大卡车要停车卸货（读写数据）。它不管三七二十一，直接把路一横，大喊一声：“都别动，等我搞完！” 于是，整条路都堵死了。动画卡住了，页面点击没反应了，用户以为电脑死机了。虽然对于小数据，这个过程快到你感觉不到，但如果你尝试存入一个稍微大点的 JSON 字符串，那画面的卡顿感，绝对酸爽。 // 想象一下，如果这个 aBigObject 序列化后有几MB大 // 当执行这行代码时，你的页面可能会瞬间“冻结” try { localStorage.setItem('massiveData', JSON.stringify(aBigObject)); } catch (e) { console.error("哎呀，仓库满了，放不下了！", e); } 避坑指南： 别用它来存储需要频繁更新或体积庞大的数据。对于那些大家伙，请把它们交给异步的 IndexedDB 或者干脆交给后端。 黑料二：它是个“大嘴巴”，能跨窗口“隔空喊话” 你以为每个浏览器标签页都是一座孤岛？LocalStorage 告诉你：天真了！ 它其实是个隐藏的“情报大师”。当你在一个页面（比如 a.com/page1）修改了 localStorage，所有同源（也就是同一个网站 a.com 下）的其他页面，都能立刻收到“风声”。 这个“隔空喊话”的功能，是通过 storage 事件实现的。 // 在你的另一个同源标签页里监听 window.addEventListener('storage', (event) => { console.log('隔壁老王家好像有动静了！'); console.log(`键：${event.key}`); console.log(`旧值：${event.oldValue}`); console.log(`新值：${event.newValue}`); console.log(`搞事情的页面：${event.url}`); }); 这个特性酷毙了！你可以用它来实现多标签页之间的状态同步。比如，用户在一个页面登录后，其他打开的页面可以自动“刷新”成登录状态；在一个页面把商品加入购物车，其他页面的购物车图标也能实时更新。是不是瞬间感觉格局打开了？ 黑料三：它是个“偏食怪”，只吃字符串 这是新手最容易踩的坑，没有之一。LocalStorage 表面上看起来什么都能存，但它的胃口极其挑剔，只认一样东西——字符串。 你兴高采烈地丢给它一个对象： const user = { name: '梦兽编程', level: 99 }; localStorage.setItem('userInfo', user); 然后你去取： ...