變數、常數與命名

變數與常數

變數(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關鍵字,不過明顯這樣作是個壞習慣,雖然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)命名:

常數命名

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

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

少用簡寫或自己發明縮寫

  • 不好的命名: setBgColor / 好的命合: setBackgroundColor

  • 不好的命名: userAdr / 好的命名: userAddress

  • 不好的命名: fName, lName / 好的命名: firstName, lastName

語意不明或對象不明

  • 不好的命名: insert() 這是要插入什麼?/ 好的命名: insertDiv()

  • 不好的命名: name 這是什麼名稱?/ 好的命名: memberName

  • 不好的命名: isOk() 什麼東西ok不ok? / 好的命名: isConnected 連上線了嗎?

不要拼錯英文單字

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

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

英文單複數

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

執行的動作(函式或方法),如果針對單一個變數的行為,用單數:

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

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

常見的英文計量字詞:

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___firstNamefirstName_都是很糟的命名

註解(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/油呢瑞/ 是"一元的"意思,代表運算單一個參與的值。上面的遞增與遞減也是一元的運算符,例如以下的範例:

註: 正號並不是用於數字本身運算的,它是負號的相對符號,一般的數字例如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,用途也各有不同。

英文解說

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

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

中文這樣說對嗎?

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

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

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

保留字詞

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

  • JavaScript中的函式、標記、方法保留字

  • JavaScript中的類別、屬性、資料類型的保留字

  • JavaScript未來標準規格可能會使用的保留字

  • HTML中Windows物件的保留字

  • HTML事件處理的保留字

  • 所使用的JavaScript函式庫或框架中的保留字

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

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

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

結語

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

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

家庭作業

作業一

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

  • 學號

  • 學生的姓名

  • 學生的出生年月日

  • 學生的住址

  • 學生的聯絡電話

  • 學生的家長(其中一位聯絡用的)

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

作業二

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

  • 遊戲的發行編號(例如: KK123)

  • 遊戲名稱

  • 遊戲的製作公司

  • 遊戲的發行日期

  • 遊戲支援的語言(例如: 日文、中文、英文...)

  • 遊戲支援的平台(例如: PS4, Xbox...)

  • 遊戲的種類(例如: 動作類、射擊類)

  • 遊戲是否為18禁

  • 遊戲是否需要網路連線

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

作業三

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

Last updated

Was this helpful?