从SQL数据库提取字符串的JavaScript脚本报错问题求助

我正从SQL数据库中为每个产品编号的最多12个价格选项生成对应按钮，这部分功能正常。每创建一个按钮，我就会生成div1price、div2price等，div1minorder、div2minorder等，div1pricequantity、div2pricequantity等变量。当点击价格选项按钮时，会显示对应规格的价格、最小订购量和价格单位信息。但只有当数据为数字时功能正常，字符串数据会触发报错，这违背了需求。我知道自己在基础逻辑上有误，但找不到问题所在，怀疑和eval有关！我是编程新手，请多包涵。谢谢

数据示例： #

当前代码： #

变量生成代码：

$('#divx').attr('id', 'div' + butno);
price = <% =(price.Fields.Item("itemprice").Value)%>;
minorder = <% =(price.Fields.Item("minquantity").Value)%>;
pricequantity = <% =(price.Fields.Item("pricequantity").Value)%>;
a = ('div' + butno + 'price');
a2 = ('div' + butno + 'minorder');
a3 = ('div' + butno + 'pricequantity');
eval('var ' + a + '= ' + price + ';');
eval('var ' + a2 + '= ' + minorder + ';');
eval('var ' + a3 + '= ' + pricequantity + ';');
butno = butno + 1;

按钮点击事件（以第一个按钮为例）：

$("#div1").click(function(){
    $("#bigprice").text('£' + div1price);
    $("#minorder").text('Minimum Order Quantity: ' + div1minorder);
    $("#pricequantity").text('Price Quantity: ' + div1pricequantity);
});

我尝试了上述代码，当所有数据都是数字时功能正常，逻辑上说明我没有正确提取字符串数据。

问题根源 #

你用eval赋值时，字符串没有加引号，比如当pricequantity是Each时，eval执行的代码会是var div1pricequantity= Each;，这里Each会被当成变量而非字符串，自然报错。数字不需要引号所以正常。而且用eval动态生成变量本身就不安全、难维护，完全可以用数组或对象存储数据，根本不需要eval。

修复方案 #

1. 推荐方案：用数组统一存储数据

把每个价格选项的数据存到数组里，不用生成零散变量：

// 初始化数组，放在循环外部
const priceOptions = [];

// 循环内的代码改成这样
const priceData = {
    price: <% =(price.Fields.Item("itemprice").Value)%>,
    minorder: <% =(price.Fields.Item("minquantity").Value)%>,
    pricequantity: "<% =(price.Fields.Item("pricequantity").Value)%>" // 字符串强制加引号
};
priceOptions.push(priceData);

// 设置按钮ID
$('#divx').attr('id', 'div' + butno);
butno = butno + 1;

然后用事件委托绑定点击事件，不用给每个按钮写单独逻辑：

// 给生成的按钮加data-index属性，比如<button id="div1" data-index="0">Small</button>
$(document).on('click', '[data-index]', function() {
    const index = $(this).data('index');
    const option = priceOptions[index];
    $("#bigprice").text('£' + option.price);
    $("#minorder").text('Minimum Order Quantity: ' + option.minorder);
    $("#pricequantity").text('Price Quantity: ' + option.pricequantity);
});

2. 临时方案：给字符串加引号（不推荐）

如果一定要保留原有的变量生成方式，必须给字符串类型的值套上引号，修改eval部分：

// 给字符串值添加引号，同时转义内部引号避免语法错误
function formatValueForEval(value) {
    if (typeof value === 'string') {
        return `"${value.replace(/"/g, '\\"')}"`;
    }
    return value;
}

eval('var ' + a + '= ' + formatValueForEval(price) + ';');
eval('var ' + a2 + '= ' + formatValueForEval(minorder) + ';');
eval('var ' + a3 + '= ' + formatValueForEval(pricequantity) + ';');

但还是强烈建议用数组/对象的方式，eval容易引发安全风险和调试难题。

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