文本输入总是被jQuery解析为字符串 - 如何将val检索为int或float？

Question

我正在根据两个文本输入的值进行一些计算.值可以是浮点数或整数.计算在keyup事件中触发.

所以目前我必须评估val以确定它是浮点数还是int然后使用parseInt或者parseFloat适当使用.

这似乎有点hacky或矫枉过正.有一个更好的方法吗？

这是一个小提琴演示:https://jsfiddle.net/2hw0tnhb/

HTML:

<label id="x-label" for="x">Float</label>
<br/>
<input type="text" name="x" id="x" value="29.7" class="axis"/>

<br/>
<br/>

<label id="y-label" for="y">Int</label>
<br/>
<input type="text" name="y" id="y" value="21" class="axis"/>

JS:

var $x = $('#x');
var $y = $('#y');
var $axis = $('.axis');
var x_label = $('#x-label');
var y_label = $('#y-label');

$axis.keyup(function(){

    var $this = $(this);
    var val = $this.val();
    var axis = 'x';

    if($this.attr('id') === 'y') axis = 'y';

    //check if int or float:
    if(parseFloat(val) > Math.floor(parseFloat(val))){
        //it is a float - use parseFloat()   
        if( axis === 'x' ){
           x_label.text('Float'); 
        }else{
           y_label.text('Float'); 
        }        
    }
    else{
        //it is an int - use parseInt()
        if( axis === 'x' ){
           x_label.text('Int'); 
        }else{
           y_label.text('Int'); 
        }
    }
});

Answer 1

您可以使用前导+,结果将是numeric,int或float:

var val = +$this.val(); //or +this.value

您可以使用type="number"将条目保存为.axis数字:

<input type="number" name="x" id="x" value="29.7" class="axis"/>

$(function() {
    var $x = $('#x');
    var $y = $('#y');
    var $axis = $('.axis');
    var x_label = $('#x-label');
    var y_label = $('#y-label');

    $axis.keyup(function(){

        var $this = $(this);
        var val = +$this.val();
        var axis = this.name;
        
        console.log( val );
        console.log( val + 3.5 );
        console.log( val + 4 );
    })
    .trigger('keyup');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label id="x-label" for="x">Float</label>
<br/>
<input type="number" name="x" id="x" value="29.7" class="axis"/>

<br/>
<br/>

<label id="y-label" for="y">Int</label>
<br/>
<input type="number" name="y" id="y" value="21" class="axis"/>

一元加号(+)
一元加号运算符在其操作数之前,并计算其操作数,但尝试将其转换为数字(如果尚未编号).虽然一元否定( - )也可以转换非数字,但是一元加号是将某些东西转换为数字的最快和首选方式,因为它不会对数字执行任何其他操作.它可以转换整数和浮点数的字符串表示形式,以及非字符串值true,false和null.支持十进制和十六进制("0x" - 前缀)格式的整数.支持负数(但不支持十六进制).如果它无法解析特定值,它将评估为NaN.

参考:算术运算符