现代JavaScript特性检测应直接测试API可用性及行为,而非依赖浏览器版本号;需结合存在性检测(如typeof、in)、行为验证(try/catch+返回值检查)和权限检测(如navigator.permissions),避免仅依赖userAgent或静态判断。

现代 JavaScript 特性检测不是靠查浏览器版本号,而是直接测试目标 API 是否可用、是否按预期行为工作——这是唯一可靠的方式。
用 typeof 和 in 检测全局对象上的属性是否存在
适用于静态可枚举的 API,比如 Promise、fetch、URLSearchParams 等。
-
typeof Promise !== 'undefined'比Promise !== undefined更安全,避免 ReferenceError -
'fetch' in window可以检测是否挂载在全局(比typeof fetch !== 'undefined'更明确作用域) - 注意:某些 API 存在但不可用(如 Safari 15.4 之前的
AbortController存在但signal不被fetch支持),仅存在性检测不够
用 try/catch + 实际调用验证行为是否符合预期
存在性不等于可用性。比如 Intl.Locale 在部分旧版 Chrome 中存在但构造会抛错;Array.prototype.at 在早期 Safari 中存在但返回 undefined 而非正确值。
- 写一个最小可行调用,捕获异常或检查返回值类型/行为
- 示例:检测
at()是否真正可用
function supportsArrayAt() {
try {
return [1,2,3].at(0) === 1;
} catch {
return false;
}
}
- 避免只测「不报错」,要测「返回值合理」——有些 polyfill 会静默失败或返回错误类型
用 Feature Policy 或 Permissions API 检测运行时权限类能力
像摄像头、地理位置、通知等不是语言特性,而是受策略和用户授权双重限制的运行时能力。
立即学习“Java免费学习笔记(深入)”;
-
navigator.permissions?.query({ name: 'geolocation' })返回PermissionStatus,需监听change事件 -
document.hasStorageAccess()判断是否拥有第三方 Cookie 访问权(iOS/Safari 关键检测点) - 这类检测结果可能随用户操作实时变化,不能缓存一次结果长期使用
别依赖 userAgent 字符串做判断
几乎所有主流浏览器都允许伪造或冻结 navigator.userAgent,且新版 Chrome/Firefox 已默认启用 UA 重写(UA-CH),字符串里根本看不到真实版本。
- 查到
Chrome/120不代表支持Temporal.PlainDate——它在 Chrome 122 才默认开启 - Edge 基于 Chromium,但某些实验性 flag 默认关闭,
userAgent完全无法反映 - 即使你真要 fallback 到 UA,也必须配合实际能力检测,不能当作决策唯一依据
最麻烦的其实是那些「半实现」特性:API 存在、能调用、不报错,但行为偏差(比如正则的 dotAll 标志在旧 Safari 中被忽略)。这种只能靠最小化用例实测,没有捷径。











