儲存您需要的資訊 - 變數

在本文中，您將被要求輸入程式碼行來測試您對內容的理解。如果您使用的是桌面瀏覽器，最佳的輸入示例程式碼的地方是瀏覽器的 JavaScript 控制檯（有關如何訪問此工具的更多資訊，請參閱 什麼是瀏覽器開發者工具）。

變數是用於儲存值的容器，例如我們在求和中可能使用的數字，或者我們可能用作句子一部分的字串。

讓我們看一個例子

<button id="button_A">Press me</button>
<h3 id="heading_A"></h3>

const buttonA = document.querySelector("#button_A");
const headingA = document.querySelector("#heading_A");

let count = 1;

buttonA.onclick = () => {
  buttonA.textContent = "Try again!";
  headingA.textContent = `${count} clicks so far`;
  count += 1;
};

在這個例子中，按下按鈕會執行一些程式碼。首先，它更改按鈕本身上的文字。其次，它顯示一個關於按鈕被按了多少次的提示資訊。這個數字儲存在一個變數中。每次使用者按下按鈕時，變數中的數字都會加一。

為了理解為什麼這非常有用，讓我們想想如果沒有使用變數來儲存計數，我們將如何編寫此示例。最終會看起來像這樣

<button id="button_B">Press me</button>
<h3 id="heading_B"></h3>

const buttonB = document.querySelector("#button_B");
const headingB = document.querySelector("#heading_B");

buttonB.onclick = () => {
  buttonB.textContent = "Try again!";
  headingB.textContent = "1 click so far";
};

您可能還不完全理解我們使用的語法（還沒！），但您應該能夠理解其含義。如果沒有變數，我們就無法知道按鈕被點選了多少次。當無法記住任何資訊時，傳送給使用者的提示訊息將很快變得無關緊要。

變數是有意義的，隨著您對 JavaScript 的瞭解越來越多，它們將開始變得自然而然。

變數的一件特殊的事情是它們幾乎可以包含任何東西——不僅僅是字串和數字。變數還可以包含複雜資料，甚至包含整個函式來做令人驚歎的事情。您在學習過程中會學到更多關於這方面的知識。

要使用變數，您首先必須建立它——更準確地說，我們稱之為宣告變數。為此，我們輸入關鍵字 let，後跟要呼叫變數的名稱

let myName;
let myAge;

在這裡，我們建立了兩個名為 myName 和 myAge 的變數。嘗試將這些行輸入您的 Web 瀏覽器的控制檯。之後，嘗試使用您自己的名稱選擇建立變數（或兩個）。

您可以透過只輸入變數的名稱來測試這些值現在是否存在於執行環境中，例如

myName;
myAge;

它們目前沒有值；它們是空的容器。當您輸入變數名稱時，您應該看到返回 undefined 的值。如果它們不存在，您將收到錯誤訊息——嘗試輸入

scoobyDoo;

宣告變數後，您可以用一個值對其進行初始化。您透過鍵入變數名稱，後跟一個等號 (=)，後跟要賦予它的值來實現此操作。例如

myName = "Chris";
myAge = 37;

現在嘗試返回控制檯並輸入這些行。您應該看到分配給變數的值在控制檯中返回以確認它，在每種情況下都是如此。同樣，您可以透過在控制檯中鍵入變數名稱來返回變數值——再次嘗試這些

myName;
myAge;

您可以同時宣告和初始化變數，像這樣

let myDog = "Rover";

這可能是您最常做的事情，因為它比在兩行上執行兩個操作更快。

您可能還會看到使用 var 關鍵字宣告變數的不同方法

var myName;
var myAge;

在 JavaScript 首次建立時，這是宣告變數的唯一方法。var 的設計令人困惑且容易出錯。因此，在現代版本的 JavaScript 中建立了 let，這是一種用於建立變數的新關鍵字，其工作方式與 var 有些不同，從而修復了它的問題。

下面解釋了幾個簡單的區別。我們現在不會詳細介紹所有區別，但隨著您對 JavaScript 的瞭解越來越多，您會開始發現它們（如果您真的想現在閱讀它們，隨時檢視我們的 let 參考頁面）。

