[JavaScript] 數字與數字的方法

[JavaScript] 數字與數字的方法

JavaScript數字

JavaScript的數字只有一種型態。

數字可以有小數點也可以不用。

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>

        var x = 34.00;    // 小數點
        var y = 34;       // 整數
        document.getElementById("demo").innerHTML = x + "<br>" + y;

    </script>
</body>
</html>

var x = 34.00 定義有小數點。

var y = 34 定義為整數。

x + "<br>" + y 顯示x的值,並換行(<br>)顯示y的值,x與y的值不管整數或有小數點都會顯示為整數。

 

用科學符號顯示數字:

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>

        var x = 123e5;    // 12300000
        var y = 123e-5;   // 0.00123

        document.getElementById("demo").innerHTML = x + "<br>" + y;

    </script>
</body>
</html>

 

數字的整數最多可以到15位數:

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>

        var x = 999999999999999;   // 999999999999999
        var y = 9999999999999999;  // 10000000000000000

        document.getElementById("demo").innerHTML = x + "<br>" + y;

    </script>
</body>
</html>

 

小數點最多可以到17位,不過小數點的運算並不是百分之百的正確。

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>

        var x = 0.2 + 0.1;

        document.getElementById("demo").innerHTML = x;

    </script>
</body>
</html>

小數點0.2+0.1為0.30000000000000004,並不是準確的0.3。

 

可以用乘法與除法,來解決上面的問題:

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>

        var x = (0.2 * 10 + 0.1 * 10) / 10;

        document.getElementById("demo").innerHTML = x;

    </script>
</body>
</html>

 

十六進位

如果數字常量前面有0x,則JavaScript將其解釋為十六進制。

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>

        var x = 0xFF;

        document.getElementById("demo").innerHTML = x;

    </script>
</body>
</html>

 

預設情況下,Javascript數字為十進位制。

可以用toString( )方法顯示數字的16進位、8進位、2進位。

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>

        var myNumber = 128;

        document.getElementById("demo").innerHTML = 
        myNumber.toString(16) + "<br>"
        + myNumber.toString(8) + "<br>"
        + myNumber.toString(2);

    </script>
</body>
</html>

 

Infinity

當Javscript的數字運算超過最大值時,會返回值Infinity(或-Infinity)。

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>

        var myNumber = 2;
        var txt = "";
        while(myNumber!=Infinity)
        {
            myNumber = myNumber * myNumber;
            txt = txt + myNumber + "<br>";
        }

        document.getElementById("demo").innerHTML = txt;

    </script>
</body>
</html>

var myNumber = 2 定義變數為數字2。

while(myNumber!=Infinity) 執行while迴圈,一直到數字大於最大值(Infinity)。

myNumber = myNumber * myNumber 數字相乘。

txt = txt + myNumber + "<br>" 將數字放進變數txt,並顯示於畫面上。

 

將數字除以0,也會顯示Infinity:

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>

        var x = 2/0;
        var y = -2/0;

        document.getElementById("demo").innerHTML = x+"<br>"+y;

    </script>
</body>
</html>

2/0時顯示Infinity,-2/0時顯示-Infinity。

 

雖然數字超過最大值時會顯示Infinity,不過Infinity仍然是Number的型態:

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>

        var x = 2/0;

        document.getElementById("demo").innerHTML = x+"為"+ typeof x;

    </script>
</body>
</html>

var x = 2/0 為Infinity。

typeof x 表示x的型態。

 

不是數字時的顯示:NaN

NaN為英文Not A Number的縮寫。

當數字為不合理的是數字時,JavaScript會顯示NAN來表示。

如下用一個不是數字的值來做運算,便會顯示NAN:

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>

        var x = 2/"字串";

        document.getElementById("demo").innerHTML = x;

    </script>
</body>
</html>

var x = 2/"字串" 用字串做運算,x的值為NAN。

 

用字串" "包覆數字來做運算:

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>

        var x = 2/"10";

        document.getElementById("demo").innerHTML = x;

    </script>
</body>
</html>

var x = 2/"10" 在運算時,"10"會被轉換成數字10,x的值為2/10=0.2。

 

可以用JavaScript的內建function;isNaN( )來判斷值是否不為數字(is Not A Number):

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>

        var x = 2/"字串";

        document.getElementById("demo").innerHTML = isNaN(x);

    </script>
</body>
</html>

x = 2/"字串" ,變數x的值不是一個數字。

isNaN(x) ,因為x的值為NAN,isNaN()判斷為NAN時,會返回true。

 

若用值為NAN的變數做運算,其最後的值會顯示NAN:

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>

        var x = NaN;
        var y = 10;
        var sum = x + y;

        document.getElementById("demo").innerHTML = sum;

    </script>
</body>
</html>

 

NAN表示不合理的數字,不過NAN仍然是Number的型態:

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>

        var x = 2 / "字串";

        document.getElementById("demo").innerHTML = x+"為"+typeof x;

    </script>
</body>
</html>

var x =  2 / "字串" 為NAN。

typeof x 表示x的型態。

 

數字可以為物件

數字的定義通常為:var x = 100

也可以將數字定義為物件:var y = new Number(100)

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>

        var x = 100;
        var y = new Number(100);

        document.getElementById("demo").innerHTML = "x為" + typeof x
        + "<br>"
        + "y為" + typeof y ;

    </script>
</body>
</html>

var x = 100 定義變數x位數字。

var y = new Number(100) 定義變數y為物件。

 

