如何将PHP中配置的运算符逻辑迁移到JavaScript中实现？

你完全可以通过「配置序列化 + 预设运算符映射」的方案实现，全程不需要用到eval，没有安全风险。

步骤1：PHP侧输出配置到前端 #

直接把你现有的字段配置数组通过json_encode序列化后，输出到前端即可，示例如下：

$formConfig = [
    'text1' => [
        'control' => [
            'text' => [
                'show_if' => [
                    'field' => 'text2',
                    'comparison' => '===',
                    'value' => 'Show text 1' // 建议这里加个key，不然按索引取可读性太差
                ]
            ]
        ]
    ],
    'text2' => [
        'control' => 'text'
    ]
];
// 输出给前端，比如放在全局变量里
echo "<script>window.formConfig = " . json_encode($formConfig) . ";</script>";

如果你不想改原有配置的结构，直接取show_if数组的第三个元素当对比值也可以。

步骤2：JS侧实现通用判断逻辑 #

提前预设好支持的比较运算符映射表，所有判断逻辑都走预设的方法，完全规避动态执行代码的风险：

// 预设比较运算符映射，需要支持更多运算符直接加就行
const comparisonMap = {
    '===': (a, b) => a === b,
    '!==': (a, b) => a !== b,
    '==': (a, b) => a == b,
    '!=': (a, b) => a != b,
    '>': (a, b) => a > b,
    '<': (a, b) => a < b,
    'includes': (a, b) => Array.isArray(a) ? a.includes(b) : false
}

// 通用显隐判断函数
function checkFieldShow(showIfConfig, formValues) {
    const { field, comparison } = showIfConfig;
    // 如果你没改PHP配置的键，这里换成 const compareValue = showIfConfig[2] 即可
    const compareValue = showIfConfig.value;
    const currentFieldValue = formValues[field];
    // 不存在的运算符默认返回true，或者按你的需求处理
    const compareFn = comparisonMap[comparison] || (() => true);
    return compareFn(currentFieldValue, compareValue);
}

// 表单值变化时的处理逻辑
function handleFormChange(formValues) {
    for (const [fieldName, fieldConfig] of Object.entries(window.formConfig)) {
        // 没有show_if配置默认显示
        if (!fieldConfig.control?.text?.show_if) {
            document.querySelector(`[name=${fieldName}]`).closest('.form-item').style.display = 'block';
            continue;
        }
        const isShow = checkFieldShow(fieldConfig.control.text.show_if, formValues);
        document.querySelector(`[name=${fieldName}]`).closest('.form-item').style.display = isShow ? 'block' : 'none';
    }
}

扩展说明 #

如果后续需要支持多条件组合（比如同时满足多个条件才显示），只要调整show_if的配置结构，新增逻辑运算符（&&/||）的处理分支即可，依然不需要用到eval。

内容的提问来源于stack exchange，提问作者Daniel James