如果结果为 NaN 或 0，则使用 jQuery 使结果为 0

Question

使用此代码，用户可能会在“数字”表单字段中输入 0 或根本不输入任何内容。 是否有“全部捕获”，如果用户这样做，NaN 或产生的 0.0000% 会被 0 替换吗？ 我认为这需要两种逻辑（？）一种用于 NaN 替换，另一种用于更改 .appendTo 结果，使其仅显示 0 而不是 0.00000%

这是一个 JSFiddle - http://jsfiddle.net/sturobson/xTEKm/39/

这是 jquery -

$(document).ready(function() {

$(function(){
$("#result").submit(function(e) {
    e.preventDefault();

    var ele = $("#element").val(),
        target = $("#target").val(),
        context = $("#context").val(),
        border = $("#border").val(),
        margin = $("#margin").val(),
        padding = $("#padding").val();

    console.log(ele, target, context, border, margin, padding);

    var DoubleMargin = parseInt(margin, 10) * 2;
    var DoublePadding = parseInt(padding, 10) * 2;
    var DoubleBorder = parseInt(border, 10) * 2;


    var ActualTarget = parseInt(target, 10) - parseInt(DoubleBorder, 10) - parseInt(DoubleMargin, 10) - parseInt(DoublePadding, 10) * 1;
    var result3 = parseInt(target, 10) - parseInt(DoubleMargin, 10) * 1;
    var MarginResult = ((parseInt(margin, 10) / parseInt(target, 10)) * 100).toFixed(5);
    var PaddingResult = ((parseInt(padding, 10) / parseInt(target, 10)) * 100).toFixed(5);
    var OriginalResult = ((parseInt(ActualTarget, 10) / parseInt(context, 10)) * 100).toFixed(5);


    var BorderResult = parseInt(target, 10) - parseInt(border, 10) * 1;


    //$(".result").append(ele + " " + result + "%");
    $("<p></p>", {
        html: ele + " {<br><span>width: " + OriginalResult + "%;" + " /* " + ActualTarget + " (originally " + target + ") / " + context + " */ " + "<br>border: " + border + "px; " + "<br>margin: " + MarginResult + "%; " + "<br>padding: " + PaddingResult+ "%;" + "<br> </span>}"
    }).hide().appendTo("#code-results").fadeIn();
});

}); 

});

有什么想法吗？​

Answer 1

NaN 是“假的”，所以任何时候你有一个带有数字的变量并且你想用0 代替NaN，你可以使用||：

foo = foo || 0;

这是因为JavaScript's curiously-powerful || operator。因此，只需将其应用于您希望以这种方式处理的代码中的任何值。您通常可以在最后进行，因为任何涉及NaN 的数值计算都会产生NaN，因此它可以通过计算很好地传播。

就显示0 而不是0.00000% 而言，您说得对，您只需要添加一些逻辑即可。我不太确定您想在代码中的哪个位置执行此操作，但逻辑并不复杂，例如使用if:

if (variable === 0) {
    // Just show 0
}
else {
    // Show the full thing
}

...或内联三元运算符：

"text " + (variable === 0 ? "0" : (variable + "%")) + " more text"

Answer 2

在 getter 处转换一次：

var ele = $("#element").val(),
    target = (isNaN(target = parseInt($("#target").val(), 10)) ? 0 : target),
    context = (isNaN(context = parseInt($("#context").val(), 10)) ? 0 : context),
    border = (isNaN(border = parseInt($("#border").val(), 10)) ? 0 : border),
    margin = (isNaN(margin = parseInt($("#margin").val(), 10)) ? 0 : margin),
    padding = (isNaN(padding = parseInt($("#padding").val(), 10)) ? 0 : padding);

另请参阅您的updated example。

=== 更新 ===

使用toFixed(x)，您将得到精确的x 小数。如果你想达到最大x 小数，你可以使用以下函数：

function round(fValue, iDecimals) {
    var iPow = Math.pow(10, iDecimals);
    return Math.round(fValue * iPow) / iPow;
}

另请参阅您的updated example。

=== 更新 ===

下一个问题是，fraction 的分母必须是非零值。如果分母为零，您可以添加一个除法函数，该函数返回零而不是 NaN：

function div(fNumerator, fDenominator) {
    return (fDenominator == 0 ? 0 : fNumerator / fDenominator);
}

另请参阅您的updated example。

=== 更新 ===

如果您希望代码更小，可以将其与 T.J. 结合使用。克劳德回答；源代码可以是：

function round(fValue, iDecimals) {
    var iPow = Math.pow(10, iDecimals);
    return Math.round(fValue * iPow) / iPow;
}

function div(fNumerator, fDenominator) {
    return (fDenominator == 0 ? 0 : fNumerator / fDenominator);
}

$(document).ready(function() {

    $(function(){
        $("#result").submit(function(e) {
            e.preventDefault();

            var ele = $("#element").val(),
                target = parseInt($("#target").val(), 10) || 0,
                context = parseInt($("#context").val(), 10) || 0,
                border = parseInt($("#border").val(), 10) || 0,
                margin = parseInt($("#margin").val(), 10) || 0,
                padding = parseInt($("#padding").val(), 10) || 0;

            console.log(ele, target, context, border, margin, padding);

            var DoubleMargin = margin * 2;
            var DoublePadding = padding * 2;
            var DoubleBorder = border * 2;


            var ActualTarget = target - DoubleBorder - DoubleMargin - DoublePadding * 1;
            var result3 = target - DoubleMargin * 1;
            var MarginResult = round(div(margin, target) * 100, 5);
            var PaddingResult = round(div(padding, target) * 100, 5);
            var OriginalResult = round(div(ActualTarget, context) * 100, 5);


            var BorderResult = target - border * 1;


            //$(".result").append(ele + " " + result + "%");
            $("<p></p>", {
                html: ele + " {<br><span>width: " + OriginalResult + "%;" + " /* " + ActualTarget + " (originally " + target + ") / " + context + " */ " + "<br>border: " + border + "px; " + "<br>margin: " + MarginResult + "%; " + "<br>padding: " + PaddingResult+ "%;" + "<br> </span>}"
            }).hide().appendTo("#code-results").fadeIn();
        });

    });

});

另请参阅您的updated example。