JS判断浏览器类型与版本的实现代码

首先，我们需要了解浏览器类型和版本的判断原理。在JS中，我们可以通过检测一些特定的属性和方法来判断浏览器类型和版本。

一、判断浏览器类型

1. navigator.userAgent属性
   我们可以使用navigator.userAgent属性来获取浏览器的类型：

const userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf("firefox") > -1) {
    console.log("This is Firefox browser.");
} else if (userAgent.indexOf("chrome") > -1) {
    console.log("This is Chrome browser.");
} else if (userAgent.indexOf("safari") > -1) {
    console.log("This is Safari browser.");
} else if (userAgent.indexOf("trident") > -1) {
    console.log("This is Internet Explorer browser.");
} else if (userAgent.indexOf("edge") > -1) {
    console.log("This is Edge browser.");
} else {
    console.log("Unknown browser.");
}

1. window.navigator属性
   我们也可以使用window.navigator属性来获取浏览器的类型：

const browserName = window.navigator.appName;
if (browserName === "Microsoft Internet Explorer") {
    console.log("This is Internet Explorer browser.");
} else if (browserName === "Netscape") {
    if (window.navigator.userAgent.indexOf("Firefox") > -1) {
        console.log("This is Firefox browser.");
    } else if (window.navigator.userAgent.indexOf("Chrome") > -1) {
        console.log("This is Chrome browser.");
    } else if (window.navigator.userAgent.indexOf("Safari") > -1) {
        console.log("This is Safari browser.");
    } else {
        console.log("Unknown browser.");
    }
} else {
    console.log("Unknown browser.");
}

二、判断浏览器版本

我们可以通过判断浏览器的特定属性和方法来获取浏览器的版本。

1. 使用navigator.userAgent属性
   通过navigator.userAgent属性获取到的用户代理字符串中带有浏览器版本的信息，我们可以通过正则表达式来对其进行解析。

function getBrowserVersion() {
    const userAgent = navigator.userAgent.toLowerCase();
    const regExp = /(?:msie|firefox|chrome|safari|trident|edge)[\/: ]([\d.]+)/;
    const matches = userAgent.match(regExp);

    if (matches && matches.length > 1) {
        return matches[1];
    }

    return "Unknown";
}

const browserVersion = getBrowserVersion();
console.log(browserVersion);

1. 使用window.navigator属性
   通过window.navigator属性获取到的浏览器版本可以直接进行获取。

const browserVersion = window.navigator.appVersion;
console.log(browserVersion);

总结：判断浏览器类型和版本可以帮助我们在开发Web应用程序时进行兼容性处理。我们可以通过检测一些特定的属性和方法来判断浏览器类型和版本，并根据判断结果来选择不同的兼容性方案。