如何在 JavaScript 中轻松检查变量是否为数字？答案

【问题标题】：How do you easily check whether a Variable is number or not in JavaScript?如何在 JavaScript 中轻松检查变量是否为数字？
【发布时间】：2021-11-23 13:33:46
【问题描述】：

我不是 JavaScript 开发人员，但我只想知道检查变量是否包含数字的正确方法。经过几次分析，我达到了以下解决方案。方法对吗？

function calculation(n1,n2 , ...numbers) {

  let validateNumber = (num) => {
    if(num !== num)
      return 0;
      else
    return typeof num === 'number' ? num : 0;
  }

  let sum =0;
  for(n of numbers){
    sum += validateNumber(n);
  }
  console.log(sum);
} 

calculation(5,6,7,'gg','',null, NaN, undefined,  null,8,9,5.4,10);

请检查“validateNumber”箭头功能。

【问题讨论】：

为什么要争论n1,n2？

标签： javascript numbers typeof isnan

【解决方案1】：

第一版 =>
-- 只需使用isNaN() : sum+(isNaN(val)?0:Number(val)

第二版（在此处评论中询问）=>
-- 只是使用严格的比较。只获取数值类型的值。

const calculation =(...numbers)=>  // (n1,n2 , ...numbers)=>
  numbers.reduce((sum,val)=>
    sum + (Number(val)===val ? val : 0)  // sum+(isNaN(val)?0:Number(val))
    , 0);

console.log( calculation(5,6,7,'gg','',null, NaN, undefined,  null,8,9,5.4,'10') )

为了更清楚，这里是一个表格，根据不同的可能类型显示测试的执行

const
  testFunction = val => Number(val)===val
, values =
  [ { v: 123,       display: `123`,       expected: true  }
  , { v: '123',     display: `"123"`,     expected: false }
  , { v: NaN,       display: `NaN`,       expected: false }
  , { v: undefined, display: `undefined`, expected: false }
  , { v: null,      display: `null`,      expected: false }
  ]
, tBody = document.querySelector('table > tbody')
  ;
let score = 0
  ;
for (let {v, display, expected} of values)
  {
  let
    TR  = tBody.insertRow()
  , res = testFunction(v)
    ;
  score += expected===res ? 1 : 0
  TR.insertCell().textContent = display
  TR.insertCell().textContent = expected
  TR.insertCell().textContent = res
  TR.insertCell().className   = expected===res ? 'ok' : 'bad'
  }
document.querySelector('table >tfoot td:nth-of-type(2)')
  .textContent = `${score} / ${values.length}`

table { font-family: Arial, Helvetica, sans-serif;border-collapse: collapse;margin: 0 1em; }
td    { padding: .2em .8em;border: 1px solid darkblue; } 
thead,tfoot {  background-color: #84a4ce;text-transform: capitalize; }
caption     { padding: .3em;caption-side: bottom;font-size: .8em; }
.ok:before,.bad:before { font-weight: bold;font-size: 1.2em; }
.ok:before  { color: green;content: '\2713'; }
.bad:before { color: red;  content: '\2718'; }

<table>
  <caption>( Number(val)===val ) ?</caption>
  <thead>
    <tr> <td>val</td><td>expected</td><td colspan="2">result</td> </tr>
  </thead>
  <tbody></tbody>
  <tfoot>
    <tr> <td colspan="3">score</td><td>0/0</td> </tr>
  </tfoot>
</table>

【讨论】：

@Andy 因为前面有 2 个参数 n1 和 n2
@Jojo 不要在计算部分中间，它仅用于测试目的。我正在 'validateNumber' 中寻找简单的替代条件。
@Jojo 对复杂性感到抱歉。代码 sn-p 是我学习活动的一部分。我正在研究 Rest 参数概念，所以附加参数 n1 和 n2 :) 。我对验证给定值是否为数字的替代方法表示怀疑。
@Jojo :) 我正在寻找更好的方法来验证给定值是否为数字。请坚持重点。我不喜欢使用 isNaN() 。
@Jojo 您的代码示例此时计算失败（5,6,7,'gg','',null, NaN, undefined, null,8,9,5.4,'10'） ; .它仍然产生相同的输出。请尊重我的问题。 isNaN() 导致类型转换。

【解决方案2】：

是的，JavaScript 中有一个内置函数来检查某个值是否为数字，即isNaN()

如果你想得到数组中所有数字的总和，那么你可以尝试使用reduce()，如下所示：

var data = [5,6,7,'gg','',null, NaN, undefined,  null,8,9,5.4,10];
var sum = data.reduce((a,c) =>{
  if(!isNaN(c)){
    a = a + Number(c); //convert the '' and null to 0 with Number()
  }
  
  return a;
},0);
console.log(sum)

【讨论】：

【解决方案3】：

是的，它也是一个班轮

export const isNum = n => Number(n) === Number(n);

首先解析你得到的 Eva 参数与自身的比较。其中一个 what the hell's 附带 JavaScript 是 NaN !== NaN 所以如果你在强迫它成为一个数字后得到的值变成一个 Nan 它将与它本身不同

【讨论】：

在这种情况下，您需要做的就是用我的 isNum 更改它 validateNumber func
总是true，你的意思是const isNum = n => Number(n) === n;

【解决方案4】：

您可以filter 找出不是数字的元素，方法是检查它们是否不是null 也是一个数字，然后使用reduce 对元素求和。

function calculation(n1, n2, ...elements) {
  
  return elements

    // `filter` out the elements that are numbers
    .filter(el => el && Number(el))

    // Add them all up
    .reduce((acc, c) => acc + c, 0);
}

console.log(calculation(5,6,7,'gg','',null, NaN, undefined,  null,8,9,5.4,10));

【讨论】：