簡單變數類型

所有的程式設計工作都可以歸結對「某些資料」進行「某種操作」,而變數就是代表「資料」的存在:變數是一個臨時的儲存容器。這裡的簡單變數指的是「一次指儲存單一的資訊片段」,包含數值、字串、布林值。
參考 MSDN 變數:https://msdn.microsoft.com/zh-tw/library/67defydd(v=vs.94).aspx

1變數宣告

變數宣告是為了正式承認它的存在,以下為變數宣告的四個部份:
var 變數名稱 =:賦值運算子 變數值
const 常數名稱 =:賦值運算子 常數值
var 用來宣告一個變數,使不使用與作用域(Scope)有關;const 用來宣告一個常數

命名規則


為了建立一變數,必須給它名稱,又稱為「識別子(Identifier)」,命名方式有:
          var value = 'area';      //宣告變數
          const CONST = 3.14;      //宣告常數
        
常數通常會用「全大寫字」和「底線」命名
參考 MSDN JavaScript 保留字:https://msdn.microsoft.com/zh-tw/library/0779sbks(v=vs.94).aspx
參考 MSDN 為變數命名:https://msdn.microsoft.com/zh-tw/library/67defydd(v=vs.94).aspx

宣告方式


除了一般宣告之外,var 還可以一次宣告多個變數,通常合併是方便組合宣告,然而不一定要在宣告時初始化變數,有時這麼做是有意義的,可以依照不同變數需求而改變宣告方式。
          var fullname = 'Domo Huang';                  //一般宣告
          var firstname = 'Domo', lastname = 'Huang';   //一次宣告並賦值多個變數
          var a, b, c;                                  //一次宣告多個變數,但不賦值

          var rate;
          rate = 5.25;
        

宣告型別


型別分成數值(Number)、字串(String)、布林值(Boolean)、陣列(Array)、物件(Object)五種,沒有定義就為 Undefined,因 JavaScript 是弱型別語言,所以直接賦值即可,甚至在變數相加的情況會自動轉換型別。
Number、String、Boolean,三者為簡單變數類型;Array 和 Object 則是複雜變數類型。
          //直接賦值定義型別(文字語法)
          var vUndefined;                                         //沒有賦值,輸出時就為 undefined
          var vNum = -1.234;                                      //數字 Numer
          var vStr = 'string';                                    //字串 String
          var vArr = ['元素1', '元素2', '元素3'];                  //陣列 Array
          var vObj = { firstName:"Domo", lastName:"Huang" };      //物件 Object
          var bool1 = 1, bool2 = 0, bool3 = true, bool4 = false;  //布林 Boolean,Boolean(值): 轉換成布林

          //正式型別宣告(物件語法)
          var vNum = new Number(2);
          var vStr = new String('JavaScript');
          var vBool = new Boolean(false);
          var vArr = new Array;
          var vObj = new Object;
        
參考 MSDN 資料型態:https://msdn.microsoft.com/zh-tw/library/7wkd9z69(v=vs.94).aspx

宣告範圍


變數分成區域變數、全域變數、常數
在所有函數外部宣告的變數,即使有 var 宣告,相對於函數仍有全域變數作用。
區域變數優先於全域變數,亦即若宣告了一個與全域變數相同名稱的區域變數,函式中的程式將會使用區域變數,而非全域變數。
const 關鍵字並沒有得到所有瀏覽器支援,在某些 IE 中無法辨識,不建議在 JavaScript 中建立自己的常數。
          globalValue = 'globel';      //宣告全域變數
          var areaValue = 'area';      //宣告區域變數
          const CONST = 3.14;          //宣告常數
        
參考 MSDN JavaScript 常數: https://msdn.microsoft.com/zh-tw/library/ff818462(v=vs.94).aspx

2使用數值(型別:Number)

建立數值


Number 不帶引號,可以是任何位數的數值,包含數字、小數點、正負數符號、字元「e」(指數記法),不包含千分位的逗號。
          var vNum = -1.234;              //沒有宣告型別
          var vNum = new Number(-1.234);  //正式宣告型別
        

算術運算子


