js怎么看浏览器版本

JS查看浏览器版本的方法包括：使用navigator对象、使用User-Agent字符串、利用库或工具。

在JavaScript中，获取浏览器版本的信息通常有以下几种方法：使用navigator对象、解析User-Agent字符串、使用现有的库或工具。其中，解析User-Agent字符串是最常用的方法，因为它提供了最详细的浏览器和操作系统信息。

一、使用navigator对象

navigator对象是JavaScript中用于获取浏览器信息的全局对象。虽然它不直接提供版本号，但我们可以通过它的一些属性获取相关信息。

1. navigator.userAgent

navigator.userAgent属性返回用户代理字符串，该字符串包含有关浏览器、操作系统等信息。解析这个字符串可以获取浏览器的版本信息。

let userAgentString = navigator.userAgent;
console.log(userAgentString);

二、解析User-Agent字符串

User-Agent字符串中包含了大量信息，包括浏览器名称和版本。通过正则表达式解析这个字符串，可以提取出所需的浏览器版本信息。

1. 解析示例

function getBrowserVersion() {
    let userAgentString = navigator.userAgent;
    let match = userAgentString.match(/(firefox|msie|trident|chrome|safari|opr|edg|edge)/?s*(d+)/i) || [];
    let browserName, browserVersion;
    if (/trident/i.test(match[1])) {
        let rv = userAgentString.match(/brv[ :]+(d+)/g) || [];
        browserName = "IE";
        browserVersion = rv[1] || '';
    } else {
        browserName = match[1] ? match[1] : navigator.appName;
        browserVersion = match[2] ? match[2] : navigator.appVersion;
    }
    return { browserName, browserVersion };
}
let browserInfo = getBrowserVersion();
console.log(`Browser Name: ${browserInfo.browserName}`);
console.log(`Browser Version: ${browserInfo.browserVersion}`);

三、使用现有的库或工具

有一些现成的JavaScript库可以帮助我们更方便地获取浏览器信息。比如 Bowser 和 platform.js。

1. 使用 Bowser 库

Bowser 是一个强大的JavaScript库，可以帮助我们解析User-Agent字符串并获取详细的浏览器信息。

// 使用npm安装Bowser库
// npm install bowser
const Bowser = require('bowser');
let browser = Bowser.getParser(window.navigator.userAgent);
let browserInfo = browser.getResult();
console.log(`Browser Name: ${browserInfo.browser.name}`);
console.log(`Browser Version: ${browserInfo.browser.version}`);

四、不同浏览器的处理

不同浏览器的User-Agent字符串格式不同，因此在解析时需要特别注意。以下是一些常见浏览器的User-Agent字符串示例：

1. Chrome

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

2. Firefox

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:54.0) Gecko/20100101 Firefox/54.0

3. Safari

Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1

五、综合使用

在实际项目中，我们可以综合使用上述方法，创建一个更为健壮的获取浏览器信息的函数。这样可以确保在各种环境下都能准确获取到浏览器版本信息。

function detectBrowser() {
    let userAgent = navigator.userAgent;
    let browserName, fullVersion, majorVersion;
    if ((offset = userAgent.indexOf("Opera")) != -1) {
        browserName = "Opera";
        fullVersion = userAgent.substring(offset + 6);
        if ((offset = userAgent.indexOf("Version")) != -1) 
            fullVersion = userAgent.substring(offset + 8);
    } else if ((offset = userAgent.indexOf("MSIE")) != -1) {
        browserName = "Microsoft Internet Explorer";
        fullVersion = userAgent.substring(offset + 5);
    } else if ((offset = userAgent.indexOf("Chrome")) != -1) {
        browserName = "Chrome";
        fullVersion = userAgent.substring(offset + 7);
    } else if ((offset = userAgent.indexOf("Safari")) != -1) {
        browserName = "Safari";
        fullVersion = userAgent.substring(offset + 7);
        if ((offset = userAgent.indexOf("Version")) != -1) 
            fullVersion = userAgent.substring(offset + 8);
    } else if ((offset = userAgent.indexOf("Firefox")) != -1) {
        browserName = "Firefox";
        fullVersion = userAgent.substring(offset + 8);
    } else if ((nameOffset = userAgent.lastIndexOf(' ') + 1) < 
               (verOffset = userAgent.lastIndexOf('/'))) {
        browserName = userAgent.substring(nameOffset, verOffset);
        fullVersion = userAgent.substring(verOffset + 1);
        if (browserName.toLowerCase() == browserName.toUpperCase()) {
            browserName = navigator.appName;
        }
    }
    majorVersion = parseInt('' + fullVersion, 10);
    if (isNaN(majorVersion)) {
        fullVersion = '' + parseFloat(navigator.appVersion);
        majorVersion = parseInt(navigator.appVersion, 10);
    }
    return {
        browserName: browserName,
        fullVersion: fullVersion,
        majorVersion: majorVersion
    };
}
let browserDetails = detectBrowser();
console.log(`Browser Name: ${browserDetails.browserName}`);
console.log(`Full Version: ${browserDetails.fullVersion}`);
console.log(`Major Version: ${browserDetails.majorVersion}`);

通过以上几种方法，我们可以在不同的场景下灵活地获取浏览器的版本信息，确保我们的应用能够根据不同的浏览器版本进行相应的优化和调整。