JS 变量为 null 或 undefined 时怎么安全判断字符串开头

一、直接调用 startsWith 为什么会引发致命崩溃？

在日常业务开发中，前端从后端 API 接口接收到的文本字段常常未作完备初始化，或者用户输入表单尚未填写，变量默认保持为 null 或 undefined。很多初学者习惯直接编写如下代码：

// 潜在高危代码
let avatarUrl = null;

// 直接调用实例方法
if (avatarUrl.startsWith("https://")) {
  console.log("安全协议头像");
}
// 💥 抛出异常：Uncaught TypeError: Cannot read properties of null (reading 'startsWith')

要彻底理解这个报错，需要探究 JavaScript 引擎对点运算符（.）的执行规范。根据 ECMAScript 规范，当执行 obj.method() 时，引擎首先对点左侧的操作数执行内部抽象操作 ToObject(obj)：

• 正常字符串字面量：引擎通过“自动装箱”（Auto-boxing）将原始字符串临时封装为 String 对象实例，并在 String.prototype 原型链上成功检索到 startsWith 方法。
• null 与 undefined：规范明确定义这两个基本原始类型不存在任何原型链，也无法通过 ToObject 转换为对象。引擎在尝试寻址其成员时直接触发硬性断言失败，抛出不可忽视的 TypeError。

二、安全判断字符串开头的 5 步防御流程

针对不可控的外部变量，建立一套清晰完备的防御逻辑是保障系统稳定性的基石。安全判断的核心思想是：在触碰任何原型方法之前，先完成有效性判定与阻断。

如图 2 所示，一次完备的安全判断通常包含五个阶段：

1. 接收输入：获取待测变量 str 与待匹配的前缀 prefix。
2. 空值拦截：快速识别 null 与 undefined，提前短路返回 false。
3. 类型校验：确认变量确实为 string 原始类型，防止非字符串（如数字 404）混入后续逻辑。
4. 调用原生方法：在确认安全的上下文中，执行 String.prototype.startsWith。
5. 布尔归一化：确保整个表达式在任何边界分支下输出纯净的布尔值（true 或 false），避免产生具有歧义的 undefined 或假值对象。

三、四种主流解决方案及深度代码解析

方案 1：可选链操作符（?.）配合空值合并（??）—— 现代最佳解法

ES2020（ECMAScript 2020）正式引入了可选链操作符 ?.。当左侧操作数为 null 或 undefined 时，表达式会立即停止求值并直接返回 undefined，而不会抛出异常。

// 基础形式
const result = str?.startsWith("https");
// 当 str 为 null 或 undefined 时，result 的值为 undefined

// 生产环境推荐：使用 ?? 归一化为 boolean
const isSecure = str?.startsWith("https") ?? false;

// 或者使用 Boolean() 函数强转
const isSecureBoolean = Boolean(str?.startsWith("https"));

方案 2：空值合并设置兜底空字符串 —— 直观且语法紧凑

若变量可能为空，我们也可以借助 ?? 将空值提前转化为一个合法的空字符串 ""，再安全调用 startsWith 方法：

// 将 null 或 undefined 兜底为空字符串
const isSecure = (str ?? "").startsWith("https");

执行原理分析：当 str 为 null 时，(str ?? "") 计算得到 ""。此时 "".startsWith("https") 是完全合法的字符串实例方法调用，计算结果直接为布尔值 false。

注意事项：如果前缀参数同样为空字符串 ""，即 ("").startsWith("")，规范规定返回 true。如果你的业务场景要求空值即使匹配空前缀也必须返回 false，则应使用方案 1 或方案 4。

方案 3：逻辑与（&&）短路求值 —— 兼容老旧宿主环境

在不支持 ES2020 语法且未配置 Babel 转译的老旧项目或 Node.js 旧版本中，经典的短路逻辑与是最常用的兼容写法：

// 经典短路写法
const isSecure = Boolean(str && str.startsWith("https"));

// 亦可通过双重取反运算符 !! 归一化
const isSecureAlt = !!(str && str.startsWith("https"));

方案 4：严格类型守卫（typeof）—— 防范意外非字符串类型

在处理不可信任的第三方 API 响应、URL 查询参数解析或动态 JSON 数据时，变量可能不仅是 null/undefined，还可能意外出现数字（如 12345）、布尔值、对象或数组。对于非字符串对象，前述方案 1、2、3 均会再次触发 TypeError。此时必须使用严格的类型守卫：

// 终极防御：先校验类型是否为 string
const isSecure = typeof str === "string" && str.startsWith("https");

核心优势：

• 如果 str 为 null，typeof str 为 "object"，左侧条件直接得出 false，立即短路。
• 如果 str 为 undefined，typeof str 为 "undefined"，同样直接短路返回 false。
• 如果 str 意外传入数字 200，typeof str === "number"，安全拦截，绝不调用方法。
• 左侧判断本身就产生确定性的布尔值，整句表达式天然输出纯净布尔类型。

四、各方案在极端边界值下的对照矩阵

为了清晰呈现不同方案在各类边界数据输入下的具体表现，下表汇总了常见异常入参的执行结果：

五、工程化落地：封装高鲁棒性通用工具函数

在实际大型工程或微前端项目中，频繁在业务代码中散落各种防御判断容易造成风格不统一，且容易遗漏布尔归一化。建议在公共工具库（如 utils/string.ts）中统一封装通用的工具函数：

/**
 * 安全判断字符串是否以指定前缀开头
 * 自动防御 null、undefined 及任何非 string 类型的非法入参
 * 
 * @param val 待检测的未知变量
 * @param prefix 需要匹配的前缀字符串
 * @param position 检索起始索引位置（默认为 0）
 * @returns 是否匹配的纯布尔值
 */
export function safeStartsWith(val, prefix, position = 0) {
  // 基础类型守卫
  if (typeof val !== "string" || typeof prefix !== "string") {
    return false;
  }
  
  return val.startsWith(prefix, position);
}

// TypeScript 类型收窄增强版（Type Guard）
export function isStringStartsWith(val, prefix) {
  return typeof val === "string" && val.startsWith(prefix);
}

借助此类通用函数，调用端代码将兼具极致的简洁性与百分之百的运行时安全性：

// 业务调用示例
if (safeStartsWith(user?.profile?.website, "https://")) {
  renderSecureBadge();
}

六、工程实践决策树与场景选型指南

在实际开发中，应结合项目所处场景按需选择最优策略：

• 场景 A：现代前端应用内的普通局部条件判断
  直接使用 if (str?.startsWith("..."))。利用 JavaScript 的假值隐式转换特性，语法最为简练，阅读负担最低。
• 场景 B：函数返回值、组件 Props 或状态变量存储
  必须使用 str?.startsWith("...") ?? false 或 Boolean(str?.startsWith("..."))。保证返回值类型稳定在 boolean，不向外部泄露 undefined 潜在隐患。
• 场景 C：公共 API 入口、SDK 封装、表单与外部数据消费
  必须使用 typeof str === "string" && str.startsWith("...") 或封装好的 safeStartsWith。彻底防御外部使用者传入非预期的数字、对象等脏数据。
• 场景 D：需要向后兼容至 ES5 / 旧版移动端 WebView
  采用 Boolean(str && str.startsWith("..."))，确保在未配置 polyfill 的古老环境中依然具备容错能力。