如何在 JavaScript 中使用運算符進行數學運算

簡介

數學運算是任何編程語言最基本和最通用的特性之一。在 JavaScript 中，數字經常用於常見任務，例如查找瀏覽器窗口大小尺寸、獲取貨幣交易的最終價格以及計算網站文檔中元素之間的距離。

雖然對數學有高深的理解並不是成為一名有能力的開發人員的先決條件，但了解 JavaScript 中可用的操作類型以及如何使用數學作為工具來完成實際任務非常重要。

與其他編程語言不同，JavaScript 只有一種數字數據類型；例如，整數（正整數或負整數）和浮點數（帶小數點的數字）之間沒有區別。

在本教程中，我們將介紹算術運算符、賦值運算符以及與 JavaScript 數字數據類型一起使用的運算順序。

算術運算符

算術運算符 是表示數學運算並返回值的符號。在等式 3 + 7 = 10 , + 是代表加法的語法。

JavaScript 有許多熟悉的基本數學運算符，以及一些特定於編程的其他運算符。

這是JavaScript算術運算符的參考表。

我們將在本文中詳細介紹這些運算符中的每一個。

加減法

加法 和減法 運算符在 JavaScript 中可用，可用於求數值的和與差。 JavaScript 內置計算器，可以直接在控制台進行數學運算。

我們可以對數字做一些簡單的加法，例如添加 10 和 20 , 使用加號 (+ )。

10 + 20

30

除了使用普通數字進行數學運算外，我們還可以將數字分配給變量並執行相同的計算。在這種情況下，我們會將數值分配給 x 和 y 並將總和放入 z .

// Assign values to x and y
let x = 10
let y = 20

// Add x and y and assign the sum to z
let z = x + y

console.log(z)

30

同樣，我們使用減號 (- ) 減去數字或表示數字的變量。

// Assign values to x and y
let x = 10
let y = 20

// Subtract x from y and assign the difference to z
let z = y - x

console.log(z)

10

我們還可以用負數和浮點數（小數）進行加減運算。

// Assign values to x and y
let x = -5.2
let y = 2.5

// Subtract y from x and assign the difference to z
let z = x - y

console.log(z)

-7.7

在 JavaScript 中需要注意和注意的一件有趣的事情是添加數字和字符串的結果。 1 + 1 應該等於 2 ，但這個方程會有意想不到的結果。

let x = 1 + '1'

console.log(x)
typeof x

11
'string'

JavaScript 不會將兩個數字相加，而是將整個語句轉換為字符串並將它們連接在一起。請務必注意 JavaScript 的動態類型特性，因為它可能會產生不希望的結果。

在 JavaScript 中使用加法或減法的一個常見原因是滾動到一個 id 減去固定導航欄的高度（以像素為單位）。

function scrollToId() {
  const navHeight = 60
  window.scrollTo(0, window.pageYOffset - navHeight)
}

window.addEventListener('hashchange', scrollToId)

在上面的例子中，點擊一個 id 會滾動到 id 上方 60 像素。

加法和減法是您將在 JavaScript 中使用的兩個最常見的數學方程式。

乘法和除法

乘法 和部門 JavaScript 中也有運算符，用於求數值的乘積和商。

一個星號（* ) 用於表示乘法運算符。

// Assign values to x and y
let x = 20
let y = 5

// Multiply x by y to get the product
let z = x * y

console.log(z)

100

應用銷售稅後，乘法可用於計算商品的價格。

const price = 26.5 // Price of item before tax
const taxRate = 0.082 // 8.2% tax rate

// Calculate total after tax to two decimal places
let totalPrice = price + price * taxRate
totalPrice.toFixed(2)

console.log('Total:', totalPrice)

Total: 28.67

斜線（/ ) 用於表示除法運算符。

// Assign values to x and y
let x = 20
let y = 5

// Divide y into x to get the quotient
let z = x / y

console.log(z)

4

除法在計算時間時特別有用，例如以分鐘為單位計算小時數，或者在計算測試中完成正確答案的百分比時。

模

一種不太熟悉的算術運算符是模（有時稱為模）運算符，它計算除法後商的餘數。模數用百分號表示（% )。

例如，我們知道 3 進入 9 正好三倍，沒有餘數。

9 % 3

0

我們可以使用模運算符來確定一個數字是偶數還是奇數，如下所示：

