---
# System prepended metadata

title: 站在 Python 的肩膀上開啟 JavaScript 的大門，用 Py 角度學 JS | Ep. 2 輸出與變數
tags: [JavaScript, Python]

---

# 站在 Python 的肩膀上開啟 JavaScript 的大門，用 Py 角度學 JS | Ep. 2 輸出與變數
:::info
這個系列帶著各位通過Python的角度，開始認識JavaScript這個實用的程式語言。專為曾經學習Python或認識Python，並且想學習JavaScript的人們設計，將會頻繁的提到每一種函式或語法與Python相關之處，便於將理解的知識再次利用，從中學習！
:::

本文章同步發布於 OTP Blog 個人部落格，歡迎[前往閱讀](https://winson-otp.github.io/posts/from-python-to-javascript-ep-2/)唷！

## 前言
各位讀者大家好！這一篇文章將帶著大家認識JavaScript中輸出內容的方法，以及如何定義變數，並且介紹與Python之間的關聯與類似性，帶著各位從Python的角度認識JavaScript！

這篇文章會介紹JavaScript的 `console.log` 函式，以及定義變數的三種方法 `let` `var` `const`。若用Python角度來看的話將會是 `print` 以及定義變數(`變數名稱 = 變數內容`)。

## 開啟資料夾並新增檔案
首先，由於是第一篇實際操作的教學，先帶著大家在VSCode開啟一個資料夾，並且建立檔案。

### 第一步：創建一個資料夾並開啟
請先創建一個資料夾在自己想要的路徑中，並且資料夾內暫時不存放任何檔案。

接著開啟VSCode，到左上角工具欄中的「檔案」，並選擇開啟資料夾，亦可以通過先點按 `Ctrl + k` ，放開後再點按 `Ctrl + o` 進行操作。

![](https://i.imgur.com/bZMXhGM.png)

並且將跳出選擇資料夾的視窗，請找到您剛剛創建的資料夾路徑，並且進行開啟。

這時您將來到類似於此的畫面，左上角檔案總管下的文字會是資料夾的名稱。

![](https://i.imgur.com/vfbup2z.png)


### 第二步：創建一個新檔案
將鼠標移動到資料夾名稱附近，您會看到出現了數個按鈕。

![](https://i.imgur.com/KNNgJlV.png)

請點擊左側的新增檔案按鈕，並且將檔案命名為您想要的檔案名稱，並且副檔名須為 `.js` ，這邊由於是第二集的第一個程式，取名為 `ep2-001.js`。

![](https://i.imgur.com/euEggD8.png)

當您在檔案總管區域點擊您的檔案時，您便會來到該檔案的編輯畫面。

![](https://i.imgur.com/taln3Ma.png)

以上是開啟資料夾與創建並開啟檔案的教學，接下來就要實際進行程式的學習囉！

## 輸出
首先要介紹的是在 JavaScript 中輸出的方法。想必非常多讀者都知道，在 Python 中最常見的輸出方法是 `print()` ，並且括號中的參數是輸出的內容，以及可以加入其他相關的設定。

例如：
```python
print('輸出內容')
print(123)
print(True)
```

而在 JavaScript 中的輸出會使用到 `console` 這個語法，而其中最常用於除錯或基本輸出的便是 `console.log()` 這個函式。而這個函式與 `print()` 相同，括號內填入的是輸出的內容。接下來讓我們來實際操作吧！

在剛剛創建的檔案中，輸入以下程式碼
```js
console.log(123);
```

可以發現在函式後面加上了一個分號，分號象徵著一行程式的結束，雖然若不加上也大多數情況內不會影響程式結果，但為了發生意料之外的錯誤，建議各位可以維持加上的習慣！

輸入後會發現檔案頁籤旁出現了一個白色圓圈，原先顯示的是一個叉叉，這代表了您所編輯的程式檔案尚未存檔。程式設計中，檔案未存檔會導致運行程式時，運行了前一次編輯且存檔的版本，而非最新的版本。因此每一次完成編輯後都應存檔後再運行，避免發生錯誤。

亦可以在檔案工具列中開啟自動儲存，避免忘記儲存的情形。

![](https://i.imgur.com/82oW1TB.png)

接著讓我們執行我們所編輯的程式碼。到工具列中的終端機頁籤，點按新增終端，來新增一個新的終端機供我們使用。

![](https://i.imgur.com/GH8SlA0.png)

開啟終端機後，頁面下方會跳出一個小窗格以及一串文字，文字會是您開啟的資料夾路徑。並且該行文字後可以輸入指令，在終端機執行。

![](https://i.imgur.com/Xg68CCw.png)

當我們要執行一個JavaScript程式碼，我們可以通過這串指令來通過Node環境進行執行。
```
node 檔案名稱
```

那我們就通過這個方式，來執行現在這個檔案吧！
```
node ep2-001.js
```
在終端機輸入後，點擊 Enter 便會執行。

![](https://i.imgur.com/wEePEIq.png)

我們可以發現，剛剛輸入在 `console.log()` 括號內的 123 成功被輸出！

若要輸出中文或英文文字等綜合的文字，您需要用單引號( `'` )或雙引號( `"` )包住文字，這便是JavaScript中的字串資料型態，在後續資料型態的文章會再次細講。這樣的資料型態與包裹方式(`'` 或 `"` )在Python同樣存在。

而這樣的輸出，若是在網頁中，將會在「檢查」工具中的「主控台(Console)」出現，若在Chrome中，您可以通過點按 F12 開啟檢查頁面。這邊筆者以寫文用的網頁Console做示範。

![](https://i.imgur.com/ycf66DN.png)


可以看到下方有著一串串的文字，我們使用 `console.log()` 輸出的資料將會顯示在此。圖片中可以注意到，有著以叉叉的錯誤符號為前綴，以及以警示符號為前綴的訊息。

而這種訊息，可以通過 `console.error()` 和 `console.warn()` 輸出。但若是在 Node.js 環境並在終端機執行，並不會看到不一樣的結果，因此暫時不進行演示。

除此之外，也可以用 `console.clear()` 清空控制台的所有內容。

console 語法中，也有著許多其他的函式，但由於較不常用，因此將留到後續若有機會再行介紹。

## 變數
Python中，定義變數僅需要使用 `變數名稱 = 變數資料` 的方式定義。

例如：
```python
x = 123
y = 'I am a string.'
z = "I am a string too."
n = False
```

而在JavaScript中，我們有三種方式能夠定義變數。

### var 逐漸被棄用的定義方式
var 這個定義方式，在 ES6 發布並推出 let 之後，漸漸較少被使用。var 定義方式會讓變數在整個函式區域都可以被調用，並且被使用於變數較不會被重新賦值的情況。

雖然這幾種方法的用途與限制不同，但是定義的方式皆類似，例如 var 通過這樣的方式進行定義。

```js
// 定義一個變數，名稱為otp，值為human字串
var otp = "human";
// 輸出otp這個變數，也就是human這個字串在主控台
console.log(otp);
```

可以發現這段程式碼中，第一和三行是對於程式的描述與補充，並且通過 `//` 起始。這樣的形式稱為註解，註解不會被執行，用於開發者開發時用於方便閱覽編輯程式碼。

建議各位在同一個資料夾再次創建一個新的檔案，命名為 `ep2-002.js` (第二集第二個程式)。並且將上述的程式碼貼於檔案內存檔，進行執行。

```
node ep2-002.js
```

將會出現這樣的結果。

![](https://i.imgur.com/SS7GdT6.png)

### let 主流的變數定義方式
let 這個定義方式在ES6被推出，並且逐漸被廣泛使用。let 的使用方法與 var 相同，適用範圍通常是變數會被重新定義時，並且使用 let 定義的變數不會存在於整個函式內。let 可以這樣使用。

```js
// 定義一個變數，名稱為num，值為數字123
let num = 123;
// 輸出otp這個變數，也就是123這個數字在主控台
console.log(otp);
```

請將這段程式碼貼到剛剛 var 實作的下方，將兩份程式碼合併為一份檔案，即如此。

```js
// 定義一個變數，名稱為otp，值為human字串
var otp = "human";
// 輸出otp這個變數，也就是human這個字串在主控台
console.log(otp);

// 定義一個變數，名稱為num，值為數字123
let num = 123;
// 輸出num這個變數，也就是123這個數字在主控台
console.log(num);
```

存檔並使用同樣的方法執行後，會產生此結果，可以發現兩個變數都順利的輸出！

![](https://i.imgur.com/FqSLQHc.png)

### const 無法被改變的變數
使用 const 定義的變數是無法被改變的，若改變會發生 `TypeError: Assignment to constant variable.` 的錯誤。變數可以通過此方式被定義。

```js
// 定義一個變數，名稱為cow，值為布林值true
const cow = true;
// 輸出num這個變數，也就是123這個數字在主控台
console.log(cow);
```

同樣把這串程式貼於同個檔案下方，讓檔案長得像這樣。

```js
// 定義一個變數，名稱為otp，值為human字串
var otp = "human";
// 輸出otp這個變數，也就是human這個字串在主控台
console.log(otp);

// 定義一個變數，名稱為num，值為數字123
let num = 123;
// 輸出num這個變數，也就是123這個數字在主控台
console.log(num);

// 定義一個變數，名稱為cow，值為布林值true
const cow = true;
// 輸出num這個變數，也就是123這個數字在主控台
console.log(cow);
```

存檔執行後會出現這樣的結果。

![](https://i.imgur.com/ccCeuRq.png)

以上便是對於JavaScript中定義變數的方式介紹囉！

## 結語
這篇文章介紹了JavaScript中輸出內容的方式：`console.log()` 和 `console.error()` 以及 `console.warn()`，以及清空控制台的 `console.clear()`。

並且介紹了定義變數的方法 `var` `let` `const` ，期望對於各位的學習有幫助哦！這篇文章是第一篇開始正式指導各位學習並實作JavaScript的文章，若有任何建議也都歡迎留言，會斟酌採納唷！

謝謝您的閱讀，下篇文章再見囉～

###### tags: `Python` `JavaScript`