【JS幼幼班】Step.03 JavaScript 的基本概念


Posted by nancy543 on 2021-07-29

【述句和運算式】

JavaScript 最主要的作用在於幫網頁加上行為,這些行為撰寫成程式指令,稱作述句。而述句定義了 JS 的主要語法,通常使用一個或多個關鍵字來表達程式要執行的一些動作,來告訴瀏覽器要做什麼事情。

運算式則定義了程式的邏輯運算原理,並與各種型式的符號、關鍵字組成述句,且以分號 ; 標示為一段述句的結束,表示 JS 程式中一段可執行單位。預設情況下,程式會由上至下、由左到右依序逐行執行,直到最後一行執行完畢。

  • 述句:一段完整的程式碼,執行某個動作。如:變數的宣告、賦值,迴圈和 if 判斷式等。
  • 運算式:提供數值給「運算子Operator」去進行運算,然後得到運算的結果(值Value)。
英文 國家 用語翻譯 產生值 說明
Statement 台灣、香港 述句、語句、陳述式 不會 相當於一個完整的句子。
中國 語句
Expression 台灣、香港 運算式、表達式 類似一個句子的某部分片段。
中國 表達式

【分號 ;

分號可以作為述句的結尾,也可以說是運算式之間的分隔,而分號是可選擇加或不加。

我們在上一篇文章已經練習過 alert('這是我的第一個 JavaScript'); 這樣的句子了,其實我們還可以編寫更多甚至任意數量的述句,而多個述句之間可以用分號來進行分割。

例如,我們將上面的字串拆成兩組彈跳視窗,並用分號 ; 分隔:

alert('這是我的第一個');alert('JavaScript');

但通常每個述句結束,我們會將其斷行,這樣可以更順暢的閱讀程式碼:

alert('這是我的第一個');
alert('JavaScript');

但如果我們在斷行的時候,不小心忘了加上分號怎麼辦?

alert('這是我的第一個')
alert('JavaScript');

可以看到第一行忘了加分號,但執行時卻不會造成解析錯誤,是因為 JS 容許這樣的錯誤。原因是 JS 會幫我們自動補上分號,正確來說是語法解析器的 ASI ( Automatic Semicolon Insertion自動分號插入) 斷行解讀,並不是實際上插入分號。

只是省略分號可能會讓 JS 誤解你意思而造成程式錯誤,而這種情況下發生的錯誤是很難被找到和解決的,尤其是在新手身上更容易發生。所以官方推薦,還是在每個述句結尾自行加上分號,以防止一些潛在的問題。

不過加或不加分號,早就是 JS 工程師們長久以來的戰爭了,想了解更詳細的分號戰爭,可參閱文末參考資料。


【空白 Whitespace】

空格(Space)、Tab鍵或換行符號(Newline Characters),在 JS 中都稱為「空白」。當程式碼在解析時,會忽略所有的空白位元,所以當你在程式碼中添加空白,是可以增加程式的可讀性的。如:

c=a+b*2;
var myName='Nancy';
var yourPets=['dog','cat','rabbit'];

和下面的程式碼對照,其實兩者是一樣的意思。
而且在運算子(=+-*/)旁邊增加空格或斷行,其實程式碼會更好閱讀。

c = a + b * 2;
var myName = 'Nancy';
var yourPets = [
    'dog',
    'cat',
    'rabbit'
];

【命名風格】

如果想用多個英文單字取名,建議使用「駝峰式大小寫Camel Case」命名,規則是所有英文單字相連,第一個單字的首字母是小寫,其他相連的單字首字母為大寫,又稱為「小駝峰命名」,如:someObjectmyFirstName。不過這種命名規則可當作是一種慣例,非絕對或強制,主要目的是增加識別和可讀性。

// 不好的命名 bad
var myfirstname = 'Nancy';
var my_first_name = 'Nancy';
var MYFIRSTNAME = 'Nancy';
var MY_FIRST_NAME = 'Nancy';

