javascript - 当值未定义或延迟响应该值时如何避免 toFixed

Question

我在控制台中看到此错误：

isNaN(...).toFixed 不是函数

这是我用 Vue.js 编写的一些 HTML 代码：

<v-flex xs3 class="text-lg-right" 
    v-for="(mrp, index) in [medicine.orderedMedView.combinations[combinationIndex]]" :key="index">
    <div class="primary-header-font">
        &#8377; {{ isNaN((mrp && (mrp.totalPrice - (mrp.totalPrice * (medicine.discountPercentage / 100))))).toFixed(2) ?
        0 :  
        (( mrp && mrp.totalPrice - (mrp.totalPrice * (medicine.discountPercentage / 100)))).toFixed(2) || 0 }} &nbsp;
    </div>
    <span v-if="mrp && mrp.totalPrice != NaN" class="secondary-header-font">
        {{ medicine.discountPercentage }}% 
    </span>
    <span v-if="mrp && mrp.totalPrice != NaN" class="secondary-header-font strike-through">
        &#8377; {{ mrp && mrp.totalPrice && (mrp.totalPrice).toFixed(2) || 0 }} &nbsp;
    </span>
</v-flex>

我猜在我使用它的药物状态下，反应会延迟......所以也许这就是它说“不是功能”的原因。我怎样才能解决这个问题？

Answer 1

isNaN是一个检查提供的值是否为数字的函数。它的返回值为trueor false。因此，不能toFixed对 isNaN 的返回值使用该函数。

尝试重新排列括号，以便toFixed将在数字之后。

Answer 2

在 vue 中，您更愿意为此类语句使用方法。

toFixed(2)我想这是你错过第一个三元表达式的一个原因。

因此，在该方法中，您可以想象以下内容：

price(mrp) {
   let price = mrp && (mrp.totalPrice - (mrp.totalPrice * (this.medicine.discountPercentage / 100));
   return isNaN(price) ? 0 : price;
}

在你的模板中：

<v-flex xs3 class="text-lg-right" 
    v-for="(mrp, index) in [medicine.orderedMedView.combinations[combinationIndex]]" :key="index">
    <div class="primary-header-font">
        &#8377; {{ price(mrp) }} &nbsp;
    </div>
    <span v-if="mrp && mrp.totalPrice != NaN" class="secondary-header-font">
        {{ medicine.discountPercentage }}% 
    </span>
    <span v-if="mrp && mrp.totalPrice != NaN" class="secondary-header-font strike-through">
        &#8377; {{ mrp && mrp.totalPrice && (mrp.totalPrice).toFixed(2) || 0 }} &nbsp;
    </span>
</v-flex>

如果您想避免一些检查，您可以始终使用v-if="medicine"on ，v-flex因此在填充药物之前不会计算任何值。

Answer 3

isNaN在执行 toFixed 之前检查变量。像下面的示例片段

var a=10.898978
console.log(!isNaN(a)?a.toFixed(2):0)