JavaScript作為一門前端編程語言，廣泛應用于網頁開發中。在開發網頁過程中，常需要根據用戶所使用的瀏覽器來做出不同的頁面渲染或交互設計。本文將介紹如何使用JavaScript來判斷瀏覽器的類型和版本。

首先，我們需要了解瀏覽器在發送HTTP請求時，會在請求header中包含一些瀏覽器相關的信息，其中最常見的是User-Agent。因此，我們可以通過獲取User-Agent信息來判斷用戶所使用的瀏覽器。

const userAgent = navigator.userAgent;
if (userAgent.indexOf("Firefox") >-1) {
console.log("用戶使用Firefox瀏覽器");
} else if (userAgent.indexOf("Chrome") >-1) {
console.log("用戶使用Chrome瀏覽器");
} else if (userAgent.indexOf("Safari") >-1) {
console.log("用戶使用Safari瀏覽器");
}

上述代碼中，我們使用navigator.userAgent獲取了用戶所使用的瀏覽器信息，并根據不同的瀏覽器類型進行了判斷。當然，我們也可以通過正則表達式來實現更加精確的匹配。

const userAgent = navigator.userAgent;
if (/Firefox\/\d+\.\d+/.test(userAgent)) {
console.log("用戶使用Firefox瀏覽器");
} else if (/Chrome\/\d+\./.test(userAgent)) {
console.log("用戶使用Chrome瀏覽器");
} else if (/Version\/.*Safari/.test(userAgent)) {
console.log("用戶使用Safari瀏覽器");
}

除了瀏覽器類型，我們還可以通過獲取瀏覽器版本信息來做更加細致的判斷。獲取瀏覽器版本信息的方式有很多種，其中比較常見的是使用瀏覽器自帶的屬性。

const version = navigator.appVersion;
if (version.indexOf("Chrome/") >-1) {
const chromeVersion = parseInt(version.replace(/^.*Chrome\/([\d]+).*$/, "$1"));
console.log(`用戶使用Chrome瀏覽器${chromeVersion}版本`);
} else if (version.indexOf("Safari/") >-1) {
const safariVersion = parseInt(version.replace(/^.*Safari\/([\d]+).*$/, "$1"));
console.log(`用戶使用Safari瀏覽器${safariVersion}版本`);
}

上述代碼中，我們首先通過navigator.appVersion獲取了瀏覽器版本信息，然后分別根據Chrome和Safari瀏覽器自帶的屬性來獲取版本號。

除了使用navigator對象來獲取瀏覽器信息外，我們還可以使用document對象的compatMode屬性來判斷瀏覽器類型。

if (document.compatMode == "BackCompat") {
console.log("用戶使用怪異模式瀏覽器");
} else {
console.log("用戶使用標準模式瀏覽器");
}

上述代碼中，我們使用document對象的compateMode屬性來判斷用戶所使用的瀏覽器類型是標準模式瀏覽器還是怪異模式瀏覽器。

綜上所述，通過JavaScript來判斷瀏覽器信息是非常重要的，因為不同的瀏覽器在渲染頁面時可能存在兼容性問題，我們可以根據用戶所使用的瀏覽器來進行相應的頁面設計和優化。