iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 4
1
Modern Web

JavaScript初心者ノ研究日記。系列 第 4

四日目:JavaScript 型別 データ型ノ章

安安 我SONYKO 。 今天 Day 4 。
日文的型別叫做 データ型 ( De Ta Ga Ta )

昨天介紹變數,今天來進一步的講解那些裝在變數裡的玩意兒 (≖ω≖。)

什麼是型別?

白話一點就是 資料型態、資料類型。就是 程式判讀的種類。
每個程式語言都會學到 型別,大同小異。

https://ithelp.ithome.com.tw/upload/images/20200917/20129506K4EcKdxg4E.png

大家要記一下:
變數沒有型別,値才有
變數沒有型別,値才有
變數沒有型別,値才有


JavaScript 型別

JS 分 基本型別 ( Primitives ) 與 物件型別 ( Object )。先來大概的介紹再來 仔細的介紹 。

基本型別 プリミティブ型:

  1. 字串 string
  2. 數字 number
  3. 布林値 boolean
  4. null ( 有大小寫區分喔!null 就是 null ,不是Null 也不是NULL )
  5. 未定義 undefined
  6. symbol ( ES6之後新增的型別,待介紹 )
  7. BigInt ( ES6之後新增的型別,待介紹 )

在程式碼中長這樣:

/* -------------基本型別-------------*/
var a = '夜露死苦'
console.log(typeof(a))       // string

var b = 87
console.log(typeof(b))       // number

var c = true 
console.log(typeof(c))       // boolean

/* -------------物件型別-------------*/
var d = [1,2,3]
console.log(typeof(d))       // object

var e = {
	name: '島村卯月',
	age: 17
}
console.log(typeof(e))       // object

※ 使用 typeof (値) 可以用來檢査 値~的型別是什麼。

那我們來認識各種型別是什麼東東!


string 字串 (日:文字列)

你可能會想說:「字串就... 字串啊,有什麼好介紹的?」
我會回答你:「 對啊 」

程式語言中的字串會由 一組 單引號 or 一組雙引號 來框住它。

' 單引號框住文字 '
" 雙引號框住文字 "

