JavaScript 教學筆記 (2) – 變數與資料型別

變數宣告
變數不管在哪個程式語言當中都一定會使用到,因為有變數的存在我們才能夠設計各種形形色色的軟體,而變數主要的功用就是在記憶體位置中,存放我們所要處理的資料內容。
在 JavaScript 中宣告變數的方法有兩種

  • 舉例:
    <script>
        var a = 10; //宣告變數 a 並設定值為 10
        b = 20; //宣告變數 b 並設定值為 20
        
        document.write("變數 a:",a,"<br>");
        document.write("變數 b:",b,"<br>");
    </script>

執行結果:

變數 a:10
變數 b:20
這段範例程式碼可以正常的被執行並不會產生任何錯誤,不過既然可以直接設定變數那麼為何要加上 var 來宣告變數,這主要是因為是否加上 var 所宣告的變數定義是不同的,有加上 var 表示區域變數,而沒有加上 var 表示全域變數,有關區域變數以及全域變數的說明之後再來介紹。

資料型別
在 JavaScript 當中資料型別有以下幾種:

  • String:字串 - 基本型別

  • Number:數值 - 基本型別

  • Boolean:布林 - 基本型別

  • Array:陣列 - 複合型別

  • Object:物件 - 複合型別

  • null:空值 - 簡單型別

  • undefined:未定義 - 簡單型別

  • function:函示 - 特殊型別

由於 JavaScript 是屬於弱型別的程式語言,所以要宣告成什麼型別則是看給定的值來決定變數型別

舉例:

    <script>
        var a = 10; //number
        var b = "文字"; //string
        var c = false; //boolean
        var d = new Array(1,2,3); //object 雖宣告 Array 但是型態仍是屬於物件
        var e = function abc(){}; // function
        
        document.write("變數 a 型別:", typeof(a),"<br>");
        document.write("變數 b 型別:",typeof(b),"<br>");
        document.write("變數 c 型別:", typeof(c),"<br>");
        document.write("變數 d 型別:",typeof(d),"<br>");
        document.write("變數 d 型別:",typeof(e),"<br>");
        document.write("null 型別:",typeof(null),"<br>"); // null 型別的型態屬於物件
        document.write("undefined 型別:",typeof(undefined),"<br>");
    </script>
執行結果:

變數 a 型別:number
變數 b 型別:string
變數 c 型別:boolean
變數 d 型別:object
變數 d 型別:function
null 型別:object
undefined 型別:undefined

型別轉換
在程式語言中經常會對變數做操作,但是不同型別的變數無法正確的被運行,這個時候我們就需要進行型別的轉換,而其中最常轉換的型別就是轉成 Number 數值以及 String 字串了。

首先我們先來看如何轉成字串型別,要轉成字串型別有兩種函式

  • String()

  • toString()

  • 舉例:
    <script>
        var a = 10; //number
        document.write("變數 a 原本型別:", typeof(a),"<br>");
        a = a.toString(); //轉成 string
        document.write("變數 a 轉換型別:", typeof(a),"<br>");
        
        var b = 10; //number
        document.write("變數 b 原本型別:", typeof(b),"<br>");
        b = String(b); //轉成 string
        document.write("變數 b 轉換型別:", typeof(b),"<br>");
    </script>
執行結果:

變數 a 原本型別:number
變數 a 轉換型別:string
變數 b 原本型別:number
變數 b 轉換型別:string
不過一般我們很少用到轉成字串這個函式,因為在 JavaScript 中有隱含轉換,也就是程式會自動轉換型別,這主要是在串組字串時會自動發生。

  • 舉例:
    <script>
        var a = 10; //number
        document.write("變數 a 原本型別:", typeof(a),"<br>");
        
        var b = "單位"; // string
        document.write("變數 b 原本型別:", typeof(b),"<br>");
      
        var c = a + b; // 將變數 a,b 相加
        document.write("變數 c 值為:", c,"<br>");
        document.write("變數 c 型別:", typeof(c),"<br>");
    </script>
執行結果:

變數 a 型別:number
變數 b 型別:string
變數 c 值為:10單位
變數 c 型別:string
在這個範例中,我們並沒有針對變數 a 進行字串型別的轉換,僅僅只是將 Number 型別與 String 型別作相加的動作,此時 JavaScript 會自動的認為我們是要將變數 a 轉成字串型別來與變數 b 組合成一組新的字串。

接下來我們再來看看數值的轉型,而轉型方法也有以下幾種

  • parseInt()

  • Number()

  • 舉例:
    <script>
        var a = "10"; //string
        document.write("變數 a 原本型別:", typeof(a),"<br>");
        a = Number(a); //轉成 Number
        document.write("變數 a 轉換型別:", typeof(a),"<br>");
        
        var b = "20"; // string
        document.write("變數 b 原本型別:", typeof(b),"<br>");
        b = parseInt(b); //轉成 Number
        document.write("變數 b 轉換型別:", typeof(b),"<br>");
      
        var c = a + b; // 將變數 a,b 相加
        document.write("變數 c 值為:", c,"<br>");
        document.write("變數 c 型別:", typeof(c),"<br>");
    </script>
執行結果:

變數 a 原本型別:string
變數 a 轉換型別:number
變數 b 原本型別:string
變數 b 轉換型別:number
變數 c 值為:30
變數 c 型別:number
此範例中因為以將變數 a、b 由字串型別轉換成數值型別,所以當這兩個變數使用 + 組合時,就不再是一般的字串組合而是當作數值的運算,所以變數 c 最後的值不是字串 1020 而是數值 30。

上一篇文章
下一篇文章

歡迎來到茂銓的網路記事本,這邊主要記錄著個人的一些體驗以及心得分享。

0 意見: