npm 包 user-agent-string 使用教程

前言

在 web 开发过程中，经常需要获取用户的 user agent 信息。通常情况下，user agent 是一个包含有用户使用浏览器、操作系统和设备等信息的字符串。如何处理这些 user agent 数据是一个比较繁琐的工作，如果手写代码处理可能会有很多问题。而 user-agent-string npm 包可帮助前端开发人员快速、简单地解决这个问题。

介绍

user-agent-string 是一个用于解析 user agent 信息的 JavaScript 库，支持 Node.js 和浏览器两个环境，提供了一系列方便的方法来解析 user agent，并返回有用的信息。

安装

可以通过 NPM 安装 user-agent-string：

npm install user-agent-string

也可以直接在 HTML 文件中引入:

<script src="https://unpkg.com/user-agent-string/dist/bundle.js"></script>

注意：使用 unpkg 方式引入时需要在全局环境中使用 UASParser。

使用

user-agent-string 有两个类，分别是 UASparser 和 DeviceDetector。UASparser 用于解析浏览器、操作系统和设备信息，DeviceDetector 用于检测设备类型和操作系统版本。

UASparser 使用示例

const {UASparser} = require('user-agent-string');

const uaString = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3';

const parser = new UASparser();
const result = parser.setUA(uaString).getResult();

console.log(result);

以上代码输出的结果如下:

{
  browser_name: 'Chrome',
  browser_version: '58.0.3029.110',
  os_name: 'Windows',
  os_version: '10',
  device_type: 'desktop'
}

DeviceDetector 使用示例

const {DeviceDetector} = require('user-agent-string');

const uaString = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3';

const detector = new DeviceDetector();
const result = detector.setUA(uaString).parse();

console.log(result);

以上代码输出的结果如下:

{
  client: {engine: "WebKit", name: "Chrome", type: "browser", version: "58.0.3029.110"},
  device: {brand: null, model: null, type: "desktop", vendor: null},
  os: {name: "Windows", platform: "desktop", version: "10"}
}

结论

通过本文，我们了解了如何使用 user-agent-string 这个 npm 包解析用户的 user agent 信息并返回有用的信息，帮助我们更好地理解用户的位置、语言、设备和浏览器信息，从而为用户提供更好的用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ac881e8991b448d860f