變數、常數與命名

變數與常數

變數(Variable)在JavaScript語言中扮演了重要的資料(值)存放角色。在ES6標準之前，只有定義變數沒有定義常數的方式，現在這兩者有不同的定義關鍵字與方式。

你可以把變數中儲放的資料(值)，想成是暫時存放的，而在常數中的資料(值)則是要長期(永久)存放的，一旦給定值後就不會再改變的資料。範例如下:

//這個a是不可變的(常數)
const a = 10

//這行程式碼會發生錯誤: "a" is read-only(只能讀不能寫)
a = 11

//這個b是可變的(變數)
let b = 5

//b可以再改變其中的值
b = 6

註: 這本書中的程式碼，將不會使用分號(;)作為程式碼的結尾，請參考"寫作格式"這一章的說明。

你可把常數和變數想像是不同種類的盒子:

  • 常數const/康死/: 裝入東西(值)之後就上鎖的盒子，之後不可以再更動裡面的值
  • 變數let/累/: 暫時存放值的盒子，盒子是打開的，可以更動裡面的值

尤其JavaScript程式語言的程式設計師，在之前常會犯有不宣告就直接使用的壞習慣。我建議你最好在宣告常數或變數時，就給定一個值。雖然變數並沒有要求一開始要給定值，只有常數才有這個要求。

不過，在JavaScript語言中，常數指是的"不能再次指定值"(not re-assigned)，而不是"完全無法改變值"(immutable)，這兩個是有差異的概念。在之後的內容中會說明，物件類型的常數內容屬性是可以改變的，而在這個情況下常數會是一個常數指標。基本上，JavaScript語言中並沒有immutable(不可改變的)的特性。

因此，通常在程式碼撰寫中，我們使用const的情況會遠比let頻率高很多。除非你很確定這個變數等會在程式碼中其他部份會需要被改變，或是它是一個在類別定義裡的變數，不然就用const就對了，如果發生定義上的問題，除錯主控台或檢測工具會提醒你。

另外還有一個常見的風格指引建議是"一行宣告一個變數或常數"，範例如下:

//不好的宣告方式
const items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

//好的宣告方式
const items = getItems()
const goSportsTeam = true
const dragonball = 'z'

這大概是想要偷懶少打一些const關鍵字，不過明顯這樣作是個壞習慣，雖然JavaScript允許你可以這樣作。你可能會問這樣作有什麼差異，好的宣告方式除了清楚明白外，最大的優點是它在程式除錯時，可以很清楚的理解是哪一行作什麼事。

註: ES5以前都只會用"var"(肉<台>)作為標記，它是Variable(買<台>里哦波)的縮寫。"let"與"const"是ES6的新加入特性，你應該開始使用它們，本書不使用var來宣告變數。關於這兩種宣告方式的差異請參考: 這裡的問答與範例與這篇文章的說明

英文解說

const/康死/ 是 constant/康死撐/ 的縮寫，中譯是"常數"的意思。

let/累/，中譯是"讓..."， 例如"let's go"大概是"大家一起走吧"或"please let me go"(讓我走吧...其實是男女朋友說"分手"的意思)

風格指引

  • (crockford)(airbnb 13.2)建議一行一個變數(或常數)宣告與註解，然後最好是按英文字母排列。
  • (crockford)在函式中的最前面的敘述宣告變數。
  • (airbnb 13.3)把let宣告的放在一起，const宣告的放在一起。
  • (google)總是宣告變數。

命名(Naming)

我們需要先為這些數值的代表名稱命名，稱為常數名稱(constant name)或變數名稱(variable name)。以下說明的命名規則，不只包含常數與變數，還包含了函式、類別名稱的命名。

命名規則

變數或常數名稱基本上要遵守以下的規則:

  • 開頭字元需要是ASCII字元(英文大小寫字元)，或是下底線(_)、錢號($)。注意，數字不可用於開頭字元。
  • 接下來的字元可以使用英文字元、數字或下底線(_)。
  • 大小寫是有差異的。
  • 名稱不可使用JavaScript語言保留字詞。
  • 名稱被稱為identifier/愛登得罰兒/ (識別符，簡稱ID)，它在程式碼上下文中具有唯一性。

