前端开发中的常用工具函数(七)

十七、startsWith()方法：字符串前缀判断

1. 基本语法

startsWith() 方法用于判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回 true 或 false。

语法结构：

javascript 复制代码

str.startsWith(searchString[, position])

参数说明：

searchString：必需。要搜索的子字符串。
position：可选。在 str 中搜索 searchString 的开始位置，默认值为 0。

返回值：

布尔值。如果给定的字符在字符串的开头，则返回 true；否则返回 false。

2. 基础示例

为了快速理解，我们来看两个简单的基础示例。

示例 A：不带第二个参数

javascript 复制代码

const str = "Hello, uni-app!";

console.log(str.startsWith("Hello")); // 输出: true
console.log(str.startsWith("uni-app")); // 输出: false (因为开头是 Hello)

示例 B：带第二个参数（指定开始位置）

javascript 复制代码

const str = "Hello, uni-app!";

// 从索引 7 的位置开始判断是否以 "uni" 开头
console.log(str.startsWith("uni", 7)); // 输出: true

3. 企业开发中的实际应用场景

在企业级项目中，startsWith 往往能在一些关键逻辑中发挥重要作用。以下是几个典型场景：

场景一：图片或资源路径判断

在混合开发或全栈开发中，我们经常需要区分图片是网络图片还是本地静态资源，或者是 Base64 格式。

javascript 复制代码

function getImageSrc(url) {
  if (url.startsWith('http://') || url.startsWith('https://')) {
    // 处理网络图片逻辑
    console.log('这是一个网络图片');
  } else if (url.startsWith('data:image/')) {
    // 处理 Base64 图片逻辑
    console.log('这是一个 Base64 编码的图片');
  } else if (url.startsWith('/static/')) {
    // 处理本地图片逻辑
    console.log('这是一个本地静态图片');
  }
}

场景二：路由拦截与权限控制

在单页应用（SPA）或小程序的路由守卫中，可以通过判断 URL 前缀来进行模块级的权限拦截。

javascript 复制代码

function routeGuard(toPath) {
  const userRole = getUserRole(); // 获取当前用户角色
  
  // 拦截所有以 /admin 开头的路由
  if (toPath.startsWith('/admin') && userRole !== 'admin') {
    console.warn('警告：您没有权限访问后台管理模块！');
    return false;
  }
  // 拦截所有以 /vip 开头的路由
  if (toPath.startsWith('/vip') && !isVip()) {
    console.warn('警告：该页面仅限 VIP 用户访问！');
    return false;
  }
  
  return true;
}

场景三：API 接口前缀区分

在微服务架构下，前端可能需要根据不同的接口前缀，请求不同的后端服务网关。

javascript 复制代码

function request(url, data) {
  let baseURL = '';
  
  if (url.startsWith('/user-service/')) {
    baseURL = 'https://user-gateway.example.com';
  } else if (url.startsWith('/order-service/')) {
    baseURL = 'https://order-gateway.example.com';
  } else {
    baseURL = 'https://api.example.com';
  }
  
  return fetch(baseURL + url, { body: JSON.stringify(data) });
}

4. 注意事项与常见陷阱

虽然 startsWith 很好用，但在实际开发中如果不注意细节，可能会掉进一些坑里。

陷阱一：大小写敏感

startsWith 是严格区分大小写的。如果用户的输入或抓取的数据大小写不确定，直接使用可能会漏判。

错误示例：

javascript 复制代码

const str = "Hello World";
str.startsWith("hello"); // 返回 false，因为 H 是大写

正确做法： 在判断前统一转换为小写或大写。

javascript 复制代码

str.toLowerCase().startsWith("hello"); // 返回 true

陷阱二：参数的隐式类型转换

如果传入的 searchString 不是字符串类型，JavaScript 会先将其转换为字符串，这可能导致意想不到的结果。

javascript 复制代码

const str = "12345";
str.startsWith(1); // 返回 true (数字 1 被转换为了字符串 "1")

const obj = { toString: () => "12" };
str.startsWith(obj); // 返回 true

建议： 在开发中尽量保证传入的是字符串类型，或者做好类型校验。

陷阱三：浏览器兼容性问题

startsWith 是 ES6 (ES2015) 引入的方法。在现代浏览器和主流小程序环境中均完美支持，但在一些老旧环境（如 IE 11 及更早版本）中不被支持 。

应对方案： 如果你的项目需要兼容老版本浏览器，需要引入 Polyfill（垫片），或者使用 ES5 的写法替代：

javascript 复制代码

// ES5 兼容写法
str.indexOf('target') === 0;

陷阱四：误用 position 参数

有些开发者会误以为 position 是"截取的长度"，但实际上它是"开始查找的索引位置"。

javascript 复制代码

const str = "Hello World";
// 误以为：从 "Hello" (长度5) 之后开始找，但实际上是直接在索引 5 处查找
str.startsWith(" World", 5); // 返回 true，因为索引5位置确实是 " World" 的开头