JavaScript 中的基本數學運算 - 數字和運算子

好吧，也許不是。我們中有些人喜歡數學，有些人從小學乘法表和長除法開始就討厭數學，有些人則介於兩者之間。但我們都不能否認數學是生活中不可或缺的一部分，沒有它我們就走不了多遠。當我們學習用 JavaScript（或任何其他語言）程式設計時，這一點尤其重要——我們所做的大部分工作都依賴於處理數值資料、計算新值等等，所以你不會驚訝地發現 JavaScript 提供了一整套完整的數學函式。

本文只討論你現在需要了解的基本部分。

在程式設計中，即使是我們所熟知的簡陋的十進位制系統也比你想象的要複雜。我們使用不同的術語來描述不同型別的十進位制數，例如

• 整數是沒有小數部分的數字。它們可以是正數也可以是負數，例如 10、400 或 -5。
• 浮點數（浮點數）有小數點和小數位，例如 12.5 和 56.7786543。

我們甚至有不同的數字系統型別！十進位制是十進位制（意味著它在每個數字中使用 0-9），但我們還有：

• 二進位制——計算機的最低階語言；0 和 1。
• 八進位制——八進位制，每個數字中使用 0-7。
• 十六進位制——十六進位制，每個數字中使用 0-9 和 a-f。你可能在設定 CSS 中的顏色 時遇到過這些數字。

在你開始擔心你的大腦要融化之前，停下來！首先，在本課程中，我們將堅持使用十進位制數；你很少會遇到需要開始考慮其他型別的數字，即使有也是如此。

第二個好訊息是，與其他一些程式語言不同，JavaScript 只有一個用於數字的資料型別，包括整數和小數——你猜對了，就是 Number。這意味著無論你在 JavaScript 中處理的是哪種型別的數字，你都以完全相同的方式處理它們。

讓我們快速玩一些數字，以重新熟悉我們需要的基本語法。將下面列出的命令輸入你的 開發者工具 JavaScript 控制檯 中。

1. 首先，讓我們宣告幾個變數，並分別用一個整數和一個浮點數初始化它們，然後輸入變數名來檢查一切是否正常
   js

   const myInt = 5;
   const myFloat = 6.667;
   myInt;
   myFloat;
   

2. 數字值不帶引號輸入——在你繼續之前，嘗試宣告和初始化幾個包含數字的變數。
3. 現在讓我們檢查一下我們最初的兩個變數是否屬於相同的資料型別。JavaScript 中有一個名為 typeof 的運算子可以做到這一點。按照如下所示輸入下面兩行
   js

   typeof myInt;
   typeof myFloat;
   

   你應該在兩種情況下都得到 "number" 返回——這比不同的數字有不同的資料型別，我們需要用不同的方式處理它們，要容易得多。謝天謝地！

Number 物件，它表示你在 JavaScript 中使用的所有標準數字的例項，它有許多有用的方法可供你使用來運算元字。我們不會在本文中詳細介紹這些方法，因為我們希望把它作為一個簡單的介紹，現在只涵蓋最基本的東西；但是，當你閱讀完本模組幾次後，值得去檢視物件引用頁面，瞭解更多可用的內容。

例如，要將你的數字四捨五入到固定的小數位數，請使用 toFixed() 方法。將以下幾行輸入瀏覽器的 控制檯 中

const lotsOfDecimal = 1.766584958675746364;
lotsOfDecimal;
const twoDecimalPlaces = lotsOfDecimal.toFixed(2);
twoDecimalPlaces;

有時你可能會得到一個儲存為字串型別的數字，這使得很難用它進行計算。這種情況最常發生在資料輸入到 表單 輸入框時，並且 輸入型別為文字 時。有一個方法可以解決這個問題——將字串值傳遞到 Number() 建構函式中，返回該值的數字版本。

例如，嘗試將這些行輸入到你的控制檯中

let myNumber = "74";
myNumber += 3;