和許多語言不同,JavaScript 只有一種數值類型,用來代表從整數、雙精準度(小數或實數)到指數記法的任何數值,能安全表示高達9*1015的數值。
運算式以「先乘除後加減」為原則,請參照其他優先順序參考 MDN 網站算術運算子的優先順序
            var row1 = 1 + 1;
            var row2 = 10 - 5;
            var row3 = 10 * 3;
            var row4 = 12 / 3;
            var row5 = 100 % 6;
            var row6 = 2 / 0;
            var row7 = 'letter' / 1;

            row1 ++;
            ++ row1;
            row1 --;
            -- row1;

            row3 *= 0.5;
            row4 /= 2;

            isNaN(row5)
            isNaN(row6)
            isNaN(row7)
            isFinite(row5)
            isFinite(row6)
            isFinite(row7)
          
參考 MSDN 計算運算子:https://msdn.microsoft.com/zh-tw/library/6hsc0eak(v=vs.94).aspx
參考 MSDN 運算子優先順序:https://msdn.microsoft.com/zh-tw/library/z3ks45k7(v=vs.94).aspx

格式化數值


JavaScript 的數值不僅是一個數字,還是 Number 類型的一個物件,內建方法可使數值返回一個精確到指定小數位數的數值
            var total = 524.1234567890;
            total.toFixed(2);
            total.toFixed(5);
            total.toPrecision(6);
            total.toPrecision(4);
            total.toPrecision(2);
            total.toPrecision(1);
          
若限制數值小於整數位數,則顯示科學符號,例如 5.2e+2 就是 5.2*102
參考 MSDN Number 物件:https://msdn.microsoft.com/zh-tw/library/dwab3ed2(v=vs.94).aspx

Math 物件


Math 物件是 JavaScript 的一個全域物件,物件內有幾個預先定義的常數,如 π (圓周率 3.14)和 E (2.71),值為固定,常數名稱都大寫。 Math 常數 Math 方法
            Math.abs(-5236);
            Math.ceil(5.5146);
            Math.floor(5.5146);
            Math.round(5.5146);
            Math.pow(2,10);
            Math.max(3,4,5,4,1,8,4,5);
            Math.min(3,4,5,4,1,8,4,5);
            Math.random();

            //試算圓的公式
            var radius = 12;
            var area = Math.PI * Math.pow(radius,2);
            var volume = Math.PI * (4/3) * Math.pow(radius,3);
          
參考 MSDN Math 物件:https://msdn.microsoft.com/zh-tw/library/b272f386(v=vs.94).aspx

3使用字串(型別:String)

建立字串


String 需包含單引號或雙引號,出現特殊字元時要在字元前面加上反斜線(\)。
          var vStr = "I\'m Domo.";              //沒有宣告型別
          var vStr = new String('I\'m Domo.');  //正式宣告型別
        

字串拆分


建立字串時,僅需要在任意內容加上引號,建立完後,可以用多種方式拆解字串,常見屬性及方法如下:
            var fullName = 'Domo Huang goes to Domo Store to buy a Domo doll with Domo\'s mom';
            fullName.length;

            fullName.charAt(0);
            fullName.charAt(4);
            fullName.charAt(8);
            fullName.charAt(70);           //找不到返回空白

            fullName.indexOf('D');
            fullName.indexOf(' ');
            fullName.indexOf('n');
            fullName.indexOf('j');          //找不到返回-1

            fullName.lastIndexOf('D');
            fullName.lastIndexOf(' ');
            fullName.lastIndexOf('n');
            fullName.lastIndexOf('j');      //找不到返回-1

            fullName.indexOf('o');
            fullName.lastIndexOf('o');
            fullName.indexOf('o',30);
            fullName.lastIndexOf('o',30);

            fullName.indexOf('Domo');
            fullName.lastIndexOf('Domo');
            fullName.indexOf('Domo',30);
            fullName.lastIndexOf('Domo',30);

            fullName.slice(32);
            fullName.slice(0,4);
            fullName.slice(-7);             //索引值若為負,將往後循環計算
            fullName.slice(2,-7);           //從 2 到 -7 之間的字串

            var str = 'Huang, Domo';
            var strArr = str.split(',');    //分隔後,存給一個陣列
          
參考 MSDN String:https://msdn.microsoft.com/zh-tw/library/ecczf11c(v=vs.94).aspx

字串操作