// Initialize function to test if a number is even
const isEven = (x) => {
  // If the remainder after dividing by two is 0, return true
  if (x % 2 === 0) {
    return true
  }
  // If the number is odd, return false
  return false
}

// Test the number
isEven(12)

true

在上面的例子中，12 平均分為 2 ，所以是偶數。

在編程中，模數經常與條件語句一起用於流控制。

求冪

求冪 是 JavaScript 中較新的運算符之一，它允許我們通過指數計算數字的冪。求冪的語法是連續兩個星號 (** )。

10 的五次方，即 10^5，這樣寫：

10 ** 5

100000

10 ** 5 表示與10相同 乘以 10 五次：

10 * 10 * 10 * 10 * 10

另一種寫法是使用 Math.pow() 方法。

Math.pow(10, 5)

100000

使用求冪運算符是求給定數的冪的一種簡潔方法，但與往常一樣，在方法和運算符之間進行選擇時，與代碼庫的風格保持一致很重要。

遞增和遞減

增量 和遞減 運算符將變量的數值加一或減一。它們由兩個加號（++ ) 或兩個減號 (-- )，並且經常與循環一起使用。

請注意，增量和減量運算符只能用於變量；嘗試在原始數字上使用它們會導致錯誤。

7++

Uncaught ReferenceError: Invalid left-hand side expression in postfix operation

遞增和遞減運算符可以分為前綴或後綴操作，具體取決於運算符是放在變量之前還是之後。

首先，我們可以使用 ++x 將前綴增量文本化 .

// Set a variable
let x = 7

// Use the prefix increment operation
let prefix = ++x

console.log(prefix)

8

x 的值 增加了一個。要查看差異，我們將使用 y++ 測試後綴增量 .

// Set a variable
let y = 7

// Use the prefix increment operation
let postfix = y++

console.log(postfix)

7

y 的值 在後綴操作中沒有增加。這是因為在計算表達式之前，該值不會增加。運行兩次操作將增加該值。

let y = 7

y++
y++

console.log(y)

8

遞增或遞減運算符最常出現在循環中。在這個 for 循環示例，我們將運行該操作十次，從 0 開始 ，並將值增加 1 每次迭代。

// Run a loop ten times
for (let i = 0; i < 10; i++) {
  console.log(i)
}

0
1
2
3
4
5
6
7
8
9

上面的代碼顯示了通過使用增量運算符實現的循環的迭代。

我們可以想到x++ 作為 x = x + 1 的簡寫 , 和 x-- 作為 x = x - 1 的簡寫 .

賦值運算符

最常用的運算符之一是 assignment 運算符，我們已經見過，用等號表示（= ）。我們使用 = 把右邊的值賦給左邊的變量。

// Assign 27 to age variable
let age = 27

除了標準的賦值運算符之外，JavaScript 還有複合賦值運算符 ，它結合了算術運算符和 = .

例如，加法運算符將從原始值開始，並添加一個新值。

// Assign 27 to age variable
let age = 27

age += 3

console.log(age)

30

在這種情況下，age += 3 和寫age = age + 3一樣 .

所有算術運算符都可以與賦值組合以創建複合賦值運算符。下面是 JavaScript 中賦值運算符的參考表。

複合賦值運算符通常與循環一起使用，類似於遞增和遞減，並且在方程需要重複或自動化時使用。

運算符優先級

雖然我們從左到右閱讀，但運算符將按優先順序進行計算，就像在常規數學中一樣。

在以下示例中，乘法的優先級高於加法，這決定了等式的結果。

// First multiply 3 by 5, then add 10
10 + 3 * 5

25

相反，如果我們想先運行加法運算，則應將其分組在括號中，始終具有最高優先級。

// First add 10 and 3, then multiply by 5
;(10 + 3) * 5

65

下面是 JavaScript 中算術運算符的運算符優先級參考表，從高到低。對於遞增和遞減，後綴的優先級高於前綴。

遞增/遞減、乘/除、加/減的優先級相同。

運算符優先級不僅包括算術運算符，還包括賦值運算符、邏輯運算符、條件運算符等。如需完整列表，請查看 Mozilla Developer Network (MDN) 上的運算符優先級。

結論

在本文中，我們介紹了算術運算符和語法，包括許多熟悉的數學運算符和一些特定於編程的運算符。

此外，我們還學習瞭如何結合算術和賦值來創建複合賦值運算符，以及 JavaScript 中的運算順序。