那今天只要挑自己喜歡的框就可以了,順帶一題我喜歡單引號( 沒人問

可是要注意的部分就是,今天在框的時候也可能會不小心踩雷,單引號裡面如果會出現單引號時(或 雙內出現雙)

所以假如你今天想對我送一串文字:

var youSay = ' SONYKO, you're so cute! ' 
               /* 這樣會出錯,我會收不到 */
var youSay = " SONYKO, you're so cute!!! "
               /* 這樣我就可以成功收到惹(((( */

(ノ∇≦*) 牙打~


Number 數字 (日:数値)

你可能又會想說:「數字就... 數字啊,有什麼好介紹的?」
我一樣會回答你:「 對啊 」

數字不用任何引號,就是直接打數字就對了。數字喔!英文中文這些都母湯喔。

var myPhoneNum = 28825252 
var myHouseNum = 30

程式語言當然少不了計算,數字可以拿來計算。
可以用JS 做出一個計算機、BMI 測量器、匯率換算 ... 等等。
再加上你可能會自己做美美的UI ,有沒有!你超強的!

但這篇著重介紹型別,所以先不講運算方法歐。


Boolean 布林値 (日:論理値)

在我第一次接觸程式語言的時候,聽到布林値就開始驚驚的ww
什麼 true 跟 false?要 要幹嘛? 布林是誰啊一個人名嗎?(各種混亂)

布林値就是指 true 和 false 。意思就是:對 和 錯、有 和 沒有。

你可以想想,什麼情境下你會講對跟錯、有和沒有?
可能是當你要判斷的時候,或你回應別人的時候。那程式也是一樣的!

舉幾個例子:

  1. 情境一:你是電商網站工程師
    你:伺服器大大,健身環還有存貨嗎?
    伺:沒有喔 ( false )
    你:好吧。我只好把這個按鈕設成目前無庫存了。
     

  2. 情境二:你要寫一個訂房網站,將房間配備顯示在網頁上。

    var roomName = '單人房' 
    var roomSize = '10坪'
    var roomPrice = 10800
    
    var isWifi = false
    var isShower = false
    var isAC = false
    var noSmoking = true
    

以上舉例不知道有沒有讓大家對布林値清楚一點了,
他也不是什麼可怕的東西,就當作是一個「判斷」就行了!


null

null 前面都還沒有講過,但undefined 變數篇有出現過,chrome 建立變數的那邊。我學習前端歷程大概3個月,到目前還沒遇到 null (很菜)

翻書 & google 査什麼是 null ,一致寫 「 null 就是 沒有値 的意思 」
https://ithelp.ithome.com.tw/upload/images/20200917/20129506QDDfRkCZpP.png
( 豆知識:沼王的日文是ヌオー 念成 奴喔 ,跟null 發音很像喔 )

null 也是各個程式語言都有它,然後他們的意思一致都是「沒有値」的意思。
上面有寫到,每個語言的null 的大小寫有差異,JavaScript 是全小寫的null 。

畢竟我也還沒實際碰到過,也不想把它複雜化,上網爬文後讓我比較能理解的解釋為:

空值(Null Values)是未定義或不明值。如尚未輸入,且未設定預設值。或者是資料遺失,例如輸入資料時硬體出問題,資料的值為不明。
空值不是零,也不是空白 space,也不是空字串。
空值的運用:方便檢查資料錄是否已登錄等。

然後JavaScript有一個bug 就是,你如果用 typeof ( null ) 會回傳跟你說...
https://ithelp.ithome.com.tw/upload/images/20200917/20129506OuTgFEynkH.png
AMAZING ~~~~☆
 


undefined

還記得上一篇變數說到的,chrome 在解析code 的時候,會先幫你的變數創一個記憶體、並給他一個値為 undefined ,再依序賦予每個變數値。
 
聰明的你應該可以感受到 undefined 跟 null 之間微妙的差異了!
undefined 其實也就是字面上的意思 —— 找不到値 , 「找不到値」跟「沒有値」意思不太一樣對吧?
 
「 我的妹妹呢?我找不到我妹妹 」「 醒醒吧你沒有妹妹 」兩句話意思完全不一樣吧,這樣你就成功掌握 null 跟 undefined 意思的差異了。

 
undefined 很常見,例如:
https://ithelp.ithome.com.tw/upload/images/20200917/201295069JfCigkDQF.png
初心者寫code 幾乎是每天都會見到undefined ,所以這邊就介紹到這邊,
之後實際撰寫code 時,相信你就會知道他是什麼東西哩。
 


Object 物件型別 (日:オブジェクト型)

有看到 中括號 [ ]大括號 { } 的都是 物件型別

JavaScript 的中括號 [ ] 包起來的東西我們會稱他「陣列」
用大括號 { } 包起來的我們稱他「物件」 ,陣列跟物件之後會再提到~

基本型別以外的,都是物件型別,這樣記就可以了。
函式function 也是物件型別歐!

來看程式碼:

var myWife = ['島村卯月','双葉あんず','神崎蘭子']
console.log(typeof(myWife))              // object

var girlfriend = {
	name : '一ノ瀬志希',
	age : 18 ,
	height : 161 ,
	weight : 43 
}
console.log(typeof(girlfriend))          // object

看到這種一包一包的資料,物件型別就對了!

那我們為什麼說 値才有型別 呢?
以上面範例來說,girlfriend 這個變數的値 的型別是 物件型別,但裡面的資料呢? name 的値是 string、age 的値是number 。
 
 
 
不知道以上的解釋大家好不好懂。
希望有幫到你們 (‘-’*)

另外還有ES6 新增了兩個型別「 Symbol 」和「 BigInt 」,
讓我研究一下,之後再為他們發一篇文!
 
今天就寫到這邊~♫ じゃあね 
  
 


(●´3`)ノ SONYKO 的 前端日本語教室 。'、+
 
 
今天介紹型別, 那我們來看看關於型別的日文。
音檔

日本語 平仮名 中文・英語 羅馬拼音
データ型 でーたがた 型別 De~ Ta Ga Ta
文字列 もじれつ 字串 Mo Ji Re Tsu
数値 すうち 數字 Suu Chi
論理値 ろんりち 布林値 Ron Ri Chi
シンボル しんぼる Symbol Shin Bo Ru
長整数 ちょうせいすう BigInt Chou Sei Suu
オブジェクト型 おぶじぇくとがた 物件型別 O Bu Je Ku To Ga Ta
プリミティブ型 ぷりみてぃぶがた 基本型別 Pu Ri Mi Ti Bu Ga Ta

 
 
熟悉這些單字後,我們看一段 日文的 JS 介紹文:

「JavaScript で扱うデータ型は大きく分けてプリミティブ型とオブジェクト型に分けることができます。」

把它拆解:
JavaScript で扱うデータ型は   :  JavaScript 中使用的型別
大きく分けて          :  大致分類
プリミティブ型とオブジェクト型 :  基本型別 和 物件型別
分けることができます      :  可以分成

再順一下中文:
「 JavaScript 的型別大致可以分成基本型別 和 物件型別 」

就這樣 (+´З`)
這麼一來慢慢看得懂程式相關的日文哩!


上一篇
三日目:JavaScript 變數 変数ノ章
下一篇
五日目:JavaScript 運算子 演算子 一ノ章
系列文
JavaScript初心者ノ研究日記。30

1 則留言

0
廖洧杰
iT邦高手 1 級 ‧ 2020-09-17 14:18:45

獲得的收獲是沼王發音 (欸

Q:哪隻神奇寶貝最奴?
A:沼王 (奴喔~~~~~)

我要留言

立即登入留言