NaNが表示される場合、代わりに0を表示させたい

Question

よろしくお願い致します。

Vueを使った計算フォームを実装した際、NaNが出た際は、代わりに0を表示させたいと思っておます。

▪️やりたいこと
下記のtotalの箇所にNaNが表示される場合、代わりに0を表示させる。

▪️わからないこと
・if (isNaN(num)) num = 0; などでNaNから0に変える対応を考えましたが、スクリプトの書き方がわかりません。
・totalの値を違う名前の配列（num）に格納する方法がわかりません。

下記のコードにisNaNを取り入れることで考えています。

尚、htmlのフォームに下記の値を入れるとNaNが出るのを確認しております。
A:0 B:1 C:空白

    <div id="app3">

    	 <ul>
        		<li>A<span><input v-model="value1"></span></li>
        		<li>B<span><input v-model="value2"></span></li>
        		<li>C<span><input v-model="value3"></span></li>
    	<ul>
    	<p>{{total}} </p>

    </div>

    <script>
      	var vm = new Vue({
      	  el: '#app3',
      	  data: {
      	    value1: '',
      	    value2: '',
      	    value3: ''
      	  },
      	  computed: {
      	   total: function () {
      	      return this.value1 ** this.value2 / this.value3;
    	   }
    	  }
      	})
    </script>

Answer 1

NaNの判別という観点ではyambejpさんの回答で網羅されていると思いますが、Infinityになってしまうパターンもありますね

console.log('' ** '' / '');    // -> Infinity
console.log('0' ** '0' / '0'); // -> Infinity
console.log('1' ** '2' / '');  // -> Infinity
console.log('1' ** '2' / '0'); // -> Infinity

Infinityに対応するなら、こちらがよいかと思います

total: function () {
  const answer = this.value1 ** this.value2 / this.value3;
  if(isNaN(answer)) return 0;
  if(!isFinite(answer)) return 0;
  return answer;
}

Comments

[tomato01]

ご回答を頂きましてありがとうございます。

教えて頂いたコードで思う動きができました。ありがとうございます。
また、Infinityの件も踏まえ、教えていただきありがとうございました。

自分では下記のようなコードを考え、表示上はNaNを0に置き換えることができたのですが、
そうすると計算ができなくなり困っておりました。

$(function(){
$('#app3').each(function(){
var txt = $(this).html();
$(this).html(
txt.replace(/NaN/g,'0')
);
});
});

どうもありがとうございました。

Answer 2

orで処理をしてみては？

console.log(NaN||0);

Comments

[tomato01]

ご回答を頂きありがとうございます。
orで処理とのことですが、orをどこに実装すればいいでしょうか。

totalの箇所でNaNが表示された場合に0を出したいと考えております。

宜しくお願い致します。

[yambejp]

javascriptのor処理は「||」です。

> totalの箇所でNaNが表示された場合に0

だからそれが「NaN||0」です

[tomato01]

ご回答、誠にありがとうございます。
or処理は「||」なのは理解をしたのですが、どの箇所にどのように使用すればいいかがわからない状態です。

もし、可能でしたら私が書いたコードに記載をしてもらえないでしょうか。

[thyda.eiqau]

横からすみませんが、
NaN = this.value1 ** this.value2 / this.value3;
という式と、
NaN || 0
という処理を並べて見たら、おのずとお分かりになるかと思います

[foobar810]

this.value1 ** this.value2 / this.value3 || 0;

[tomato01]

この度は、ご回答をいただきありがとうございます。
並べてみたら回答がわかりました！ありがとうございました。