val() 如何返回数字？答案

【问题标题】：How can val() return Number?val() 如何返回数字？
【发布时间】：2012-02-10 11:45:04
【问题描述】：

在valdocs写了这样的说明：

.val() 返回：字符串、数字、数组

我试图获取Number，但它似乎只返回string，我做错了什么吗？

$('#gdoron').val('1');

alert($('#gdoron').val() === '1'); // true 
alert(typeof $('#gdoron').val());  // string.

$('#gdoron').val(1);

alert($('#gdoron').val() === 1);  // false
alert(typeof $('#gdoron').val()); // string (not "number"!)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="gdoron" />

我的问题是：val() 如何像文档中所说的那样返回数字？问题不在于如何解析字符串。

【问题讨论】：

已经提出了一个新的类似问题，但这个问题没有答案：使用valHooks。这个答案可能应该在这里，但这是一个非常古老的问题，所以在那里回答...stackoverflow.com/a/70143214/2181514

标签： javascript jquery string numbers

【解决方案1】：

文本输入的value 属性将始终返回一个字符串。你需要parseInt这个值才能得到一个整数：

parseInt($('#myInput').val(), 10);

【讨论】：

我知道，我问的是val 如何像文档所说的那样返回数字，而不是如何解析字符串。
在$ 之前使用一元运算符-、+ 和~ 也会返回一个数字。 +$('#gdoron').val();

【解决方案2】：

一些 HTML5 元素，例如进展；

console.log(typeof $("#prog").val()); // number

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress value="50" max="100" id="prog"></progress>

【讨论】：

另见HTML5 draft（返回值为double）。
@gdoron：它说：[...] 表单元素例如 input、select 和 textarea [...]。现在，我的母语不是英语，但在我看来，这并不是一份详尽的清单。
有些奇怪：alert($("#prog").val() === 50);//false 和 alert($("#prog").val() === '50'); //false。 怎么做？

【解决方案3】：

我已经快速浏览了一下，我想我有一个答案。如果您查看val function 的实现，您会发现如果有一个所谓的 val-hook，如果 val-hook 返回一个数字，那么该数字将按原样从 val 函数返回。我发现this discussion 这表明 val-hooks 主要由插件使用来创建自定义控件，例如滑块等，其中val 的“自然”返回值可能是一个整数。希望这对您的问题有所帮助。

【讨论】：

它看起来默认返回一个数字。 $("<progress value='50' max='100'>").get(0).value === 50.
第一个链接坏了。

【解决方案4】：

嗯。对于控制台中的所有这些，jQuery $($0).val() 和 Javascript 的 $0.value 返回字符串“3”：

<input type='number' value='3'/>
<input type='text' value='3'/>
<input type='radio' value='3'/>
<input type='checkbox' value='3'/>

所以我认为the jQuery val() documentation 可能更清楚。我看不出它会如何返回一个数值，所以我建议使用parseInt($($0).val()) 或parseFloat($($0).val())。

【讨论】：

【解决方案5】：

您可以简单地创建一个 jquery 插件来代替 val() 来使用它。在这里，我创建了函数 nval() 以在获取元素值时使用而不是 val()。

$.fn.nval = function() {
   return Number(this.val())
};

然后在您的代码中，只需使用以下内容将值作为数字获取

$('#elementID').nval()

【讨论】：

虽然正确，但它不能回答（非常古老的）问题。
当然是这样，但它提供了一种安全的方法。如果您真的想这样做，只需使用覆盖 val() 的插件，例如 $.fn._val = jq.fn.val; $.fn.val = function(value) { if ( !arguments.length ) { var v = this._val(); if(!isNaN(+v)) { 返回数字(v); } 返回 v; } else { 返回 this._val(value); } };
老兄，问题不在于如何解决问题，而只是试图了解 jQuery 本身如何返回Number 如文档所述。您可以看到接受的答案显示了他们为什么写它，<progress> 例如返回一个Number natively！。