jQuery输入框变更时计算返回NaN问题求助

我编写了一套代码，用于在输入框内容变更时计算净利润，HTML结构如下：

<div class="card-body">
  <div class="form-group">
    <label>Pret vanzare</label>
    <input id="price_vanzare" type="text" name="price" class="form-control" placeholder="Product price" value="<?php echo $product->price; ?>">
  </div>
  <div class="form-group">
    <label>Pret achizitie</label>
    <input id="price_achizitie" type="text" name="price_achizitie" class="form-control" placeholder="Product price" value="<?php echo $product->price_achizitie; ?>">
  </div>
  <div class="form-group">
    <label>Pret transport</label>
    <input id="price_transport" type="text" name="price_transport" class="form-control" placeholder="Product price" value="<?php echo $product->price_transport; ?>">
  </div>
  <div class="form-group">
    <label>Profit net</label>
    <input id="profit" type="text" class="form-control">
  </div>
</div>

对应的jQuery计算代码：

$(":input[type='text']").keyup(function(){ 
    
        var pret_achizitie = $('#price_achizitie').val();
        var pret_vanzare   = $('#price_vanzare').val();
        var pret_transport = $('#price_transport').val();

        var profit_net = ((pret_vanzare - ((pret_achizitie*1.19) + pret_transport + (0.19 * pret_transport))) - ((pret_vanzare * 0.19/1.19) - ((pret_achizitie * 0.19)+(pret_transport * 0.19)))) - (1/100) * (pret_vanzare -(pret_vanzare * 0.19/1.19));    
                
        $('#profit').val(parseFloat(profit_net).toFixed(2));

    } );

页面初始加载时，通过PHP赋值变量执行相同计算是正常的：

var pret_achizitie = <?php echo $product->price_achizitie; ?>;
var pret_vanzare   = <?php echo $product->price; ?>;
var pret_transport = <?php echo $product->price_transport; ?>;
var transport_client = <?php echo $product->transport_client; ?>;

var profit_net = ((pret_vanzare - ((pret_achizitie*1.19) + pret_transport + (0.19 * pret_transport))) - ((pret_vanzare * 0.19/1.19) - ((pret_achizitie * 0.19)+(pret_transport * 0.19)))) - (1/100) * (pret_vanzare -(pret_vanzare * 0.19/1.19));    
$('#profit').val(parseFloat(profit_net).toFixed(2));

但修改输入框内容时，#profit输入框返回NaN值。若将复杂公式替换为简单的pret_vanzare - pret_achizitie，输入框变更时计算正常，需要排查复杂公式的问题。

问题核心在于：从输入框获取的值是字符串类型。简单减法中JS会自动隐式转换字符串为数值，但复杂公式里的多步嵌套运算会因为字符串参与运算（比如字符串和数字相乘）导致非数值结果，最终出现NaN。

解决步骤：

• 将输入框获取的值显式转换为数值类型，用parseFloat()处理，同时通过|| 0处理空值或非数字输入的情况
• 拆分复杂公式为多个步骤，提升可读性，便于后续维护和排查

修改后的jQuery代码：

$(":input[type='text']").keyup(function(){ 
    // 转换为数值，空值或非数字输入默认设为0
    var pret_achizitie = parseFloat($('#price_achizitie').val()) || 0;
    var pret_vanzare   = parseFloat($('#price_vanzare').val()) || 0;
    var pret_transport = parseFloat($('#price_transport').val()) || 0;

    // 拆分公式步骤，降低复杂度
    var achizitie_total = pret_achizitie * 1.19;
    var transport_total = pret_transport * 1.19;
    var cost_total = achizitie_total + transport_total;
    var vanzare_tax = pret_vanzare * 0.19 / 1.19;
    var deductible_tax = (pret_achizitie + pret_transport) * 0.19;
    var tax_difference = vanzare_tax - deductible_tax;
    var profit_before_tax = pret_vanzare - cost_total - tax_difference;
    var tax_profit = profit_before_tax * 0.01;
    var profit_net = profit_before_tax - tax_profit;
                
    $('#profit').val(parseFloat(profit_net).toFixed(2));
});

额外优化建议：

• 将输入框类型改为type="number"，限制用户只能输入数字，从源头减少非数值输入的问题
• 可根据业务需求添加输入验证，比如禁止输入负数、限制小数位数等

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