一篇文章帶你了解JavaScript變量

作者：前端進階者 2021-01-26 23:46:32

和其他可編程語言相同，JavaScript 也有“變量”的概念。“變量”可以認為是有名字的容器。將數據置于這些容器中，然后通過容器的名稱就可以知道數據的類型。

值得注意的是， JavaScript 編程過程中，必須先聲明一個變量，變量才能被使用。

一、認識 JavaScript變量

1. 是存儲數據的值的容器

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>項目</title> 
</head> 
<body> 
  <p>x，y和z是變量</p> 
  <p id="demo"></p> 
 
  <script> 
    var x = 5; 
    var y = 6; 
    var z = x + y; 
    document.getElementById("demo").innerHTML = z; 
</script> 
 
</body> 
</html>

2. 就像代數一樣

var price1 = 5; 
var price2 = 6; 
var total = price1 + price2;

上面案例中, price1, price2和total都是變量。

代碼解析：

在編程中，就像在代數中，我們使用變量(如價格)保存值，就像在代數中，在表達式中使用變量 (total = price1 + price2)。

二、JavaScript 標識符

1. 什么標識符?

所有JavaScript變量必須有唯一的名字，這些唯一的名字叫做標識符。

標識符可以是短名稱(如：x和y)或更多描述性名稱 (如age, sum, totalVolume)。

2. 標識符的命名規則

名稱可以包含字母、數字、下劃線和美元符號。必須以字母開頭。也用美元和_開頭。
名字是區分大小寫(Y和y是不同的變量)，保留字(如JavaScript關鍵詞)不能作為名字。

注：JavaScript標識符是大小寫敏感的。

三、聲明(創建) JavaScript 變量

JavaScript中創建一個變量，被稱為“聲明的變量。

聲明一個JavaScript變量使用var關鍵字。

var carName;

聲明之后，變量沒有值。(在編程中它有未定義的值)

若要為變量賦值，請使用等號。

carName = "Volvo";

當你聲明變量時也可以為它指定一個值。

var carName = "Volvo";

創建變量carName并賦值為"Volvo"，然后“輸出”它的值到一個id="demo"的HTML段落內。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>項目</title> 
</head> 
<body style="background-color: aqua;"> 
 
  <p>創建一個變量,給它賦值，并顯示它:</p> 
 
  <p id="demo"></p> 
 
  <script> 
    var carName = "Volvo"; 
    document.getElementById("demo").innerHTML = carName; 
</script> 
 
</body> 
</html>

1. 一語句，多變量

用var開始語句，用逗號分隔變量。

var person = "John Doe", carName = "Volvo", price = 200;

一個聲明可以跨越多行

var person = "John Doe", 
carName = "Volvo", 
price = 200;

2. 沒有值聲明的變量 , Value = undefined

變量常常被聲明為沒有值。值是必須計算的，或稍后將提供的東西，如用戶輸入沒有值聲明的變量將具有值 undefined。

執行下面語句后，變量carName的值是 undefined。

var carName;

四、JavaScript 算術運算

與代數一樣，你可以用JavaScript變量做算術，使用像=和+操作符。

HTML代碼：

<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>項目</title> 
</head> 
<body> 
 
  <h1>JavaScript 變量</h1> 
 
  <p>2 + 3 + "5"的結果是:</p> 
 
  <p id="demo"></p> 
 
  <script> 
    var x = 2 + 3 + "5" /* 依次替換語句*/ 
    document.getElementById("demo").innerHTML = x; 
</script> 
 
</body> 
</html>