好的！下面我为你系统整理了一篇关于JavaScript 中优雅检测浏览器类型和版本的内容，涵盖从基础的 UserAgent 字符串解析到实用的现代工具，帮你写出更健壮和易维护的浏览器检测代码。

如何在 JavaScript 中优雅地检测浏览器类型和版本

—— 从 UserAgent 到实用工具全面解析

1. 浏览器检测的背景与挑战

  • 浏览器检测用于适配不同浏览器的兼容性问题，如功能差异、CSS兼容等。
  • 传统依赖 navigator.userAgent 字符串解析，但格式复杂且易变，且伪装难防。
  • 现代前端推荐 功能检测(feature detection) 代替浏览器检测，但有时仍需判断具体浏览器。

2. 传统方法：UserAgent 字符串解析

console.log(navigator.userAgent);

示例输出（Chrome 114）：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.5735.133 Safari/537.36

2.1 手写简单检测示例

function getBrowserInfo() {
  const ua = navigator.userAgent;
  let tem;
  let M = ua.match(/(opera|chrome|safari|firefox|edge|trident(?=\/))\/?\s*(\d+)/i) || [];

  if(/trident/i.test(M[1])) {
    tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
    return {name: 'IE', version: tem[1] || ''};
  }
  if(M[1] === 'Chrome') {
    tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
    if(tem != null) {
      return {name: tem[1].replace('OPR', 'Opera'), version: tem[2]};
    }
  }
  M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
  return {name: M[0], version: M[1]};
}

console.log(getBrowserInfo());

说明：

  • 该代码能识别常见浏览器：Chrome、Firefox、Safari、Opera、Edge、IE
  • 通过正则提取浏览器名称和版本号
  • 但依赖 UserAgent，存在兼容性和伪造风险

2.2 UserAgent 中的浏览器标志关键词

浏览器UserAgent 中常见标志
ChromeChrome/xxx
FirefoxFirefox/xxx
SafariSafari/xxx（注意包含Chrome）
EdgeEdg/xxx 或 Edge/xxx
OperaOPR/xxx
Internet ExplorerTrident/xxx 或 MSIE xxx

3. 现代优雅做法：借助第三方库

3.1 推荐库：bowser

安装（npm）

npm install bowser

使用示例

import Bowser from "bowser";

const browser = Bowser.getParser(window.navigator.userAgent);
console.log(browser.getBrowser()); // {name: "Chrome", version: "114.0.5735.133"}
console.log(browser.getOS());      // {name: "Windows", version: "10"}
console.log(browser.isBrowser("Chrome")); // true/false

3.2 其他可选库

库名称特色网址
ua-parser-js支持Node与浏览器，兼容性好https://github.com/faisalman/ua-parser-js
platform.js详细平台信息，设备、内核、浏览器信息https://github.com/bestiejs/platform.js

4. 功能检测 vs 浏览器检测

  • 功能检测检测浏览器是否支持特定API、特性，更可靠：if ('serviceWorker' in navigator) { // 支持Service Worker }
  • 浏览器检测适合极端兼容处理或统计分析，不推荐依赖。

5. 总结与建议

方法优点缺点适用场景
纯 UserAgent 正则无需依赖第三方，简单直观易出错，维护成本高，兼容性差简单项目、临时方案
第三方库（Bowser等）解析全面，支持多浏览器、多平台需要额外依赖复杂项目，跨浏览器兼容
功能检测最推荐，避免浏览器判断错误无法直接判断浏览器名称和版本绝大多数前端功能兼容处理

6. 进阶示例：结合 Bowser 和功能检测

import Bowser from "bowser";

const parser = Bowser.getParser(window.navigator.userAgent);
const browser = parser.getBrowser();

if (browser.name === "Chrome" && parseInt(browser.version) >= 80) {
  console.log("支持较新Chrome特性");
} else {
  console.warn("建议提示升级浏览器或使用兼容方案");
}

// 功能检测示例
if ('serviceWorker' in navigator) {
  console.log("支持Service Worker");
} else {
  console.warn("不支持Service Worker，降级处理");
}