JavaScript验证输入的string的内容是不是数值

来源:互联网 发布:山本宽来中国 知乎 编辑:程序博客网 时间:2024/06/05 10:04

JavaScript验证输入的string的内容是不是数值

  • JavaScript验证输入的string的内容是不是数值
    • JavaScript里面对Number的支持
    • 考虑直接使用第三方库
    • 使用Regrex验证

JavaScript里面对Number的支持

Number是JavaScript的一个内置的对象,有很多method可以直接使用。在使用JavaScript验证一个值是不是数值的问题中,我们可能用到的两个method是:

  1. Number.parseInt()
  2. Number.parseFloat()

以下是这两个method的几个简单的用法:

// example from https://www.bennadel.com/blog/2012-exploring-javascript-s-parseint-and-parsefloat-functions.htm// parseIntNumber.parseInt( "123" ); //123Number.parseInt( "123.456" ); //123Number.parseInt( "+123.456" ); //123Number.parseInt( "-123.456" ); //-123Number.parseInt( "123ABC" ); //123Number.parseInt( "ABC" ); //NaNNumber.parseInt( "5px 5px" ); //5Number.parseInt( "(123)" ); //NaNNumber.parseInt( "0xF" ); //15Number.parseInt( "012" ); //10Number.parseInt( " 123 " ); //123// parseFloatNumber.parseFloat( "123" ); //123Number.parseFloat( "123.456" ); //123.456Number.parseFloat( "+123.456" ); //123.456Number.parseFloat( "-123.456" ); //-123.456Number.parseFloat( "123ABC" ); //123Number.parseFloat( "ABC" ); //NaNNumber.parseFloat( "5px 5px" ); //5Number.parseFloat( "(123)" ); //NaNNumber.parseFloat( "0xF" ); //0Number.parseFloat( "012" ); //12Number.parseFloat( " 123 " ); //123

从上面的例子可以看到,Number.parseInt()和Number.parseFloat()虽然可以把string转化成对就的数值,但是这个转化过程不是exactly的转化,所以如果我们在验证中使用会造成很大的迷惑。

考虑直接使用第三方库

函数式编程的流行,促使了很多优秀的第三方工具库的出现,这些大大地减少了我们在开发中的工作量,也一定程度上提高了我们代码的质量。在JavaScript中,我列举两个:

  1. Lodash
  2. Ramda

在Ramda中只有R.is来判断类型,没有想要的函数。

在lodash中有_.parseInt,使用与Number.parseInt基本相同。其中的_.isNumber也不能满足需求。

使用Regrex验证

最终,还是使用了Regrex解决了业务需求。以下是最后的Regrex:

/^0$|^[+-]?[1-9]\d*(\.\d+)?$/

/^0$|^[+-]?[1-9]\d*(\.\d+)?$/.test("2"); //true/^0$|^[+-]?[1-9]\d*(\.\d+)?$/.test("+2"); //true/^0$|^[+-]?[1-9]\d*(\.\d+)?$/.test("-2"); //true/^0$|^[+-]?[1-9]\d*(\.\d+)?$/.test("2.1"); //true/^0$|^[+-]?[1-9]\d*(\.\d+)?$/.test("+2.1"); //true/^0$|^[+-]?[1-9]\d*(\.\d+)?$/.test("-2.1"); //true/^0$|^[+-]?[1-9]\d*(\.\d+)?$/.test("abc"); //false