在javascript / jQuery中将字符串转换为数字


70

一直试图将以下内容转换为数字:

<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

this在此上下文中指的是什么?
Christofer Eliasson,2012年

2
您所拥有的将可以正常工作,因此我只能假设这this并不代表您所期望的。另外,不要忘记parseInt!的基数参数。
James Allardice

1
您想要data-votevalue属性的值还是<strong> </ strong>标记内的文本?
pythonian29033

Answers:


94

听起来this您的代码中没有引用您的.btn元素。尝试使用选择器显式引用它:

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

另外,不要忘记基数。


当我不尝试解析变量时,我得到正确的字符串。因此,这是对正确对象的参照。我在原始帖子中发布了完整的代码。也许你可以看看。
user1683645 2012年

然后,问题必须出在代码的其他地方,因为该parseInt(votevalue)部分工作正常:jsfiddle.net/fVJRL
Rory McCrossan 2012年

52

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

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

演示


无法信任parseInt()尝试使用“ 1,633”,则返回“ 1”。
PauAI

32

尽管这是一篇老文章,但我认为一个简单的函数可以使代码更具可读性,并保持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)`

10

对于您的情况,只需使用:

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

8

您应该在之前仅使用“ +” $(this)。它将把字符串转换成数字,所以:

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

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

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

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

我敢肯定,这只是对JavaScript不良类型管理的一种利用。这似乎不是一个好主意。
JackHasaKeyboard

5

这听起来像 this是在指您想不到的东西。您在什么情况下使用它?

this关键字通常只有一个事件处理的回调函数中使用,当你遍历一组元素,或类似的。在这种情况下,它指的是特定的DOM元素,可以按照您的方式使用。

如果您只想访问该特定按钮(在任何回调或循环之外),并且没有任何其他使用btn-info该类的元素,则可以执行以下操作:

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

如果您要确保只有一个元素与您的选择器匹配,则还可以为该元素分配一个ID,然后使用它进行选择,这可能是一种更安全的方法。


4

您可以+在字符串之前添加一个前缀,而无需使用parseInt和parseFloat和基数,只需

样品:

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

alert(typeof(votevalue));


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.