[译]在Javascript中将string转化成numbers

本文翻译youtube上的up主kudvenkat的javascript tutorial播放单

源地址在此:

https://www.youtube.com/watch?v=PMsVM7rjupU&list=PL6n9fhu94yhUA99nOsJkKXBqokT3MBK0b

本次视频我们会讨论在Javascript中将string转化成numbers的各种不同方法.

以下的例子允许用户输入两个数字并且相加.同时我们会学到以下函数

1.parseInt()

2.parseFloat()

3.isNan()

以下是网页表格的HTML代码

[table style="border:1px solid black; font-family:Arial"]
    [tr]
        [td]First Number[/td]
        [td][asp:TextBox ID="txtFirstNumber" runat="server"][/asp:TextBox][/td]
    [/tr]
    [tr]
        [td]Second Number[/td]
        [td][asp:TextBox ID="txtSecondNumber" runat="server"][/asp:TextBox][/td]
    [/tr]
    [tr]
        [td]Result[/td]
        [td][asp:TextBox ID="txtResult" runat="server"][/asp:TextBox][/td]
    [/tr]
    [tr]
        [td]
        [/td]
        [td]
            [input type="button" value="Add" id="btnAdd"/]
        [/td]
    [/tr]
[/table]

在网页表格的head部分添加以下Javascript

[script type="text/javascript"]
    function addNumbers() 
    {
        var firstNumber = document.getElementById("txtFirstNumber").value;
        var secondNumber = document.getElementById("txtSecondNumber").value;
        document.getElementById("txtResult").value = firstNumber + secondNumber;
    }
[/script]

设置Add按钮的onclick属性以便呼出addNumbers()函数.按钮的HTML代码如下

[input type="button" value="Add" id="btnAdd" onclick="addNumbers()" /]

运行程序并且输入20和10作为两个相加的数字.点击Add按钮.此时注意到Javascript并没有相加两个数,而是把两个数作为string直接合并在一起.这是因为textbox的value属性是吧输入的数字作为string格式考虑的

所以明显我们需要先做一个转换.这种情况下parseInt()函数就很有用了.如下调整addNumbers()函数

function addNumbers() 
{
    var firstNumber = parseInt(document.getElementById("txtFirstNumber").value);
    var secondNumber = parseInt(document.getElementById("txtSecondNumber").value);
    document.getElementById("txtResult").value = firstNumber + secondNumber;
}

运行程序并且测试,这时我们应该如预期般得到30作为结果了

我们现在做另外一个测试,输入20.5和10.3作为两个相加的数字.点击Add按钮,注意到结果显示小数点的部分被忽略掉了.

为了保持小数点的部分,我们要用parseFloat()函数

function addNumbers() 
{
    var firstNumber = parseFloat(document.getElementById("txtFirstNumber").value);
    var secondNumber = parseFloat(document.getElementById("txtSecondNumber").value);
    document.getElementById("txtResult").value = firstNumber + secondNumber;
}

如果你缺省两个数字,或者输入不是数字的string,那么当你点击Add按钮后,结果textbox会显示NaN,

NaN在Javascript中表示Not-a-Number.在Javascript中我们用isNaN()函数来确定一个值是不是一个合法的数字.如果是一个数字的话,这个函数会返回true,反之则返回false.

如下继续调整addNumbers()函数

function addNumbers() 
{
    var firstNumber = parseFloat(document.getElementById("txtFirstNumber").value);
    if (isNaN(firstNumber)) 
    {
        alert("Please enter a valid number in the first number textbox");
        return; 
    }
    var secondNumber = parseFloat(document.getElementById("txtSecondNumber").value);
    if (isNaN(secondNumber)) 
    {
        alert("Please enter a valid number in the second number textbox");
        return;
    }
    document.getElementById("txtResult").value = firstNumber + secondNumber;
}

现在当你缺省两个数字,或者输入不是数字的string的话,点击Add按钮后,相对应的错误信息会弹出

我们可以改进一下验证错误的信息,以便更加清晰:

如果第一个数字和第二个数字缺省,我们希望显示以下的错误验证信息

a)第一个数字为必填

b)第二个数字为必填

如果你输入的是string而不是number的话

a)请在第一个数字textbox里填入合法数字

b)请在第二个数字textbox里填入合法数字