數字的方法

因為JavaScript的數字可以定義為物件,所以在JavaScript中的數字可以使用方法與屬性。

當數字執行方法或屬性時,會被當作物件執行。

 

toString( )

toString( ) : 以字串型態返回數字。

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>
    var x = 100;
    document.getElementById("demo").innerHTML =
        x.toString() + "<br>" +
       (100).toString() + "<br>" +
       (50 + 50).toString();
    </script>

</body>
</html>

x.toString() 將變數x返回100。

(100).toString() 將字串100返回100。

(50 + 50).toString() 將表達式50+50返回100。

 

取數字小數點

toFixed( )

toFixed( ) : 將數字顯示到指定的小數位數,並以字串顯示。

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>
    var x = 123.456;
    document.getElementById("demo").innerHTML =
        x.toFixed(0) + "<br>" +
        x.toFixed(2) + "<br>" +
        x.toFixed(4) + "<br>" +
        x.toFixed(6);
    </script>

</body>
</html>

toFixed()方法的括號中參數表示取到小數點後幾位。

x.toFixed(0) 表示取數字123.456到小數點後第0位。

x.toFixed(2) 表示取數字123.456到小數點後第2位。

x.toFixed(4) 表示取數字123.456到小數點後第4位。

x.toFixed(6) 表示取數字123.456到小數點後第6位。

 

toPrecision( )

toPrecision( ) : 將數字顯示到指定的長度,並以字串顯示。

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>
    var x = 123.456;
    document.getElementById("demo").innerHTML =
        x.toPrecision() + "<br>" +
        x.toPrecision(3) + "<br>" +
        x.toPrecision(6) + "<br>" +
        x.toPrecision(9);
    </script>

</body>
</html>

toPrecision()方法的括號中參數表示取數字的長度。

x.toPrecision() 表示取數字123.456完整長度。

x.toPrecision(3) 表示取數字123.456的前三位數字。

x.toPrecision(6) 表示取數字123.456的前六位數字。

x.toPrecision(9) 表示取數字123.456到前九位數字。

 

valueOf( )

valueOf( ) : 將數字以數字型態返回。

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>

    <script>
        var x = 100;
        document.getElementById("demo").innerHTML =
            x.valueOf() + "<br>" +
           (100).valueOf() + "<br>" +
           (50 + 50).valueOf();
    </script>
</body>
</html>

因為JavaScript的數字的型態可以為Number或物件, valueOf()能夠將其轉換為原始值。

x.valueOf() 將變數x返回100。

(100).valueOf() 將字串100返回100。

(50 + 50).valueOf() 將表達式50+50返回100。

 

將變數轉換為數字

JavaScript有三個方法可以將變數轉換為數字型態:

  • Number() 方法

  • parseInt() 方法

  • parseFloat() 方法

這三個方法不是數字的方法,而是JavaScript的方法。可以運用在任何型態的資料。

 

Number( )

Number( ) : 將變數轉換為數字型態。

<!DOCTYPE html>
<html>
<body>

<p>The global JavaScript function Number() converts variables to numbers:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
    Number(true) + "<br>" +
    Number(false) + "<br>" +
    Number(new Date()) + "<br>" +
    Number("  10") + "<br>" +
    Number("10  ") + "<br>" +
    Number("10 6");
</script>

</body>
</html>

Number(true) 若為true則為1。

Number(false) 若為false則為0。

Number(new Date()) 返回自1970.1.1起的毫秒數。

Number("  10") 將字串" 10"中的數字10轉為數字型態。

Number("10  ") 將字串"10 "中的數字10轉為數字型態。

Number("10 6") 返回NAN,"10 6"不為合理的數字。

 

parseInt( ) 

parseInt( ) : 將字串中的第一個數字轉換為整數的數字型態。

<!DOCTYPE html>
<html>
<body>

<p>The global JavaScript function parseInt() converts strings to numbers:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
    parseInt("10") + "<br>" +
    parseInt("10.33") + "<br>" +
    parseInt("10 6") + "<br>" +
    parseInt("10 years") + "<br>" +
    parseInt("years 10");
</script>

</body>
</html>

parseInt("10") 將字串"10"轉換為整數10的數字。

parseInt("10.33") 將字串"10.33"轉換為整數10的數字。

parseInt("10 6") 將字串"10 6"中第一個字10轉換為整數10的數字。

parseInt("10 years") 將字串"10 years"中第一個字10轉換為整數10的數字。

parseInt("years 10") 返回NAN,"years 10"第一個字years不為合理的數字。

 

parseFloat( ) : 將字串中的第一個數字轉換為數字型態

<!DOCTYPE html>
<html>
<body>

<p>The global JavaScript function parseFloat() converts strings to numbers:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
    parseFloat("10") + "<br>" +
    parseFloat("10.33") + "<br>" +
    parseFloat("10 6") + "<br>" +
    parseFloat("10 years") + "<br>" +
    parseFloat("years 10");
</script>

</body>
</html>

parseFloat("10") 將字串"10"轉換為浮點數10的數字。

parseFloat("10.33") 將字串"10.33"轉換為浮點數10.33的數字。

parseFloat("10 6") 將字串"10 6"中第一個字10轉換為浮點數10的數字。

parseFloat("10 years") 將字串"10 years"中第一個字10轉換為浮點數10的數字。

parseFloat("years 10") 返回NAN,"years 10"第一個字years不為合理的數字。

 

 END 

回目錄