iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

從零開始的JS學習之路系列 第 3

[Day03] 基本型別

上一篇提到 JavaScript 是弱型別語言。

強型別語言在變數被宣告的時候必須指定資料型別給它,如果對變數做了錯誤型別的運算則會出現錯誤,優點是能減少在執行時期(Runtime)發生的錯誤。

而弱型別的 JavaScript 剛好相反,變數本身不帶有資料型別的資訊,其中的物件才有。在執行時期透過變數內容來參考至物件,才會知道變數有什麼操作方式。取得語法簡潔的優點,但要注意型態轉換時產生非預期的問題。

JavaScript 主要有分成基本型別(Primitives)及物件型別(Object)兩大類型別。可以用 typeof 運算子來做判斷型別的方式。

基本型別Primitives:

  1. string(字串)
    JS 只有字串沒有字元的概念,所以要把字串包起來,可以用雙引號 "" 或單引號 '',或者 ES6 新增樣板字面值(template literal)用反引號 `` 包覆,看個人喜好使用。
var str1 = "Let's go!";// 雙引號
var str2 = 'Let\'s go!';// 單引號遇到錯誤時在前面加\(escape character 跳脫字元)
var str3 = `Let's go!`;// 反引號 
var str4 = "Hello, " + "world.";//用+連接字串
console.log(str4)
Hello, world.

+在字串加上變數:

var age = 25;
var str5 = "I'm " + age + " years old.";
console.log(str5)
I'm 25 years old.

var str6 = `I'm ${age} years old.`;// 用樣板字面值加上變數的用法
console.log(str6)
I'm 25 years old.

過去斷行與樣板字面值的差異

var hello1 = "這不是一行文\n這是第二行\n這是第三行";
console.log('10', hello1)
10 這不是一行文 
這是第二行 
這是第三行

var hello2 = `這不是一行文
這是第二行
這是第三行`;// es6後用反引號可以直接斷行
console.log('11', hello2);
11 這不是一行文
這是第二行
這是第三行
  1. number(數字)
    包含整數和帶有小數點的浮點數字,還有幾個比較特殊的數字 Infinity(無限大)、-Infinity (負無限大)及 NaN (不是數值,Not a Number) 。例:0/0 是 NaN,Infinity/Infinity 也是 NaN 一樣的概念,但有趣的是 typeof NaN,會回報 number。
    既然NaN不好判斷那怎麼辦,可以用 isNaN(value) 來判斷
isNaN(NaN); // true
isNaN(123); // false
isNaN("123"); // false, 字串被轉成數字
isNaN("NaN"); // true, 轉成數字但不是數字

但是用 isNaN(value)這個方法會透過隱含的 Number()轉成數字,所以後來會建議用 Number.isNaN(value)來取代,可以參考 MDN 上的差異。

「帶有小數點的浮點數字」,是什麼意思呢?
試著輸入 0.1+0.2=... 的結果我驚呆了

0.1+0.2=0.30000000000000004
0.1+0.2===0.3; // false 

因為 JS 的 number 是基於 「IEEE 754」二進位浮點算數標準,十進位的小數無法完美的轉換成二進位表示,只能用無限循環的位數來趨近於十位數的小數(IEEE 745 規定 24 位數上限),所以會省略一些位數,導致還原時小數不夠精準。二進位的世界啊!門外漢的全新體驗!

  1. boolean(布林值)
    只有兩種,分別是 ture 以及 false。
    通常用在判斷式,作為控制程式流程的用途。

  2. null (沒有值)
    明確代表此變數沒有值。

  3. undefined
    尚未給值, 未定義。

var a = null; // null 
var b; // undefined
// 008 天的舉例很清楚的解釋兩者的區別
  1. symbol(es6新增)

型別先到這邊,

下一篇 物件型別


上一篇
[Day02] 變數
下一篇
[Day04] 物件型別
系列文
從零開始的JS學習之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言