字串使用「連接」改變其值,類似字串的加法,將更多字元加到現有字串中,事實上,JavaScript 的連結運算子就是算術的加法運算子(+)。此外有可幫助字串連結的方法:
            var message = ' Hello, ';
            message = message + 'Domo ';
            message += 'Jiun! ';
            message.trim();
            message.concat(' How ', 'do ', 'U ', 'do?');

            message.indexOf('jiun');                      //如果大小寫不符會找不到!
            message.toLowerCase().indexOf('jiun');        //改成都小寫,較好找到要尋找的字串
            message.indexOf('DOMO');
            message.toUpperCase().indexOf('DOMO');
          

跳脫字元


字串中有某些具有意義的轉義序列(Escape Sequences),需要在插入引號之前加上反斜線(\)。
注意這些轉義序列適用於單引號或雙引號,但在 PHP 等語言則不同,只能使用於雙引號內
            document.write('純字元');
            document.write('\'單引號\'');
            document.write('\"雙引號\"');
            document.write('\\反斜線\\');
            document.write('換行(Enter鍵)\n我換行了!');
            document.write('倒退(Backspace鍵)\b我倒退了!');
            document.write('水平跳格(Tab鍵)\t我水平跳格了!');
            document.write('垂直跳格(Tab鍵)\v我垂直跳格了!');
            document.write('歸位\r我歸位了!');
            document.write('換頁\f我換頁了!');
          
參考 MSDN 特殊字元:https://msdn.microsoft.com/zh-tw/library/2yfce773(v=vs.94).aspx

4轉換型別

JavaScript 是弱型別的語言,可以一起使用不同類型的值也不會發生錯誤,例如數值與字串連接,JavaScript 會自動把數值轉換成字串,但一不小心還是會發生邏輯錯誤,因此使用強制轉換,就不擔心臭蟲(bug)發生。

轉換為數值型別


            var date = new Date();
            Number('123456');
            Number('20.5678 and String!');    //字串不能直接轉成數字
            Number(date);                     //時間會自動轉換成時間戳記

            parseInt('20.5678');
            parseInt('20.5678', 10);          //以 10 進位成整數,預設為 10 進位
            parseInt('20.5678 and String!');  //字串會以出現在開頭的數字作轉換
            parseInt('20.5678 22');
            parseInt(' 20.5678 ');            //字串開頭的空白會被省略
            parseInt('String! 20.5678');      //字串前面沒有數字,回傳 NaN

            parseFloat('20.5678');
            parseFloat('20.5678 and String!');
            parseFloat('20.5678 22');
            parseFloat(' 20.5678 ');
            parseFloat('String! 20.5678');

            var num = 1000, stringShip = '20', numTotal = 0, strTotal = '';
            strTotal = num + stringShip;
            numTotal += +stringShip;
            numTotal += +(stringShip);

            Number(undefined);                //undefined 轉數值變 NaN
            Number(null);                     //null 轉數值變 0
          

轉換為字串型別


            var date = new Date();
            var numTotal = 1000;
            var stringShip = '20';
            String(123456);
            String('20.5678 and String!');
            String(date);                   //時間會自動轉換成字串,跟預設值一樣

            var stringMessage = '總共 $' + numTotal.toString();
          

轉換為布林型別


            var date = new Date();
            Boolean('123456');                //只要內容有正常數值或字串,皆為 true
            Boolean('20.5678 and String!');
            Boolean(date);
            Boolean(-123);
            Boolean(0);
            Boolean(false);
            Boolean();
            Boolean(undefined);
            Boolean(null) =>;
          

5註解

單行註解


          //參數設定
          var n = 1;
          n++;  //累加
        

多行註解


          也可作為偵錯工具:只要將可能有問題的程式碼放在這兩個關鍵字組合之間,就能使程式碼「鈍化」,而不需要從腳本中刪除。
通常不建議在文字中加入過多註解,他應全面且準確,修改程式碼時一定要更新註解。
          /*
           *多行註解說明
           *多行註解說明
           *中間註解採用星號是慣例,但不是絕對必要
          */

          /*var n = 1;
          n++;*/
        
參考 MSDN 註解:https://msdn.microsoft.com/zh-tw/library/cte3c772(v=vs.94).aspx
DEMO MEMO