JavaScript常用检测脚本

封面图 • 2025-04-27 • JavaScript

在JavaScript开发中，编写检测脚本可以帮助我们验证某些条件是否满足、数据是否符合预期、环境是否支持特定功能等。以下是一些常见的JavaScript检测脚本示例：

---

### 1. **检测浏览器类型和版本**
```javascript
function detectBrowser() {
    const userAgent = navigator.userAgent;
    let browserName = "Unknown";
    let version = "Unknown";

if (userAgent.match(/Chrome\/([\d.]+)/)) {
        browserName = "Google Chrome";
        version = userAgent.match(/Chrome\/([\d.]+)/)[1];
    } else if (userAgent.match(/Edg\/([\d.]+)/)) {
        browserName = "Microsoft Edge";
        version = userAgent.match(/Edg\/([\d.]+)/)[1];
    } else if (userAgent.match(/Firefox\/([\d.]+)/)) {
        browserName = "Mozilla Firefox";
        version = userAgent.match(/Firefox\/([\d.]+)/)[1];
    } else if (userAgent.match(/Safari\/([\d.]+).*Version\/([\d.]+)/)) {
        browserName = "Apple Safari";
        version = userAgent.match(/Version\/([\d.]+)/)[1];
    } else if (userAgent.match(/Trident\/([\d.]+)/)) {
        browserName = "Internet Explorer";
        version = userAgent.match(/rv:([\d.]+)/)[1];
    }

return { browser: browserName, version };
}

console.log(detectBrowser());
```

---

### 2. **检测用户是否启用了JavaScript**
虽然现代浏览器默认启用JavaScript，但有时需要确保脚本运行时JavaScript是可用的：
```javascript
if (!window.jQuery) {
    console.warn("jQuery is not loaded!");
} else {
    console.log("jQuery is available!");
}
```

---

### 3. **检测设备是否为移动设备**
```javascript
function isMobileDevice() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

if (isMobileDevice()) {
    console.log("This device is mobile.");
} else {
    console.log("This device is desktop or tablet.");
}
```

---

### 4. **检测某个HTML元素是否存在**
```javascript
function elementExists(selector) {
    return document.querySelector(selector) !== null;
}

if (elementExists("#myElement")) {
    console.log("Element with ID 'myElement' exists.");
} else {
    console.log("Element with ID 'myElement' does not exist.");
}
```

---

### 5. **检测数组是否为空**
```javascript
function isArrayEmpty(arr) {
    return Array.isArray(arr) && arr.length === 0;
}

const myArray = [];
if (isArrayEmpty(myArray)) {
    console.log("The array is empty.");
} else {
    console.log("The array is not empty.");
}
```

---

### 6. **检测对象是否为空**
```javascript
function isObjectEmpty(obj) {
    return Object.keys(obj).length === 0;
}

const myObject = {};
if (isObjectEmpty(myObject)) {
    console.log("The object is empty.");
} else {
    console.log("The object is not empty.");
}
```

---

### 7. **检测浏览器是否支持某种特性**
```javascript
function supportsFeature(feature) {
    return feature in window;
}

if (supportsFeature('fetch')) {
    console.log("Fetch API is supported.");
} else {
    console.log("Fetch API is not supported.");
}
```

---

### 8. **检测字符串是否为有效的电子邮件地址**
```javascript
function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

const email = "test@example.com";
if (isValidEmail(email)) {
    console.log("Valid email address.");
} else {
    console.log("Invalid email address.");
}
```

---

### 9. **检测URL是否有效**
```javascript
function isValidUrl(url) {
    try {
        new URL(url);
        return true;
    } catch (_) {
        return false;
    }
}

const url = "https://www.example.com";
if (isValidUrl(url)) {
    console.log("Valid URL.");
} else {
    console.log("Invalid URL.");
}
```

---

### 10. **检测用户是否已登录**
假设后端通过`localStorage`或`sessionStorage`存储了用户的登录状态：
```javascript
function isLoggedIn() {
    return !!localStorage.getItem("isLoggedIn");
}

if (isLoggedIn()) {
    console.log("User is logged in.");
} else {
    console.log("User is not logged in.");
}
```

---

以上是常用的JavaScript检测脚本示例，可以根据具体需求灵活调整和扩展。如果你有更具体的场景或需求，请进一步说明，我可以为你提供更针对性的解决方案！