你最終得到的結果是 743，而不是 77，因為 myNumber 實際上被定義為一個字串。你可以透過輸入以下內容來測試這一點

typeof myNumber;

要修復計算，你可以這樣做

let myNumber = "74";
myNumber = Number(myNumber) + 3;

然後結果就是 77，與最初預期的一樣。

算術運算子用於在 JavaScript 中執行數學運算

我們可能不需要教你如何做基本的數學運算，但我們想測試你對語法方面的理解。嘗試將下面的例子輸入你的 開發者工具 JavaScript 控制檯 中，以熟悉語法。

1. 首先嚐試輸入一些簡單的例子，例如
   js

   10 + 7;
   9 * 8;
   60 % 3;
   

2. 你也可以嘗試在變數中宣告和初始化一些數字，然後嘗試在求和中使用它們——變數的行為與它們所儲存的值在求和方面完全相同。例如
   js

   const num1 = 10;
   const num2 = 50;
   9 * num1;
   num1 ** 3;
   num2 / num1;
   

3. 本節的最後一個，嘗試輸入一些更復雜的表示式，例如
   js

   5 + 10 * 3;
   (num2 % 9) * num1;
   num2 + num1 / 8 + 2;
   

這組計算的某些部分可能不會給你你預期的結果；下面的部分可能會給出答案，說明為什麼。

讓我們看一下上面的最後一個例子，假設 num2 的值為 50，num1 的值為 10（如上面最初所述）

num2 + num1 / 8 + 2;

作為一個普通人，你可能會讀成“50 加 10 等於 60”，然後是“8 加 2 等於 10”，最後是“60 除以 10 等於 6”。

但瀏覽器做的是“10 除以 8 等於 1.25”，然後是“50 加 1.25 加 2 等於 53.25”。

這是因為運算子優先順序——在計算表示式（在程式設計中稱為表示式）的結果時，某些運算子先於其他運算子應用。JavaScript 中的運算子優先順序與學校裡教授的數學課相同——乘法和除法總是先做，然後是加法和減法（計算總是從左到右進行）。

如果你想覆蓋運算子優先順序，你可以在你想先明確處理的部分周圍加上括號。所以要得到 6 的結果，我們可以這樣做

(num2 + num1) / (8 + 2);

試試看。

有時你可能想對一個數值變數的值反覆加一或減一。這可以透過使用增量（++）和減量（--）運算子方便地完成。我們在之前 第一次接觸 JavaScript 的文章中使用的 "猜數字" 遊戲中使用過 ++，當時我們在 guessCount 變數中加 1，以跟蹤使用者每次嘗試後還剩下多少次猜測。

guessCount++;

讓我們嘗試在你的控制檯中玩玩這些。首先，請注意，你不能直接將這些運算子應用於數字，這可能看起來很奇怪，但我們是在為變數分配一個新的更新值，而不是對值本身進行運算。以下將返回錯誤

3++;

所以，你只能增加現有的變數。試試這個

let num1 = 4;
num1++;

好的，第二個奇怪之處！當你這樣做時，你會看到返回的值是 4——這是因為瀏覽器返回當前值，然後增加變數。如果你再次返回變數值，你就可以看到它已經被增加了

num1;

-- 也是一樣：試試以下操作

let num2 = 6;
num2--;
num2;

賦值運算子是將值賦給變數的運算子。我們已經多次使用了最基本的 =——它將左邊的變數分配給右邊給定的值

let x = 3; // x contains the value 3
let y = 4; // y contains the value 4
x = y; // x now contains the same value y contains, 4

但還有一些更復雜的型別，它們提供了有用的快捷方式，使你的程式碼更簡潔、更高效。最常見的是下面列出的

嘗試在你的控制檯中輸入上面的幾個例子，以瞭解它們是如何工作的。在每種情況下，看看你是否能在輸入第二行之前猜出值是多少。

請注意，你可以在每個表示式的右邊使用其他變數，例如

let x = 3; // x contains the value 3
let y = 4; // y contains the value 4
x *= y; // x now contains the value 12

