JavaScript 中的變量和數據類型。 第 3 部分 JavaScript 課程從初學者到高級，共 10 篇博文

這是 JavaScript 博客文章系列的第 3 部分，它將幫助您探索 JavaScript 中的變量和數據類型的主題。 在本系列結束時，您將了解開始使用 JavaScript 編碼所需的所有基礎知識。 事不宜遲，讓我們開始第三個教程。

JavaScript 中的變量和數據類型——目錄：

1. 變量
2. JavaScript 中的基本數據類型

在這篇博文中，我們將繼續我們從第二篇博文離開的地方。 在這個階段，您應該打開 Google Chrome 瀏覽器，更具體地說，打開 JavaScript 控制台。 如果您出於某種原因關閉了它們，那麼現在是重新打開它們的好時機。

如果您使用的是 Mac，打開控制台的鍵盤快捷鍵是在打開 Chrome 後按“Option + Command + J”。 如果您使用的是 Windows 設備，則可以在打開 Chrome 後使用鍵盤快捷鍵“Control + Shift + J”打開 JavaScript 控制台。 或者您也可以轉到頂部的菜單並轉到查看 -> 開發人員 -> JavaScript 控制台。

變量

JavaScript 或任何其他編程語言中的變量非常常見。 這是有充分理由的。 變量在編程中起著非常關鍵的作用。 簡而言之，變量允許您存儲一些數據，以便在程序中移動、修改、更新或刪除數據。 事實上，這是一個非常重要的概念，有 3 種方法可以創建變量。 創建變量的編程術語稱為“聲明變量”，這基本上意味著我們在計算機內存中聲明一個變量。

要創建變量，我們將使用 3 個關鍵字之一，它們是：“var”、“let”和“const”。 關於這 3 個關鍵字，您首先應該了解的一件事是，在 2015 年之前，只有“var”關鍵字被使用，“let”和“const”關鍵字是在稱為 ES6 或 ES2015 的 JavaScript 標準中引入的。

如果你不知道這裡的 ES6 或 ES2015 是你應該知道的。 當 JavaScript 第一次出現時，不同的公司實現了不同版本的 JavaScript，並且必須有一個標準，以便您的代碼在所有主要瀏覽器中可預測且可靠地運行。 因此，一個名為 ECMA（歐洲計算機製造協會）的組織提出了一套瀏覽器應實施的 JavaScript 標準。 因此，只要您在編寫 JavaScript 時遵循這些標準，您的代碼就應該按照這些標準可預測地運行。 該標準稱為 EcmaScript，他們自 1997 年以來一直在發布更新的標準。自 2015 年以來，他們每年都發布這些標準，因此在撰寫本文時最新發布的標準稱為 ES2021。

但並非所有版本都相同，有些版本差異沒有那麼大，而有些版本則對語言進行了相當大的更改。 最後一次重大變化發生在 ES2015 中，也稱為 ES6，因為它是 ECMAScript 標準第六版的發布。 變量聲明發生了重大變化之一。

在 ES6 之前，只使用“var”關鍵字，這是聲明變量的唯一方式，因此得名“var”。 var 關鍵字具有靈活性，可能會導致不必要的問題。 因為它在使用上非常靈活，如果你不夠小心，就更容易在變量上出錯。 例如，如果您聲明了一個名為“user1”的變量，則不能使用新的“let”和“const”關鍵字重新聲明名為 user1 的變量，但可以使用“var”關鍵字來做到這一點。 如果您忘記了您的程序中已經有一個 user1，那麼第二次使用另一個用戶信息聲明 user1 時，您將覆蓋實際的第一個用戶信息，這將有效地刪除第一個用戶的信息。

// this can cause confusion
var user1 = "John";
var user1 = "Jack";
// if you try to do the same thing 
// with let or const you will get an error
let user1 = "John";
let user1 = "Jack";
// likewise you will also get an error
// if you try to do the same thing with the const keyword
const user1 = "John";
const user1 = "Jack";

但這並不是說你不會在任何地方看到“var”關鍵字，你肯定會看到它，尤其是一些初學者級別的 JavaScript 課程。 特別是如果他們已經有幾年的歷史了，有很多教程仍然會向您展示編寫 JavaScript 的舊方法。 但現實是，不再使用它不是最佳實踐。 相反，最佳實踐是在聲明變量時使用“let”或“const”關鍵字，具體取決於您的需要。 但是我們在談論什麼需求？ 簡而言之，如果您打算更改變量中的值，您將需要使用“let”關鍵字，如果您知道不會更改變量中的值，則需要使用“const”反而。 讓我們看一些同時使用 let 和 const 的變量聲明示例。

