javascript - 为什么我的数字 .val() 会变成字符串？

Question

我正在尝试为自己构建一个金融计算器，一切似乎都正常(控制台中没有错误)，除了它正在提取所有 .val() 数据并转换为字符串。我认为 .val() 将值提取为输入中表示的原语？如何将数据转换为整数？ (哦，不要担心我仍在努力的日期。

var financeCalc = function(e) {
    e.preventDefault();

//find date 
    var dateData = new Date();
    var month = dateData.getMonth()+1;
    var year = dateData.getFullYear();
    var date = year + "-" + month;
    var endDate = $('.endDate').val();
    var monthsLeft = endDate - date;

//monthly expenses
    var rent = $('.rent').val();
    var cable = $('.cable').val();
    var gas = $('.gas').val();
    var costcoBill = $('.costco').val();
    var kingSupersBill = $('.supers').val();

//CREDIT CARDS
    //wells fargo
    var wfCredit = 6000.00;
    var wfSpent = $('.wfSpent').val();

    //citi
    var citiCredit = 1000.00;
    var citiSpent = $('.citiSpent').val();

    //american express
    var amexCredit = 2000.00;
    var amexSpent = $('.amexSpent').val();

    //trek
    var trekCredit = 4000.00;
    var trekSpent = $('.trekSpent').val();

    //capital one buypower
    var buyPowerCredit = 2500.00;
    var buyPowerSpent = $('.buyPowerSpent').val();

    //chase freedom
    var chaseFreedomCredit = 2000.00;
    var chaseFreedomSpent = $('.chaseFreedomSpent').val();

    //discover
    var discoverCredit = 2500.00;
    var discoverSpent = $('.discoverSpent').val();

    //amazon
    var amazonCredit = 2500.00;
    var amazonSpent = $('.amazonSpent').val();

    //tuition
    var springTuition = $('.springTuition').val();
    var summerTuition = $('.summerTuition').val();

    //other expenses
    var otherExpenses = $('.otherExpenses').val();
    var emergencyExpenses = $('.emergencyExpenses').val();

//MONEY BROUGHT IN
    var madePay = $('.madePay').val();
    var otherIncome = $('.otherIncome').val();



//money available
    var savingsTotal = $('.wfTotal').val();
    var wfAvail = wfCredit - wfSpent;
    var buyPowerAvail = buyPowerCredit - buyPowerSpent;
    var citiAvail = citiCredit - citiSpent;
    var chaseFreedomAvail = chaseFreedomCredit - chaseFreedomSpent;
    var discoverAvail = discoverCredit - discoverSpent;
    var amazonAvail = amazonCredit - amazonSpent;




//CALCULATOR
    //credit owed
    var creditDue = wfSpent + citiSpent + trekSpent + buyPowerSpent + chaseFreedomSpent + discoverSpent + amazonSpent;
    console.log("Credit Due: " + creditDue);

    //total available
    var totalAvail = savingsTotal + wfAvail + buyPowerAvail + citiAvail + chaseFreedomAvail + discoverAvail + amazonAvail;
    console.log("Total Available: " + totalAvail);  

    //total due
    //var totalDue = (rent*monthsLeft) + (cable*monthsLeft) + (gas*monthsLeft) + (costcoBill*monthsLeft) + (kingSupersBill*monthsLeft) + springTuition + summerTuition + otherExpenses + emergencyExpenses;
    var totalDue = rent + cable + gas + costcoBill + kingSupersBill + springTuition + summerTuition + otherExpenses + emergencyExpenses;
    console.log("Total Due: " + totalDue);

    //total
    var total = totalAvail - totalDue;
    console.log("Total: " + totalDue);

    $('.totals__creditDue').html("Credit Due: " + creditDue);
    $('.totals__totalAvail').html("Total Available: " + totalAvail);
    $('.totals__totalDue').html("Total Due: " + totalDue);
    $('.totals__total').html("Total: " + total);

};

$(function(){
    $('.calculate').on('click', financeCalc);
});

Answer 1

...it's pulling all the .val() data and converting to strings. I thought .val() pulls the value as the primitive that is represented in the input? How do I convert the data to integers?

文本框值始终是文本。如果您希望它们是数字，则需要使用 parseInt 或 parseFloat 来解析它们。

jQuery.val() 实际上是提取输入中表示的“原语”，但是输入始终是文本，因此您得到一个 string。

var rent = parseInt($('.rent').val());

或

var rent = parseFloat($('.rent').val());

...会将 string 转换为 javascript number。

由于您要处理货币值，您可能会想使用 parseFloat。但是，当您使用 parseFloated 数字进行数学运算时，您可能会遇到一些奇怪的值。可能想看看这个以帮助您四舍五入到小数点后两位:

https://stackoverflow.com/a/1726662/304832