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。

留言

名稱

中華電信,1,手機遊戲,47,比利時,1,生活札記,8,光世代,1,作弊模式,1,免費,1,系統資訊,1,防火牆,1,架站札記,56,疫苗,1,啤酒,1,軟體札記,77,部落格,1,盜連,1,程式札記,48,虛擬主機,3,暗黑破壞神,1,資料庫,11,資訊札記,9,遊戲札記,58,電腦遊戲,8,圖片壓縮,1,網路應用,44,課金,1,操作教學,3,餐廳,1,aapanel,2,Android,34,ASP.net,18,bootstrap,1,caesium,1,cloudflare,3,cpanel,1,DBeaver,1,dns,3,edge,1,hinet,1,https,1,IE,1,iis,1,iOS,48,JavaScript,18,lalaport,1,laravel,1,LINQ,1,MSSql,5,MySQL,9,netcore,1,Oracle,3,outlook,1,PHP,17,redis,1,route,1,RPG Maker,15,sourcetree,1,SSD,1,ssl,1,steam,1,ubuntu,1,Unity3D,4,VPS,3,webform,1,windows,2,winform,2,wordpress,36,
ltr
item
茂銓的網路札記: JavaScript 教學筆記 (2) – 變數與資料型別
JavaScript 教學筆記 (2) – 變數與資料型別
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3vVrAXA5fooTvcnclI9WjQLf54O4_mV4Uu2P9v3M1pWLb3tEjwaio-QgGq6qa84hJ0K_mltPuLBBT6MV2eXe_iOks8a2qR-Ij5t8ufw0kwB9SDP6rEDMmst9fDuIaATYoINs-bM9SAp-P/s1600/javascript.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3vVrAXA5fooTvcnclI9WjQLf54O4_mV4Uu2P9v3M1pWLb3tEjwaio-QgGq6qa84hJ0K_mltPuLBBT6MV2eXe_iOks8a2qR-Ij5t8ufw0kwB9SDP6rEDMmst9fDuIaATYoINs-bM9SAp-P/s72-c/javascript.png
茂銓的網路札記
https://www.mauchiuan.com/2015/12/javascript-tech-note-2-variable.html
https://www.mauchiuan.com/
https://www.mauchiuan.com/
https://www.mauchiuan.com/2015/12/javascript-tech-note-2-variable.html
true
1319490497453496749
UTF-8
載入全部文章 找不到任何文章 查看全部 閱讀更多 回覆 取消回覆 刪除 By 首頁 頁面 文章 查看全部. 推薦 標籤 彙整 搜尋 全部文章 找不到任何您所搜尋的文章 回首頁 星期日 星期一 星期二 星期三 星期四 星期五 星期六 週日 週一 週二 週三 週四 週五 週六 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月 1月 2月 3月 4月 五月 6月 7月 8月 9月 10月 11月 12月 現在 一分鐘前 $$1$$ 分鐘前 一小時前 $$1$$ 小時前 昨天 $$1$$ 天前 $$1$$ 週前 5週前 追蹤者 追蹤 此高級內容已鎖定 第 1 步:分享到社交網絡 第 2 步:單擊您社交網絡上的鏈接 複製所有代碼 選擇所有代碼 所有代碼都已復製到您的剪貼板 無法複製代碼/文本,請按[CTRL]+[C](或Mac為CMD+C)複製 表格中的內容