p.s:如果每個工程師都像上面那樣,各自有喜愛的命名規則,只會造成團隊或後續維護者閱讀不易,也會讓人無所適從。

// 好的命名 good
var myFirstName = 'Nancy';

p.s:統一大家的命名規則,可以增加程式的可讀性。


【有意義的命名】

一個好的命名能完整描述出它所代表的含義,所以如果命名夠清晰的話,其實是不需再增加註解給它。

// 不好的命名 bad
var a = 5,
    b = 10;
console.log(a + b);

p.s:今天很開心的隨便取個 abc,明天肯定你就忘了它是幹嘛用的,除非你有多下註解說明 ab 指的是什麼。但是即使你註解過了,也不保證這名字在同一支或是別支 JS 檔案沒使用過,更別說其他接手維護的工程師想飛奔過來打你了。

// 好的命名 good
var milkTeaPrice = 20,
    sandwichPrice = 15;
console.log(milkTeaPrice + sandwichPrice);

p.s:由上面的變數名稱,很清楚就能明白這是要算奶茶和三明治的總價,連註解都省了。

常數命名

常數可用全大寫命名,單字之間以 _ 連接,又稱為「蛇形命名法Snake Case」。在 ES6 之前還沒有 const 指令來宣告常數,只能用 var 宣告,會無法判斷宣告的是變數還是常數,通常用此方法來區別一個變數是否為常數。

var ONE_DAY = SECONDS * MINUTES * HOURS;     // ES6 之前,常數的宣告方法
const oneDay = seconds * minutes * hours;    // ES6 之後,可直接使用 const 宣告常數

【不使用保留字或關鍵字命名】

每種程式語言都規定了自己的一套保留字,編寫程式時,在命名識別字名稱必須避開使用保留字。因為保留字往往是具有語法功能的關鍵字,若是以此為名,將會造成程式執行錯誤。因為當瀏覽器開始執行時,該識別字會被程式判斷成語法用的關鍵字,程式會搞不懂你要它做什麼指令或對象是誰,進而導致程式執行衝突,當然 Javascript 也是如此!

-- 什麼是識別字 Identifier --

識別字就是程式設計師在程式中依需求而自己取的名字(如:變數名、函數名、物件名、對象名等),通常識別字的命名會以具有意義的英文單字為主。例:

var myFirstName = 'Nancy';        // "myFirstName" 就是識別字
var myAge = 18;                   // "myAge" 就是識別字

取名規則:

  • 可用

    1. 識別字可使用任何 Unicode 符號(包含中文、日文、韓文等亞洲字元),長度或大小寫不限,但最通用的還是 26 個英文字母為主,可加上數字、底線符號 _ 及金錢符號 $ 作為組合。
    2. 如果要使用超過 2 個以上的英文單字組合,須以駝峰式命名,且每個單字之間不可有空格,因為空格會讓編譯器當成前後是兩個不同的識別字。
  • 不可用
    識別字的第一個字元 絕對不可用數字 0-9 開始,因為數字會先被當成字面常數處理。但第二個字元後就沒有限制,可以用英文、數字或任何 Unicode 符號。

// 錯誤的命名 bad
2mail、room#、this、button

// 正確的命名 good
userName、some_Obj、identifier1、_sys_val、$change、身高、にほんご

-- 什麼是保留字 Reserved Word --

保留字指在高級語言中已經定義過的字,有點像是為將來的關鍵字而保留的單字。因此保留字不能被用作變數名、函數名或值的名字等,簡單來說,就是使用者不能再使用這些單字作為命名使用。

JS 的保留字包含「關鍵字Keyword」、「未來保留字Future Reserved Word」、「字面常數Literal」。

1.關鍵字 Keyword
關鍵字就是具有語法功能的單字,且不可拿來作用識別字命名使用。

下面就是舊版 ES3 加上 ES5、ES6 新增的關鍵字一併整理入表,當然其中包含後來 ES5、ES6 刪除的字,最好也不要使用。因為即使已經被 ES5、ES6 刪除,但並非所有瀏覽器都完全支援 ES5、ES6,所以依然建議不使用。

  • 藍色字:ES5、ES6 新增的。
  • 紅色字:已被 ES5、ES6 標準中刪除。