首先，如果您編寫一個宣告和初始化變數的多行 JavaScript 程式，您實際上可以在初始化變數後使用 var 宣告變數，它仍然可以工作。例如

myName = "Chris";

function logName() {
  console.log(myName);
}

logName();

var myName;

這是因為提升——閱讀 var 提升 以瞭解更多有關該主題的資訊。

提升不再適用於 let。如果我們在上面的例子中將 var 更改為 let，它將失敗並出現錯誤。這是一件好事——在初始化變數後宣告變數會導致令人困惑、難以理解的程式碼。

其次，當您使用 var 時，您可以根據需要多次宣告同一個變數，但使用 let 則不行。以下內容將起作用

var myName = "Chris";
var myName = "Bob";

但以下內容將在第二行丟擲錯誤

let myName = "Chris";
let myName = "Bob";

您必須這樣做

let myName = "Chris";
myName = "Bob";

同樣，這是一個明智的語言決定。沒有理由重新宣告變數——它只會使事情變得更加混亂。

由於這些原因以及更多原因，我們建議您在程式碼中使用 let 而不是 var。除非您明確為舊版瀏覽器編寫支援，否則不再有理由使用 var，因為所有現代瀏覽器都從 2015 年開始支援 let。

> let myName = "Chris";
  let myName = "Bob";
// As one input: SyntaxError: Identifier 'myName' has already been declared

> let myName = "Chris";
> let myName = "Bob";
// As two inputs: both succeed

變數被初始化為一個值後，您可以透過賦予它一個不同的值來更改（或更新）該值。嘗試將以下行輸入您的控制檯

myName = "Bob";
myAge = 40;

您可以根據需要呼叫變數，但存在限制。通常，您應該堅持只使用拉丁字元（0-9、a-z、A-Z）和下劃線字元。

• 您不應該使用其他字元，因為它們可能會導致錯誤或難以被國際觀眾理解。
• 不要在變數名稱的開頭使用下劃線——這在某些 JavaScript 結構中用於表示特定含義，因此可能會造成混淆。
• 不要在變數的開頭使用數字。這是不允許的，會導致錯誤。
• 一個安全的約定是堅持使用 小駝峰命名法，您將多個單詞放在一起，對第一個單詞的整個部分使用小寫，然後將後續單詞的首字母大寫。到目前為止，我們在文章中一直對變數名稱使用這種方式。
• 使變數名稱直觀，以便它們描述它們包含的資料。不要只使用單個字母/數字，或很長的短語。
• 變數區分大小寫——因此 myage 與 myAge 是不同的變數。
• 最後一點：您還需要避免使用 JavaScript 保留字作為您的變數名稱——這裡指的是構成 JavaScript 語法的實際單詞！因此，您不能使用 var、function、let 和 for 等單詞作為變數名稱。瀏覽器將它們識別為不同的程式碼項，因此您將收到錯誤資訊。

好的名稱示例

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

不好的名稱示例

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongvariablenameman

現在嘗試建立幾個變數，並牢記上述指導方針。

我們可以儲存在變數中的資料型別有很多種。在本節中，我們將簡要描述這些型別，然後在未來的文章中，您將更詳細地瞭解它們。

您可以在變數中儲存數字，無論是整數（例如 30）還是小數（例如 2.456）（也稱為浮點數或浮點數字）。您不需要在 JavaScript 中宣告變數型別，這與其他一些程式語言不同。當您給變數賦予一個數值時，您不需要包含引號

let myAge = 17;

字串是文字片段。當您給變數賦予一個字串值時，您需要用單引號或雙引號將它括起來；否則，JavaScript 會嘗試將其解釋為另一個變數名稱。

let dolphinGoodbye = "So long and thanks for all the fish";

布林值是真/假值——它們可以有兩個值，true 或 false。它們通常用於測試條件，然後根據需要執行程式碼。因此，例如，一個簡單的案例將是

let iAmAlive = true;

而在現實中，它將更像這樣使用

let test = 6 < 3;

這使用“小於”運算子 (<) 來測試 6 是否小於 3。正如您可能預期的那樣，它返回 false，因為 6 不小於 3！您將在本課程的後續課程中學習更多關於此類運算子的資訊。

陣列是一個包含多個值的物件，這些值包含在方括號中，並用逗號分隔。嘗試將以下行輸入您的控制檯