在本練習中，您將操作一些數字和運算子以更改框的大小。框是使用名為Canvas API的瀏覽器 API 繪製的。無需擔心它是如何工作的 - 現在只需關注數學運算。框的寬度和高度（以畫素為單位）由變數x和y定義，它們最初都設定為 50。

在新視窗中開啟

在上面的可編輯程式碼框中，有兩行用註釋標記，我們希望您更新它們，使用某些運算子和/或值在每種情況下使框增大/縮小到特定大小。讓我們嘗試以下操作

• 更改計算 x 的行，使框仍然為 50 畫素寬，但 50 使用數字 43 和 7 以及算術運算子計算。
• 更改計算 y 的行，使框為 75 畫素高，但 75 使用數字 25 和 3 以及算術運算子計算。
• 更改計算 x 的行，使框為 250 畫素寬，但 250 使用兩個數字和餘數（模）運算子計算。
• 更改計算 y 的行，使框為 150 畫素高，但 150 使用三個數字以及減法和除法運算子計算。
• 更改計算 x 的行，使框為 200 畫素寬，但 200 使用數字 4 和賦值運算子計算。
• 更改計算 y 的行，使框為 200 畫素高，但 200 使用數字 50 和 3、乘法運算子和加法賦值運算子計算。

不用擔心程式碼完全搞亂。您可以隨時按“重置”按鈕使程式碼恢復正常。回答完以上所有問題後，您可以隨意玩弄程式碼或建立自己的挑戰。

有時我們希望進行真/假測試，然後根據測試結果採取相應措施 - 為此，我們使用比較運算子。

如果您嘗試在控制檯中輸入其中一些值，您將看到它們都返回true/false值 - 我們在上一篇文章中提到的那些布林值。這些非常有用，因為它們允許我們在程式碼中做出決策，並且每次我們想要做出某種選擇時都會使用它們。例如，布林值可用於

• 根據功能是開啟還是關閉在按鈕上顯示正確的文字標籤
• 如果遊戲結束則顯示遊戲結束訊息，如果遊戲獲勝則顯示勝利訊息
• 根據當前的節日季顯示正確的季節性問候
• 根據選擇的縮放級別放大或縮小地圖

我們將在以後的文章中介紹如何編寫此類邏輯，以介紹條件語句。現在，讓我們看一下一個簡單的示例

<button>Start machine</button>
<p>The machine is stopped.</p>

const btn = document.querySelector("button");
const txt = document.querySelector("p");

btn.addEventListener("click", updateBtn);

function updateBtn() {
  if (btn.textContent === "Start machine") {
    btn.textContent = "Stop machine";
    txt.textContent = "The machine has started!";
  } else {
    btn.textContent = "Start machine";
    txt.textContent = "The machine is stopped.";
  }
}

在新視窗中開啟

您可以在updateBtn()函式中看到正在使用相等運算子。在這種情況下，我們不是測試兩個數學表示式是否具有相同的值 - 我們正在測試按鈕的文字內容是否包含某個字串 - 但它仍然是相同的原理。如果按鈕當前顯示“啟動機器”，當按下它時，我們將它的標籤更改為“停止機器”，並根據需要更新標籤。如果按鈕當前顯示“停止機器”，當按下它時，我們將切換回顯示。

您已閱讀完本文，但您是否能記住最重要的資訊？您可以在繼續之前找到一些額外的測試來驗證您是否保留了這些資訊 - 請參閱測試您的技能：數學。

在本文中，我們涵蓋了您目前需要了解的關於 JavaScript 中數字的基本資訊。您將在整個 JavaScript 學習過程中反覆看到數字，因此現在先將其弄清楚是個好主意。如果您是那些不喜歡數學的人，您可以從本章很短的事實中得到安慰。

在下一篇文章中，我們將探索文字以及 JavaScript 如何讓我們操作文字。

• 前一個
• 概述：JavaScript 入門
• 下一個