2.未來保留字 Future Reserved Word
在 ECMAScript 規格中,有些關鍵字沒有特殊功能,但在未來某個時間可能會加上而變成新的關鍵字。所以那些關鍵字不能當成識別字使用,不論在嚴格模式和非嚴格模式中均不能用。

3.字面常數Literal
字面常數只有 3 個,分別是 nulltruefalse


【命名規則】

大小寫敏感
JS 程式碼是對大小寫敏感的,無論是變數函數物件名稱等,為了避免輸入混亂和語法錯誤,建議採用小寫字符編寫程式碼。

如:變數名 lastnamelastName是兩個不同的變數,alert() 寫成 Alert() 程式結果是會產生錯誤。

var name = 'Robin Wieruch';
var Name = 'Dennis Wieruch';
var NAME = 'Thomas Wieruch';
console.log(name);      // 回傳 "Robin Wieruch"
console.log(Name);      // 回傳 "Dennis Wieruch"
console.log(NAME);      // 回傳 "Thomas Wieruch"

【程式碼過長,盡量不使用斷行】

有些工程師為了達到最佳的程式可讀性,遇到程式碼過長或是字串過長的狀況,便會將其斷行處理。而程式碼和字串是如何斷行的?

1.一般如果程式碼過長,想要斷行的最佳位置是在「運算子後」直接斷行。如下:

原始碼

document.getElementById("demo").innerHTML = "Nice to meet you.";

斷行後

document.getElementById("demo").innerHTML = 
"Nice to meet you.";

但你不可使用跳脫字元 \程式碼之間斷行,會出現錯誤訊息:如下:

2.若是字串過長的話,直接斷行可能會導致語法錯誤,因此要在字串斷行後的每行結尾加上 \ 代表斷行。注意,\ 後面不能輸入空白或其他字元。如下:

原始碼

var str = "Hello! I am Johnson, Nice to meet you. Your eyes is so beautiful.";

斷行後

var str = "Hello! \
    I am Johnson, \
    Nice to meet you. \
    Your eyes is so beautiful.
   ";

雖然儘管 JS 允許這樣做,但如果在 \ 之後出現任何尾隨空格,那麼它就會導致棘手的錯誤,而且這個錯誤對新手來說不太明顯,因此不建議使用。


【註解 Comments】

用於不被程式執行原始碼或說明文字。
在後期維護,可讓維護人員更清楚此程式的撰寫邏輯,或相關參數是什麼意思,分為以下兩種註解方法:

語法 名詞 說明
// 單行註解 兩個斜線右方的文字,程式不執行
/* */ 多行註解 放在/**/中間的文字,程式不執行(符號可跨行)

單行註解寫法:

//這是單行註解:
alert("Hello World!");

多行註解寫法:

/* 這是多行註解:
 * 求圓形面積
 * @param r {number} 圓的半徑
 * @returns {number} 圓的面積
 */
function getArea (r) {
    return Math.PI * r * r;
}

不過註解也不要過度濫用,這樣會造成程式檔案肥大,降低讀取效能,畢竟它只是幫助你快速理解程式碼的輔助工具而已,別把它當作文在寫阿 XD。


參考資料:


上一篇:【JS幼幼班】Step.02 寫下你人生中第一個 JavaScript 吧
下一篇:【JS幼幼班】Step.04 基本語法:變數


#javascript #JS幼幼班 #learningJS #JS基本語法







Related Posts

CSS保健室|overflow、overflow-x、overflow-y

CSS保健室|overflow、overflow-x、overflow-y

Vue、MVVM、MVC、雙向綁定

Vue、MVVM、MVC、雙向綁定

用 Python 自學資料科學與機器學習入門實戰:Pandas 基礎入門

用 Python 自學資料科學與機器學習入門實戰:Pandas 基礎入門


Comments