// we can use "let" when we want to track the game level of the user
// because we know that it will change
let gameLevel = 1;
gameLevel = 2;
gameLevel = 3;
// we can use the "const" keyword when declaring user ID
// because we know that we won't change it
const userId = 1010101999;

如果您還從上面的代碼中註意到，在最新的最佳實踐中，我們只編寫一次聲明關鍵字，並且在我們第一次聲明變量時這樣做。 當我們稍後想要更改變量內部的值時，我們不會在變量名之前使用任何關鍵字。

當我們想要訪問這些變量或常量所保存的數據時，我們可以簡單地使用它們的名稱。 例如，如果我們想向用戶顯示他們的遊戲級別和他們的用戶 ID，我們可以使用以下代碼：

// we can add the userID to the end of the sentence with a plus sign
// we will explain this later on in the tutorial
alert("Your user ID is: " + userId);
// we can also show the user their game level like the following
alert("Your current game level is: " + gameLevel);
// alternatively we can directly display 
// the contents of the variables by showing them inside an alert
alert(userId);
alert(gameLevel);

運行最後兩個代碼塊將提供以下輸出：

如何命名變量？

在命名變量時，您應該考慮某些規則和約定。 首先要考慮的是什麼字符可以用來命名你的變量？ 它們可以以數字開頭或結尾嗎？ 命名變量是否有一個共同的不言而喻的真理？ 讓我們回答所有這些以及更多。

不同的編程語言對變量命名有不同的約定。 在 JavaScript 中，約定是用所謂的“駝峰式”命名它們，就像這樣。 如果變量名只有一個單詞，那麼您只需將該單詞全部小寫即可。 如果變量名中有多個單詞，那麼您將第一個單詞全部小寫，並將所有後續單詞大寫，並且不帶任何空格或其他符號。 例如，如果我們正在製作遊戲，我們可以這樣命名變量：

// a single word variable
let strength = 50;
// a descriptive name that includes multiple words
let numberOfArrowsLeft = 145;

除了使用字母字符之外，我們還可以在變量名中使用數字、美元符號和下劃線符號。 請務必注意，變量名稱不能以數字開頭，但可以以數字結尾。

let some$$ = 100;
let another_$ = 20;
let car1 = "Tesla";

請注意，僅僅因為它是可能的，我們不想用不明確的名稱或符號來命名我們的變量。 這本身就是另一個話題。 命名變量時，約定是具有清晰和描述性的名稱。 例如，如果我們要命名一個變量來表示弓箭手包中還剩下多少支箭，我們應該使用一個描述性的名稱，例如我們在上面示例中使用的名稱。 如果我們只使用：

let x = 145;

這個名字不會告訴我們它擁有什麼價值。 甚至在編寫此代碼幾天后，我們還必須閱讀周圍的代碼以了解該變量可能意味著什麼。 這就是為什麼，無論是為了您自己在編寫代碼時的清晰性，還是為了您未來可能審查代碼的自己，習慣於以清晰和描述性的方式命名變量非常重要。 當您開始與其他人合作並向他們展示您的代碼時，這也將變得更加重要。

在這一點上，您可能會想：我們可以移動數據甚至可以使用變量來更改它，這真是太好了。 但是我們在這裡談論的是什麼數據？ 為什麼我們把部分放在引號裡，而有些部分不在引號裡？ 為了回答所有這些以及更多問題，讓我們看看 JavaScript 中的基本數據類型。

JavaScript 中的基本數據類型

不同的數據類型擅長做不同的事情。 在 JavaScript 中的基本數據類型教程中，我們將看到 JavaScript 中常用的最基本的 3 種數據類型。 在本系列的後面，我們將了解 JavaScript 中的其他數據類型。 一旦你學習了這前 3 種基本數據類型，學習其他數據類型就會容易得多。 我們將在本教程中看到的 3 種數據類型是：字符串、數字和布爾值。 事不宜遲，讓我們從第一個開始。

字符串

如果您從一開始就一直在學習本教程，那麼您已經使用了字符串數據類型！ 當我們寫一個警告說“你好，世界！” 那是使用字符串數據類型來存儲我們編寫的文本。 在 JavaScript 中有 3 種方式來表示字符串。 第一個是用雙引號將您的文本括起來。 第二個是用單引號將您的文本括起來。 第三個是用反引號包圍你的文本。 他們三個看起來都是這樣的：