let myNameArray = ["Chris", "Bob", "Jim"];
let myNumberArray = [10, 15, 40];

一旦定義了這些陣列，就可以透過陣列中的位置訪問每個值。試試這些程式碼行

myNameArray[0]; // should return 'Chris'
myNumberArray[2]; // should return 40

方括號指定一個索引值，對應於要返回的值的位置。您可能已經注意到 JavaScript 中的陣列是從零開始索引的：第一個元素位於索引 0 處。

要了解更多資訊，請參閱我們關於 陣列 的文章。

在程式設計中，物件是程式碼結構，用於模擬現實生活中的物件。您可以擁有一個簡單的物件來表示一個盒子，幷包含有關其寬度、長度和高度的資訊，或者您可以擁有一個物件來表示一個人，幷包含有關其姓名、身高、體重、說哪種語言、如何向他們打招呼等資訊。

嘗試將以下程式碼行輸入到您的控制檯中

let dog = { name: "Spot", breed: "Dalmatian" };

要檢索儲存在物件中的資訊，可以使用以下語法

dog.name;

有關此主題的更多資訊，請參閱 介紹 JavaScript 物件 模組。

JavaScript 是一種“動態型別語言”，這意味著與其他一些語言不同，您不需要指定變數將包含哪種資料型別（數字、字串、陣列等）。

例如，如果您宣告一個變數並賦予它一個用引號括起來的值，瀏覽器會將該變數視為字串

let myString = "Hello";

即使用引號括起來的值僅僅是數字，它仍然是一個字串——而不是一個數字——因此請小心

let myNumber = "500"; // oops, this is still a string
typeof myNumber;
myNumber = 500; // much better — now this is a number
typeof myNumber;

嘗試將以上四行程式碼逐一輸入到您的控制檯中，並檢視結果。您會注意到我們使用了一個稱為 typeof 的特殊運算子——它返回您在其後鍵入的變數的資料型別。第一次呼叫它時，它應該返回 string，因為此時 myNumber 變數包含一個字串 '500'。看看第二次呼叫它時返回了什麼。

除了變數之外，您還可以宣告常量。它們類似於變數，只是

• 您必須在宣告時初始化它們
• 您不能在初始化後為它們分配新值。

例如，使用 let 可以宣告一個變數而不初始化它

let count;

如果您嘗試使用 const 執行此操作，您將看到錯誤

const count;

類似地，使用 let 可以初始化一個變數，然後為它分配一個新值（這也被稱為重新分配變數）

let count = 1;
count = 2;

如果您嘗試使用 const 執行此操作，您將看到錯誤

const count = 1;
count = 2;

請注意，儘管 JavaScript 中的常量必須始終命名相同的值，但您可以更改它命名的值的內容。對於像數字或布林值這樣的簡單型別來說，這不是一個有用的區別，但請考慮一個物件

const bird = { species: "Kestrel" };
console.log(bird.species); // "Kestrel"

您可以更新、新增或刪除使用 const 宣告的物件的屬性，因為即使物件的內容已更改，常量仍然指向同一個物件

bird.species = "Striated Caracara";
console.log(bird.species); // "Striated Caracara"

如果您不能像使用 let 那樣使用 const，為什麼要使用它而不是 let 呢？事實上 const 非常有用。如果您使用 const 來命名一個值，它會告訴任何檢視您程式碼的人，這個名稱永遠不會被分配給不同的值。他們每次看到這個名稱，就會知道它指的是什麼。

在本課程中，我們採用以下關於何時使用 let 和何時使用 const 的原則

儘可能使用 const，在必須時使用 let。

這意味著，如果您可以在宣告時初始化一個變數，並且以後不需要重新分配它，那麼將其設為常量。

您已經到達本文的結尾，但您還記得最重要的資訊嗎？您可以在繼續之前找到一些進一步的測試來驗證您是否保留了這些資訊——請參閱 測試您的技能：變數。

現在您應該對 JavaScript 變數以及如何建立它們有所瞭解。在下一篇文章中，我們將更詳細地關注數字，探討如何在 JavaScript 中進行基本數學運算。

• 上一步
• 概述：JavaScript 入門
• 下一步