【前端】JavaScript字符串执行方法总结

你可以通过以下几种方式来执行字符串中的JavaScript代码：

javascript 复制代码

var strJS=` setPageInfo();
    document.title = SN + "【测试页】";
    laydate.render({ elem: "#qdkssj", type: "date", value: new Date() });
    laydate.render({ elem: "#qdjssj", type: "date", value: "" });
    radioLoad("sfcz", "1", 1);
    selectLoad("htzt", "1", 1);
    checkboxLoad("cs", "1");`;

1. eval() 方法（最简单直接）

javascript 复制代码

// 使用eval执行
try {
    eval(strJS);
} catch (error) {
    console.error("执行JavaScript字符串出错:", error);
}

2. Function 构造函数

javascript 复制代码

function executeJSString(jsString) {
    try {
        // 创建函数并立即执行
        return new Function(jsString)();
    } catch (error) {
        console.error("执行JavaScript字符串出错:", error);
        return null;
    }
}

// 执行
executeJSString(strJS);

3. 通过 script 标签动态执行（适用于浏览器环境）

javascript 复制代码

function executeViaScript(jsString) {
    const script = document.createElement('script');
    script.textContent = jsString;
    document.head.appendChild(script);
    document.head.removeChild(script); // 执行后移除
}

executeViaScript(strJS);

4. 异步执行版本

javascript 复制代码

async function executeJSAsync(jsString) {
    return new Promise((resolve, reject) => {
        try {
            const result = eval(jsString);
            resolve(result);
        } catch (error) {
            reject(error);
        }
    });
}

// 使用
executeJSAsync(strJS)
    .then(() => console.log("执行成功"))
    .catch(err => console.error("执行失败:", err));

5. 安全增强版（添加错误处理和上下文）

javascript 复制代码

function safeExecuteJS(jsString, context = {}) {
    // 创建安全的执行环境
    const sandbox = {
        console,
        Date,
        ...context  // 可以传入外部变量
    };
    
    // 使用with语句提供上下文（注意：严格模式下不可用）
    const code = `
        with(sandbox) {
            ${jsString}
        }
    `;
    
    try {
        const execute = new Function('sandbox', code);
        return execute(sandbox);
    } catch (error) {
        console.error("安全执行失败:", error);
        return null;
    }
}

// 使用示例
const customContext = {
    SN: "页面标题",
    laydate: window.laydate, // 假设laydate已全局存在
    radioLoad: window.radioLoad,
    // ... 其他需要的函数
};

safeExecuteJS(strJS, customContext);

⚠️ 重要安全提示：

eval() 有安全风险：如果字符串来自不可信来源，可能会执行恶意代码
依赖项检查 ：确保代码中使用的函数（如 setPageInfo、laydate、radioLoad 等）已定义
作用域问题：注意执行代码的作用域是否能访问到需要的变量

推荐的使用方式：

javascript 复制代码

// 推荐使用Function构造函数或异步版本
function executeScript(script) {
    if (typeof script !== 'string') return;
    
    // 检查必要的依赖
    const required = ['laydate', 'radioLoad', 'selectLoad', 'checkboxLoad'];
    const missing = required.filter(fn => typeof window[fn] === 'undefined');
    
    if (missing.length > 0) {
        console.warn('缺少依赖:', missing);
        return false;
    }
    
    // 执行代码
    try {
        const executor = new Function(script);
        executor.call(window); // 确保在window上下文中执行
        return true;
    } catch (error) {
        console.error('脚本执行失败:', error);
        return false;
    }
}

// 执行
executeScript(strJS);

选择哪种方式取决于你的具体需求和安全性要求。对于内部可信的代码，eval() 或 Function() 构造函数是最简单的选择。