const string1 = "Some text here.";
const string2 = 'Some text here.';
const string3 = `Some text here.`;

如您所見，帶有“反勾號”的那個看起來與單引號非常相似，但它略微寬鬆。 使用反引號創建字符串是 ES6 引入的一項功能，可以更輕鬆地處理文本數據。 與前兩個相比，它提供了多種優勢。 按照慣例，您可能會看到更頻繁地使用雙引號或反引號。 您可以在鍵盤上的數字 1 的左鍵上找到反勾號。

雙引號的使用看起來更熟悉，乍一看也更容易理解，但反引號總體上具有更多優勢。 在此示例中，所有 3 個都以相同的方式運行，因為它是一個簡單的示例。 要同時顯示所有三個，甚至在同一行中，我們可以做的一件事是寫下它們的名字並在它們之間使用加號，以一種將字符串相互添加的方式。

alert(string1 + string2 + string3);

如您所見，它們中的所有 3 個都在其中一個結束後立即顯示。 這是因為剛剛告訴解釋器將字符串相互添加。 如果我們想在它們之間添加空格，我們總是可以用另一個字符串添加那個空格。

alert(string1 + " " + string2 + " " + string3);

我們還可以通過在變量前面寫“typeof”來檢查變量的數據。 例如：

alert(typeof string1);

數字

當我們在 JavaScript 中處理數字時，我們通常使用“數字”數據類型。 這是最簡單的入門方法，幾乎沒有學習曲線。

輸入數字時，以數字類型表示。 如果我們將該數字分配給變量或常量，它們也將具有數字的數據類型。

let someNumber = 5;
const score = 90;
alert(typeof someNumber);
alert(typeof score);

除了我們擁有的常規數字之外，JavaScript 還提供了其他功能，可以幫助我們編寫更安全、更可預測的代碼。 例如，在 JavaScript 中，我們可以有一個叫做“Infinity”的東西，這正是它聽起來的樣子。 此外，它可以是正無窮大和負無窮大。 讓我們看一個例子。

// we can divide by zero and that does not throw an error
// instead it returns Inifinity
alert(13 / 0);

// similarly we can also get negative infinity
alert(-25 / 0);

正如您已經通過幾個示例看到的那樣，我們還可以對數字進行算術運算。 從基本的加法、減法、乘法、除法到更多編程特定的算術運算。 我們將在下一個教程中了解更多關於它們的信息。

布爾值

布爾值在編程中非常常見。 大多數時候我們不會顯式地使用它們的名字，但我們會在底層使用它們的簡單屬性。 一個布爾值可以有兩個值：“真”和“假”，它們就是它們聽起來的樣子。 很多時候，您會發現自己編寫代碼來根據比較結果進行比較和結論。

很多時候，這些比較源於現實生活場景，它們遵循一個簡單的邏輯。 燈是開還是關？ 外面下雨了嗎？ 你餓了嗎？ 這個數字比另一個數字大嗎？ 這一段比下一段長嗎？ 用戶是否在大屏幕上？

很多時候，您不僅希望對事物具有數字值或字符串值，而且實際上希望得到“是”或“否”的答案。 簡而言之，在那些時候，我們將使用布爾數據類型。

// is the first number bigger than the second one
alert(13 > 12);

// check the variable type
let isRainyOutside = true;
alert(typeof isRainyOutside);

運行此代碼將為我們提供以下輸出：

現在您了解了 JavaScript 中的變量和數據類型。 在下一篇博文中，我們將使用這些數據類型開始在我們的代碼中做出決策等等！

如果您喜歡我們的內容，別忘了加入 Facebook 社區！

作者：羅伯特·惠特尼

JavaScript 專家和指導 IT 部門的講師。 他的主要目標是通過教其他人如何在編碼時有效合作來提高團隊生產力。

查看所有帖子

10 篇博文中從初級到高級的 JavaScript 課程：

1. 如何開始用 JavaScript 編碼？
2. JavaScript 基礎
3. JavaScript 中的變量和不同的數據類型
4. 片段和控制結構
5. While 循環和 for 循環
6. Java 數組
7. JavaScript 函數
8. JavaScript 對象
9. JavaScript 方法等
10. JavaScript 課程總結