iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

入門前端技能之旅系列 第 13

Day.13 「初步學習 Javascript 基礎篇」 —— Javascript 宣告變數 與 基本型別

Javascript 宣告變數 與 基本型別

前面已經大略介紹了 HTML 和 CSS 的入門知識了,接著我們要來認識 Javascript,來為我們的網頁添加更多邏輯互動。

怎麼宣告變數?

Javascript 是個弱型別語言,在宣告變數時,不像其他語言需要先指定型別那麼嚴謹,宣告的變數名會對應記憶體位子,把其存入記憶體中,之後要取出值,只要藉由變數名,就能找到對應的值。

宣告變數
存入記憶體中

要幫變數命名也是有規則的,首先保留字(如:class)與關鍵字(如:var),不能用於變數名,變數名不能由數字作為開頭,且變數名有大小寫之分,可以使用$_在名稱中。常見的命名法為駝峰命名法,如:petNamepet_name

目前宣告方式有 3 個(含 ES6)

什麼是 ES6? ES6 正式名稱為 ECMAScript 2015,是第版 ECMAScript,因此簡稱 ES6。
ES6 增加了原本 Javascript 沒有的語法,能更加方便使用與維護,但有些瀏覽器兼容性可能不好(如:IE

  • var,Javascript 最原始的宣告方法,使用起來很簡單暴力,屬於全域宣告,可以在函式作用域做區隔,因為容易汙染全域變數,所以目前比較少使用了。
  • let,ES6 新增的宣告方法,letvar 最大的不同就是區域作用域(block scope),比較不會有汙染問題。
  • const,ES6 新增的宣告方法,const 最大的特色是屬於常數宣告,常數宣告的意思是不能隨意改值,降低不小心更改所導致的 bug,需注意 因為是常數宣告,無法隨意改值,所以使用常數宣告一定要賦予值,否則會報錯。

何謂常數? 就像是圓周率 π 就是數學常數 3.14159,並不會隨意更改。

變數的基本型別

Javascript 的基本型別

  • string 字串型別,這個型別很簡單,只要是使用 "' 包起來的就是字串型別,另外 ES6 還新增了樣板字面值 ,使用起來更加方便靈活,還能套用變數,注意 包起來的符號要一樣的才可以。

    • "string" 頭尾都是使用 "
    • 'string' 頭尾都是使用 '
    • 'string" 交錯使用會報錯
    • 如果字串內要使用 ' 則需要使用 " 來包,如:"I'm Mao",反之亦然。
    • ES6 新增的樣板字面值,‵string ${ 變數名 }‵ 頭尾都使用 ,要使用變數可以在裡面使用 ${} 來使用。
  • number 數字型別,這個型別代表數字,以下這些都是數字型別

    • 不管是正負數、小數點都是。(如:0, 9, -8, 7.6)
    • Infinity(無限大)
    • -Infinity(無限小)
    • NaN(Not a Number,非數字)
  • boolean 布林值,這個值就非常的單純許多,只有 true 與 false,這兩個值,主要是使用在判斷式中,在 Javascript 中,任何值都能轉換成布林值

  • undefined 未定義型別,只有一個值 undefined,代表這個變數還沒定義型別

  • null 空值,只有一個值 null ,代表這個變數目前定義為沒有值

  • object 以上基本型別以外的都是Object 物件,物件這個東西比較複雜,我們之後在細細品味。

如何知道變數的型別?

可以使用 Javascript 中用來判斷型別的運算符 typeof,使用方法如下

var a;
let n = null;

typeof "I'm Mao"; // string
typeof NaN;       // number
typeof true;      // boolean
typeof a;         // undefined
typeof n;         // object
typeof {};        // object
typeof [];        // object

欸~這時會發現奇怪的事情,null 給出的型別怎麼是 object 呢? 這其實是一開始 Javascript 設置實作時產生的 bug!

Javascript 的值是由一個表示型別的標籤,與實際內容的所組成。
由於物件型別標籤是 0,而 null 代表的是空值(通常以 0x00 表示),導致物件與空值的標籤搞混,而產生的結果。
內容取自 008 天 重新認識 Javascript

既然 Javascript 已經不打算修復這個 bug 了(應該說一改會牽動到很多東西,就乾脆不改了),我們就 想像 null 是空物件吧,實際上並不是唷!

如何分辨 NaN

這時會很困擾,會發現一般數字與 NaN 檢查型別都是回傳 number,要判斷數字型別是否為 NaN。
可以利用 JavaScript 提供的 isNaN() 來進行判斷!

let n = NaN;
console.log( isNaN(n) );  // true

如何轉型別?

有的時候我們宣告變數使用var a = "1",那麼 a 是的型別是什麼? 聰明的你應該馬上就知道是字串(string)型別了吧!
那麼如果想要把 a 轉型成數字(number)型別,就可以使用轉換型別的語法,剛好來介紹一下轉換型別的語法吧!

轉換型別語法:

  • 轉換成字串(string)型別:
    • toString(),使用方法a.toString()就能轉換成字串型別,但遇到 null 或 undefined 會報錯
    • String(),使用方法String(a)就能轉換成字串型別,遇到 null 或 undefined 也不會報錯
    • 變數直接加空字串,使用方法 a + '' 就能轉換成字串型別。
  • 轉換成數字型別
    • Number(),任意資料型別轉換成數字型別。
    • parseInt(),將字串或數字轉成整數。
    • parseFloat(),將字串或數字轉成浮點數。
    • 變數前面使用 + 一元運算子 或後面使用 *1,使用方法 +aa *1 就能轉換成數字型別。
  • 任何型別都可以轉換成 布林值
    • true
      • 任何非空字串的值
      • 任何非 0 的數字
      • 任何物件
    • false
      • 空字串(''""
      • 數字 0 和 NaN
      • null 和 undefined

總結

終於開始學習程式語言了,今天認識了基礎的宣告變數與型別判斷,蠻推薦 Kuro 大大寫的 008 天 重新認識 Javascript,寫得十分有趣清楚,下一篇章先進入我們的運算符篇。

參考資料


上一篇
Day.12 「來為網頁添加動畫吧!」 —— CSS 動畫(animation)
下一篇
Day.14 「基礎打穩了,就能走得更長久~」 —— JavaScript 基礎運算子
系列文
入門前端技能之旅30

1 則留言

0
liawyudye
iT邦新手 5 級 ‧ 2021-09-23 16:00:22

還可以 字串 *1
快速轉換成數字
/images/emoticon/emoticon37.gif

毛毛 iT邦新手 3 級 ‧ 2021-09-23 21:36:18 檢舉

沒錯!太感謝妳補充了~
/images/emoticon/emoticon12.gif

我要留言

立即登入留言