一篇文章帶你了解JavaScript變量
和其他可編程語言相同,JavaScript 也有“變量”的概念。“變量”可以認為是有名字的容器。將數(shù)據(jù)置于這些容器中,然后通過容器的名稱就可以知道數(shù)據(jù)的類型。
值得注意的是, JavaScript 編程過程中,必須先聲明一個變量,變量才能被使用。
一、認識 JavaScript變量
1. 是存儲數(shù)據(jù)的值的容器
- <!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. 就像代數(shù)一樣
- var price1 = 5;
- var price2 = 6;
- var total = price1 + price2;
上面案例中, price1, price2和total都是變量。

代碼解析:
在編程中,就像在代數(shù)中,我們使用變量(如價格)保存值,就像在代數(shù)中,在表達式中使用變量 (total = price1 + price2)。
二、JavaScript 標識符
1. 什么標識符?
所有JavaScript變量必須有唯一的名字,這些唯一的名字叫做標識符。
標識符可以是短名稱(如:x和y)或更多描述性名稱 (如age, sum, totalVolume)。
2. 標識符的命名規(guī)則
- 名稱可以包含字母、數(shù)字、下劃線和美元符號。必須以字母開頭。也用美元和_開頭。
- 名字是區(qū)分大小寫(Y和y是不同的變量),保留字(如JavaScript關鍵詞)不能作為名字。
注:JavaScript標識符是大小寫敏感的。
三、聲明(創(chuàng)建) JavaScript 變量
JavaScript中創(chuàng)建一個變量,被稱為“聲明的變量。
聲明一個JavaScript變量使用var關鍵字。
- var carName;
聲明之后,變量沒有值。(在編程中它有未定義的值)
若要為變量賦值,請使用等號。
- carName = "Volvo";
當你聲明變量時也可以為它指定一個值。
- var carName = "Volvo";
創(chuàng)建變量carName并賦值為"Volvo",然后“輸出”它的值到一個id="demo"的HTML段落內(nèi) 。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項目</title>
- </head>
- <body style="background-color: aqua;">
- <p>創(chuàng)建一個變量,給它賦值,并顯示它:</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。
執(zhí)行下面語句后,變量carName的值是 undefined。
- var carName;
四、JavaScript 算術運算
與代數(shù)一樣,你可以用JavaScript變量做算術,使用像=和+操作符。
HTML代碼:
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項目</title>
- </head>
- <body>
- <h1>JavaScript 變量</h1>
- <p>2 + 3 + "5"的結(jié)果是:</p>
- <p id="demo"></p>
- <script>
- var x = 2 + 3 + "5" /* 依次替換語句*/
- document.getElementById("demo").innerHTML = x;
- </script>
- </body>
- </html>
JSON(依次替換語句,實現(xiàn)效果)
- var x = 5 + 2 + 3;
1.您也可以相加字符串,但字符串將被連接。
- var x = "John" + " " + "Doe";
- var x = "5" + 2 + 3;
2.如果你把一個數(shù)字放在引號中,其余的數(shù)字將被視為字符串,并連接。
- var x = 2 + 3 + "5";
五、總結(jié)
本文基于JavaScript基礎,介紹了JavaScript中什么是變量,如何去聲明一個變量,以及JavaScript 算術運算的應用等等。使用html+JavaScript 的結(jié)合,效果圖的展示,能夠讓讀者更好的理解。