记录 User Agent 信息可以帮助我们 了解用户使用的设备和浏览器 ,从而优化页面兼容性和用户体验。同时,它对 用户行为分析和统计 也很重要,能指导产品决策。最后,在某些场景下,它还能用于 安全审计或识别异常请求 。
🧭 一、什么是 User Agent(用户代理)? User Agent (简称 UA)是客户端发送给服务器的一段字符串,用于标识自己是什么浏览器、操作系统、设备等信息。
每次浏览器(或其他 HTTP 客户端)发起请求时,都会在 HTTP 请求头中包含一个 User-Agent
字段。
如下所示:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36
这个字符串并没有统一标准,但一般包括如下几部分:
操作系统信息(如 Windows NT 10.0)
记录 User Agent 信息可以用于前端适配页面展示、后端统计用户设备分布、安全防护识别异常请求,以及帮助开发者调试分析用户环境。
📦 二、什么是 ua-parser-js
? ua-parser-js
是一个 JavaScript 库,用来 解析 User Agent 字符串 ,提取其中的有用信息。它是轻量级的、无依赖的,可运行在浏览器和 Node.js 中。
你可以通过它快速获取浏览器名称和版本、操作系统信息、设备类型(如手机、平板、桌面)以及渲染引擎(如 WebKit 或 Blink)等关键数据。
🚀 三、安装与引入 在前端或 Node.js 项目中,先安装:
npm install ua-parser-js
然后根据你的项目类型选择引入方式:
ES 模块:
import UAParser from "ua-parser-js" ;
CommonJS:
const UAParser = require ( "ua-parser-js" );
如果只是简单在网页中使用,可以直接通过 CDN 引入:
< script src = "https://cdn.jsdelivr.net/npm/ua-parser-js@latest/src/ua-parser.min.js" > </ script >
搞定!随时可以开始解析 UA 啦~
首先,你需要拿到用户的 User Agent 字符串:
const uaString = navigator.userAgent; // 前端浏览器环境
然后用 UAParser
来解析它:
const parser = new UAParser(uaString); // 把 UA 字符串传进去 const result = parser.getResult(); console .log(result);
输出结果如下所示(示例,仅供参考):
{ "ua" : "Mozilla/5.0 (Windows NT 10.0; Win64; x64)..." , "browser" : { "name" : "Chrome" , "version" : "123.0.0.0" }, "engine" : { "name" : "Blink" , "version" : "123.0.0.0" }, "os" : { "name" : "Windows" , "version" : "10" }, "device" : { "model" : undefined, "type" : undefined, "vendor" : undefined }, "cpu" : { "architecture" : "amd64" } }
那我们如何提取你想要的信息
const browser = parser.getBrowser(); console .log(browser.name); // Chrome console .log(browser.version); // 123.0.0.0 const os = parser.getOS(); console .log(os.name); // Windows console .log(os.version); // 10
就这么简单!只需要几行代码,你就能轻松读取浏览器、系统、设备等信息,适用于各种分析、适配或调试场景。需要我再加点服务端的使用示例吗?
总结 最后我们展示一个 demo,我们先在浏览器上面获取到 ua:
之后我们再通过 npx
来执行:
npx ua-parser-js 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36'
最终输出结果如下图所示;
User Agent 是客户端在请求网页时发送的一段标识信息,用于描述它所使用的浏览器、操作系统、设备类型等。 虽然格式没有严格标准,但大多数 UA 都遵循一定结构,包含浏览器内核、系统平台和版本号等关键数据。通过解析 UA,可以帮助我们实现页面适配、用户分析、安全防护和调试支持。不过需要注意,UA 是可以伪造的,因此不能完全依赖它进行身份验证。
阅读原文:原文链接
该文章在 2025/8/28 13:04:12 编辑过