JS startsWith 用法和几个容易踩的坑

判断链接是不是以 http 开头，有人写 str.indexOf('http') === 0，能跑，但读起来费劲。ES6 之后直接用 startsWith，一行就说明白意图。老代码里这种 indexOf 写法很多，维护时不用急着全改，新写的代码用新方法就行。JS startswith 的写法不难，坑都在细节里。

第二个参数是起点不是长度

str.startsWith('http') 返回 true 或 false，默认从下标 0 开始比。第二个参数可以指定起点，比如 str.startsWith('abc', 3) 是看下标 3 往后是不是 abc。它区分大小写，'Hello'.startsWith('h') 结果是 false。第二个参数是起点不是长度，这点最容易记错。

它也不接受正则，想按模式匹配就用 /^abc/.test(str)。startsWith 判断开头，endsWith 判断结尾，includes 判断中间有没有，三个别混着用。判断多个前缀可以写成数组加 some，比一串 if 清楚。

类型不对会直接抛错

对 undefined 或 null 调用 startsWith，会抛 TypeError。数据来自接口时先判断 typeof str === 'string'，或者用 String(str) 转一下，别等报错再回头找。数字和布尔值也会被转换，但结果往往不是你想要的，先转字符串再判断更稳。

还要注意它不会帮你 trim。用户输入前后带空格，' http://a'.startsWith('http') 就是 false，先 trim 再判断。URL 还要考虑大小写，协议名统一转小写再比，别只处理一半。

老浏览器要加垫片

IE 不支持 startsWith，如果项目还要兼容，就在入口加一段判断，用 indexOf 补一个实现：

if (!String.prototype.startsWith) { String.prototype.startsWith = function (s, pos) { return this.indexOf(s, pos || 0) === 0; }; }

JS startswith 的兼容问题，新项目基本不用管，直接用原生方法。维护老系统时，先确认构建工具有没有自动注入 polyfill，没有再加，别重复定义。polyfill 要在业务代码之前加载，否则第一处调用还是会报错。