注意: 以下底線(_)為開頭的命名通常是有特別用途，它是用在類別中的私有變數、常數或函式(方法)。錢號($)通常也會用於特殊的情況。

好的變數(函式、類別)命名

變數、函式、類別命名

變數與函式，都用小駝峰式(camelCase)的命名。類別用巴斯卡(PascalCase)或大駝峰式命名法(CamelCase)命名:

let numberOfStudents
const numberOfLegs
function setBackgroundColor()
class Student{}

常數命名

在許多舊式的風格樣式指引中，會建議使用全大寫英文命名，字詞間使用下底線(_)連接:

const NAMES_LIKE_THIS='Hello'

不過，因為ES6中加入了const用於指示為常數後，其實這個規則並沒有那麼需要，程式檢查工具或執行時都會用常數的方式來檢查。所以你可以用一般對變數的命名規則就可以了:

const helloString = 'Hello'

少用簡寫或自己發明縮寫

  • 不好的命名: setBgColor / 好的命合: setBackgroundColor
  • 不好的命名: userAdr / 好的命名: userAddress
  • 不好的命名: fName, lName / 好的命名: firstName, lastName

語意不明或對象不明

  • 不好的命名: insert() 這是要插入什麼？/ 好的命名: insertDiv()
  • 不好的命名: name 這是什麼名稱？/ 好的命名: memberName
  • 不好的命名: isOk() 什麼東西ok不ok？ / 好的命名: isConnected 連上線了嗎？

不要拼錯英文單字

  • 錯誤的拼字: memuItem / 正確的拼字: menuItem
  • 錯誤的拼字: pueryString / 正確的拼字: queryString

英文單複數

陣列之類的集合結構，有數量很多的意思，大部份都用"複數"型態的字詞，或者資料的類型來分別，例如:

studentArray
students

執行的動作（函式或方法），如果針對單一個變數的行為，用單數:

addItem()

如果針對多個數的行為，用複數:

addItems()

針對全體的行為，會用「All」:

removeAll()

常見的英文計量字詞:

count numberOf amountOf price cost length width height speed

常見的布林值開頭字詞:

isEmpty hasBasket

常見的字串值開頭字詞:

string name description label text

常用的動作詞（函數用）開頭

  • make take 作某…事
  • move 移動
  • add 加上、相加
  • delete/remove 移除
  • insert 單體 splice 複合體
  • extend append 展開
  • set 設定
  • get 獲得
  • print 印出
  • list 列出
  • reset 重置
  • link 連至
  • repeat 重覆
  • replace 取代
  • find search 尋找
  • xxxxTo 到xxx

具時間意義或指示的字詞

  • will 通常指即將發生但未發生
  • did 已發生
  • should 應該發生

使用長一點的命名是可以提供更佳的閱讀性，而且與效能一點關係都沒有，JavaScript的程式碼最後都會再經過醜化與壓縮，變數名稱會用很短的名稱來取代，這點與程式開發中使用的名稱無關。

風格指引

  • (airbnb 22.1) 避免使用單個英文字元的命名，像q, a, b, x, y, z
  • (airbnb 22.4) 避免在命名的前後使用下底線(_)，例如__firstName__、_firstName、firstName_都是很糟的命名

註解(Comment)

註解(Comment/康門/) 的用意是要讓以後的自己或其他人看到程式碼時，能很快與正確的理解，這段程式碼是在作什麼用的。所以在重要的程式碼的地方附近(通常在上面)，加上註解是好的習慣。註解也常常用在暫時性的把某段程式碼先擋住讓它不執行。好的註解習慣的養成建議:

  • 不管你的英文有多破，用英文來進行註解是比較好的
  • 註解上面需要加一行空白行
  • 用// FIXME:與// TODO:來標示目前問題的位置與未來需要要作的功能處
  • 用註解來說明函式的參數與回傳值

