JavaScript/jQuery中将字符串转换为数字

Question

一直在尝试将以下内容转换为数字：

<button class="btn btn-large btn-info" data-votevalue="1">
    <strong>1</strong>
</button>

var votevalue = parseInt($(this).data('votevalue'));

我也尝试过使用Number()，但是在检查结果时仍然得到了NaN。 我做错了什么？

以下是完整代码：

<div class="span7" id="button-group">
    <div class="btn-group">
        <button class="btn btn-large btn-info" data-votevalue="1"><strong>1</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="2"><strong>2</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="3"><strong>3</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="4"><strong>4</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="5"><strong>5</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="6"><strong>6</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="7"><strong>7</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="8"><strong>8</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="9"><strong>9</strong></button>
        <button class="btn btn-large btn-info" data-votevalue="10"><strong>10</strong></button>
    </div>
</div>

$('#button-group button').each(function() {
    $(this).click(function() {
        $(this).addClass('active');
        var votevalue = parseInt($(this).data('votevalue'));
        var filename = $('.mainimage').data('filename');
        var votes = parseInt($('.mainimage').data('numvotes'));
        var totalscore = parseInt($('.mainimage').data('totalscore'));
        $.ajax({
            type: 'POST',
            url: 'index.php/?category=vote',
            data: {
                "votevalue": votevalue,
                "filename": filename
            },
            success: function() {
                votes++;
                alert(votes);
                var average = ((totalscore + votevalue) / votes);
                $('#vote-incremenet').html(votes);
                $('#display-average').html(average);
                $('#display-average').show();
                $('#button-group button').each(function(){
                    $(this).unbind('click');
                });
            }
        }); // end ajax
    }); // end click
}); // end each

- user1683645

---

在这个上下文中，“this”是指什么？ - Christofer Eliasson

你所拥有的应该可以正常工作，因此我只能假设 this 没有引用到你期望的对象。另外，不要忘记在 parseInt 中加入基数参数！ - James Allardice

你想要 data-votevalue 属性的值还是 <strong></strong> 标签内的文本？ - pythonian29033

Answer 1

似乎您的代码中的this并没有引用到您的.btn元素。请尝试使用选择器显式地引用它：

var votevalue = parseInt($(".btn").data('votevalue'), 10);

另外，不要忘记基数。

- Rory McCrossan

---

当我不尝试解析变量时，我得到了正确的字符串。因此，这个引用指向正确的对象。我在原始帖子中发布了完整的代码。也许你可以看一下。 - user1683645

问题必须在您的代码其他地方，因为 parseInt(votevalue) 部分运行良好：http://jsfiddle.net/fVJRL/ - Rory McCrossan

Answer 2

您可以使用parseInt(string, radix)将字符串转换为整数，代码如下所示。

var votevalue = parseInt($('button').data('votevalue'));
​

演示

- Anton

---

无法信任parseInt()，尝试解析"1,633"返回结果为"1"。 - PauAI

使用parseFloat将字符串转换为浮点数。 - bandito40

使用parseFloat将字符串转换为浮点数。 - bandito40

Answer 3

尽管这是一篇旧文章，但我认为一个简单的函数可以使代码更易读，并符合jQuery链式编程风格：

String.prototype.toNum = function(){
    return parseInt(this, 10);
}

可以与jQuery一起使用：

var padding_top = $('#some_div').css('padding-top'); //string: "10px"
var padding_top = $('#some_div').css('padding-top').toNum(); //number: 10`

或使用任何String对象：

"123".toNum(); //123 (number)`

- Shahar

---

我认为你的答案非常好，是唯一的好解决方案。parseInt或parseFloat在值为空“”时无法正常工作，仍然会得到NaN。但是，我使用了你的解决方案并添加了if(!$.isNumeric(this)){ this =0; }，解决了所有问题。 - ronrun

Answer 4

针对您的情况，请使用以下内容：

var votevalue = +$(this).data('votevalue');

有一些方法可以在javascript中将字符串转换为数字。

最佳方式：

var str = "1";
var num = +str; //simple enough and work with both int and float

您还可以：

var str = "1";
var num = Number(str); //without new. work with both int and float

或者

var str = "1";
var num = parseInt(str,10); //for integer number
var num = parseFloat(str); //for float number

不要:

var str = "1";
var num = new Number(str);  //num will be an object. typeof num == 'object'

仅在特定情况下使用parseInt，例如：

var str = "ff";
var num = parseInt(str,16); //255

var str = "0xff";
var num = parseInt(str); //255

- cuixiping

Answer 5

您只需要在$(this)之前使用"+"。这将把字符串转换为数字，所以：

var votevalue = +$(this).data('votevalue');

哦，我建议使用closest()方法，以防万一 :)

var votevalue = +$(this).closest('.btn-group').data('votevalue');

- expoz

---

欢迎 @expoz - 请注意在编辑器中使用 {} 格式化代码段，或在代码行前面使用 4 个空格。此外，您还可以使用单引号 来标记代码或包命令，例如closest()`。 - micstr

我非常确定这只是对JavaScript类型管理不佳的一种利用。这似乎不是一个好主意。 - JackHasaKeyboard

Answer 6

定义一个变量string值为123 (是字符串类型),

parseInt(参数为字符串);

var string = '123';

var int= parseInt(string );

console.log(int);  //Output will be 123.

- YoJey Thilipan

---

请在您的回答中添加细节。 - Muhammad

与这个答案完全相同 https://dev59.com/rmcs5IYBdhLWcg3wdjrR#12839661，以及为此事的这个答案 https://dev59.com/rmcs5IYBdhLWcg3wdjrR#12839623。 - Heretic Monkey

Answer 7

似乎您所指的this与您想的不同。请问您是在什么上下文中使用它？ this关键字通常只在事件处理程序的回调函数、循环一组元素或类似情况中使用。在这种情况下，它指的是特定的DOM元素，并且可以像您所做的那样使用。

如果您只想访问该特定按钮（在任何回调或循环之外）并且没有其他使用btn-info类的元素，您可以进行如下操作：

parseInt($(".btn-info").data('votevalue'), 10);

您也可以为元素分配一个ID，并使用该ID进行选择，这可能是更安全的方式，如果您想确保只有一个元素与您的选择器匹配。

- Christofer Eliasson

Answer 8

您可以在字符串前添加+，而无需使用parseInt和parseFloat和基数，简单易行。

示例：

var votevalue = +$('button').data('votevalue');

alert(typeof(votevalue));

- Gandom

Answer 9

var votevalue = $.map($(this).data('votevalue'), Number);

var votevalue = $.map($(this).data('votevalue'), Number);

- Ares

---

建议您在回答中提供更多上下文。请查看如何回答的指南：https://stackoverflow.com/help/how-to-answer - Enkode