提示: 就已經英文很破為何還要逼你寫英文註解？主要的原因是為了"加快與專注在程式碼上的撰寫"。因為要輸入中文註解還需要切換到中文輸入法，一下子寫程式碼又要切回英文輸入法，除了按鍵不同，符號的輸入也不同。能專心寫程式就寫程式碼不是很好嗎？

單行註解用的是雙斜線(//)(double slash/打波 死內需/)符號。以下為範例:

//我是一個單行註解

多行註解用的是/*...*/符號，這也稱為註解區塊(comment block)。以下為範例:

/*
我是一個多行註解區塊
這是第二行註解
這是第三行註解
*/

風格指引

  • (airbnb 17.2)註解上面需要加一行空白行
  • (airbnb 17.4)用// FIXME:來指示目前問題所在點
  • (airbnb 17.4)用// TODO:來指示之後需要作的項目所在點

英文解說

Comment/康門/是很常見的網路用語，它除了用在程式開撰寫裡當"註解"外，也有"評論"、"留言"的意思。部落格通常下面有個留言的功能，它的英文就是這個字詞。

slash/死內需/有猛砍、鞭打的意思，大概是右撇子英文，因為右手拿斧頭砍下去畫出來的動作線就像這樣(/)。

反斜線(\)的英文是backslash/背可死內需/，它在程式撰寫時常用來作跳脫字元的符號

符號

我們在程式碼中會用到很多符號，除了你剛上面已經看到的幾個，還有常見的以下幾個。這裡把它們的英文都列出來，尤其是有一些中文翻譯字義上，我覺得實在是太容易混淆了，建議你還是用英文來看會比較清楚:

等號(=)

你可能會誤解這個符號的英文應該是是equal/伊括/，在中文是相等的意思。平常是這樣是沒錯，但用在程式碼上中並不是，它還有幾個不同的符號樣式。

一個等號(=)是指定(Assignment/餓賽門/)運算符號，也稱之為Basic/貝喜客/ Assignment，因為還有其他的指定運算符號，例如(+=)、(*=)。Assignment/餓賽門/中文有"分配"、"指定"的意思。

二個等號(==)時稱為相等(equal/伊括/)，它是比較運算符號，用於比較兩個變數or常數的其中的值是否相等。它的反義符號是(!=)。

三個等號(===)時稱為(identity/愛登得體/)，它也是比較運算符號，用於比較兩個變數or常數是否完全相等(包含類型與值)。它的反義符號是(!==)。

類型與比較之後的章節會再說明。這裡只要記得這些英文的和大概的意思就行了。

括號

括號本身的英文字詞在世界各地的英文國家中，有一些不同的講法，以下以美國的說法為主。

括號(())

本書中以"圓括號"作為此符號的名稱

英文為Parentheses/波潤捨西斯/，英文有"插入語"、"插曲"的其他意思。中文也有稱為圓括號、小括號。在JavaScript的用途主要是函式呼叫、包括流程敘述以及分隔運算的優先次序。

中括號([])

本書中以"方括號"作為此符號的名稱

英文為Brackets/布累克特斯/，或是方括號(square/史魁兒/ brackets)，英文就有"支架"、"括住"的意思。主要用於JavaScript中的陣列(Array)。

大括號({})

本書中以"花括號"作為此符號的名稱

英文為Braces/布累謝斯/，英文就有"吊帶"、"背帶"的其他意思。中譯常稱為"花括號"。常見有另一英文講法為Curly/顆粒/brackets/布累克特斯/，中譯為"捲毛的括號"，就是"花括號"了。在JavaScript語言中用於程式敘述的區域分隔(函式、迴圈、流程條件)，另外也用於物件的字面文字(Object Literals)。

引號

引號(")

英文為Quote/括特/，其他還有"引言"、"引用"、"報價"的意思。有時為了區分單引號，中文會翻成"雙引號"，在JavaScript語言中用於字串的宣告。

單引號(')

英文為Single/醒狗/ Quote/括特/。在JavaScript語言中用於字串的宣告。

算術運算符

標準算術運算符

在所有的程式語言都是使用相同的算術運算符:

  • 加(+) addition/額弟遜/
  • 減(-) subtraction /捨吹遜/
  • 乘(*) multiplication /摸特佛K遜/
  • 除(/) division /第V俊/

JavaScript提供的其他的算術運算符

  • 餘(%) Remainder/瑞妹的兒/
  • 遞增(++) Increment/盈虧門/
  • 遞減(--) Decrement/第虧門/
  • 正號(+) Unary plus
  • 負號(-) Unary negation

Unary/油呢瑞/ 是"一元的"意思，代表運算單一個參與的值。上面的遞增與遞減也是一元的運算符，例如以下的範例:

const a = 3++
const b = 5
const c = -b
const d = +"3"

註: 正號並不是用於數字本身運算的，它是負號的相對符號，一般的數字例如1與123，相當於+1與+123，只是正(+)號並不用寫上。正號主要用於其它類型的值強制轉換為數字的運算。

註: (+=)這個符號稱為加法指定(Addition assignment)，它屬於指定運算符。a+=b相當於a=a+b，其他的像(-=)(*=)(/=)(%=)都是類似的方式。

字串運算

只有以下兩個運算符可以用在字串連接(concatenate)時使用，其他的並不能使用:

  • 加(+) addition/額弟遜/
  • 加法指定(+=) Addition assignment

註: 加號(+)這符號至少有三種用途，而字串的連接運算會比數字的加總運算還更優先，這一點要特別注意。

邏輯運算符

  • 邏輯與(&&) Logical AND
  • 邏輯或(||) Logical OR
  • 邏輯非(!) Logical NOT

比較運算符

除了上面的已說明的等號(=)相關的比較較運算外，還有以下幾個常用的:

  • 大於(>) Greater/貴特兒/ than
  • 小於(<) less/蕾絲/ than
  • 大於等於(>=) Greater than or equal
  • 小於等於(<=) Less than or equal

註: 如果你搞不清大於與小於符號哪個是哪個，舉起你的右手，打開虎口就像">"，所以它也是右撇子符號，其實這和人類社會書寫習慣有關，我們都是從左至右書寫程式碼。

其他常用符號

  • 逗號(,) comma /康馬/
  • 冒號(:) colon /叩龍/
  • 分號(;) semicolon /些米叩龍/
  • 句點(.) dot/搭/
  • 驚嘆號(!) exclamation mark /A死客妹遜/ /馬克/
  • 問號(?) question mark /虧遜/ /馬克/
  • 下底線(_) underscore /昂得死過/
  • 重音符號(`) back-tick /背踢克/
  • 連接號(-) hyphen /嗨芬/
  • 星號(*) asterisks /A死特瑞死/
  • 錢號($) dollar signs /打惹/ /賽/

連接號(-)與負號(-)、破折號(-)這三個在通用的電腦鍵盤上長得是一樣的。實際上它們三個的英文單字不同，分別是hyphen、minus sign與dash，用途也各有不同。

英文解說

用中文來解說這段程式碼怎麼解說:

const abc = 10

先看一下英文會怎麼說(以下來自MDN的說法):

// define abc as a constant and give it the value 10

中文這樣說對嗎？

定義(宣告)abc識別符為常數，它的值等於10

這個講法有一個嚴重的問題，就是等於這個中文說法是不正確的，因為依照我們之前的解說，一個等號(=)時，中文是"指定、分配"的意思。所以下面的說法會比較正確:

定義(宣告)abc(識別符)為常數，與指定它的值為10

這相當於兩件事寫在同一個敘述中，一個是定義，一個是指定值。常數的話，規定在宣告時就一定要給定值，但變數沒這規定，所以變數的情況可以分成兩個敘述:

let xyz
xyz = 5

以中文來說的解說方式就會是兩個敘述:

定義(宣告)xyz(識別符)為變數
指定xyz(識別符)的值為5

保留字詞

保留字詞通常是JavaScript中具有特別用途的類別、函式、變數名稱，這些字詞不能使用到命名中。保留字可以區分以下各分類:

  • JavaScript中的函式、標記、方法保留字
  • JavaScript中的類別、屬性、資料類型的保留字
  • JavaScript未來標準規格可能會使用的保留字
  • HTML中Windows物件的保留字
  • HTML事件處理的保留字
  • 所使用的JavaScript函式庫或框架中的保留字

以下網頁中可參考所有的保留字:

對於保留字你可以先不用那麼在意，因為現在已經有很多檢查工具(linter)，都加入了保留字的檢查功能，如果你有誤用時，工具會出現錯誤或警告訊息。另外，保留字詞通常很短，而且是有意義的英文字詞。當你在寫自己的命名時，儘可能用組合的字詞(例如firstName, studentName)，然後長度長一些，誤用到保留字詞的機會大概不會有。

這裡說的保留字，在使用上是用"全部小寫"的英文單字，例如let不能寫成"lEt", "LET", "Let"。

結語

本章主要說明了兩個主要的宣告關鍵字let與const的用法，以及在JavaScript中的命名規則，這些命名規則通用於所有的類別、函式、變數與常數的識別符。本章也有簡單介紹程式碼註解的使用方式。

最後將所有常用到的運算符、符號，整理出來它的符號樣式，以及英文字詞，供初學者參考。如果方便的話，應該要作個單字卡來學習一下所有的英文單字。對初學者之後學習是相當有幫助的(例如聽懂英文教學影片在講什麼)。

家庭作業

作業一

學校給了你一個新的工作，希望把學生的資料的各項功能，寫成一個JavaScript的應用程式，經過調查和討論後，學生會有幾個基本的資料:

  • 學號
  • 學生的姓名
  • 學生的出生年月日
  • 學生的住址
  • 學生的聯絡電話
  • 學生的家長(其中一位聯絡用的)

現在要請你把這些資料的項目，寫成變數或常數的名稱，請你進行命名的工作。

作業二

最近公司接了一個家用遊戲代理商妥託的案子，希望能作一個網站上的JavaScript應用程式，把遊戲公司目前代理的遊戲軟體，放到網路上提供給他們的客戶了解。經過調查和討論後，遊戲大致會有以下幾個資料欄位:

  • 遊戲的發行編號(例如: KK123)
  • 遊戲名稱
  • 遊戲的製作公司
  • 遊戲的發行日期
  • 遊戲支援的語言(例如: 日文、中文、英文...)
  • 遊戲支援的平台(例如: PS4, Xbox...)
  • 遊戲的種類(例如: 動作類、射擊類)
  • 遊戲是否為18禁
  • 遊戲是否需要網路連線

現在要請你把這些資料的項目，寫成變數或常數的名稱，請你進行命名的工作。

作業三

打字練習對於提升撰寫程式碼的速度是很有幫助的。有人說很多學寫程式的人，最後只會兩個按鍵組合，一個是複製(Ctrl+C)，另一個是貼上(Ctrl+V)。對於我們有遠大理想的未來優秀程式設計師，這樣的按鍵組合是不足的，所以需要多練習打字。請依照以下的兩個區域，打出這些常用的關鍵字與符號了。如果你覺得太簡單，可以把行數對調再練習下一次，而且最好能練習到不看鍵盤就能打出來:

if else else if const let let const
import export return import export return
switch case default break case switch break
class extends super class extends super
for in do while continue while for in do
try throw function catch function try catch
if else function const let for return

+-*/% {!?:} (++--) [1][0][3]
(){_-/\} (_.){}() => >=
<= == !== && ||

results matching ""

    No results matching ""