JavaScript 变量可以通过 4 种方式声明:
自动地
使用 var
使用 let
使用 const
在第一个示例中,x
, y
和 z
是未声明的变量。
它们在第一次使用时会自动声明:
x = 5;
y = 6;
z = x + y;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are undeclared.</p>
<p>They are automatically declared when first used.</p>
<p id="demo"></p>
<script>
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
在使用变量之前始终声明变量被认为是良好的编程习惯。
从例子中你可以猜到:
x 存储值 5
y 存储值 6
z 存储值 11
var x = 5;
var y = 6;
var z = x + y;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
从 1995 年到 2015 年,所有 JavaScript 代码中都使用了 var
关键字。
let
和 const
关键字于 2015 年添加到 JavaScript 中。
var
关键字只能在为旧版浏览器编写的代码中使用。
let x = 5;
let y = 6;
let z = x + y;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const x = 5;
const y = 6;
const z = x + y;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
const x = 5;
const y = 6;
const z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, price1, price2, and total are variables.</p>
<p id="demo"></p>
<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>
两个变量 price1
和 price2
使用 const
关键字声明。
这些是恒定值,无法更改。
变量 total
使用 let
关键字声明。
值total
可以更改。
1. 始终声明变量
2. 如果不应更改值,请始终使用 const
3. 如果类型不应更改(数组和对象),请始终使用 const
4. 如果不能使用 const
,则仅使用 let
5. 仅当您必须支持旧浏览器时才使用 var
。
就像代数中一样,变量保存值:
let x = 5;
let y = 6;
就像代数中一样,变量在表达式中使用:
let z = x + y;
从上面的示例中,您可以猜测计算出的总数为 11。
变量是存储值的容器。
所有 JavaScript 变量 必须是 通过唯一名称识别。
这些唯一的名称称为标识符。
标识符可以是短名称(如 x 和 y)或更具有描述性的名称(年龄、总和、总成交量)。
构造变量名称(唯一标识符)的一般规则是:
名称可以包含字母、数字、下划线和美元符号。
名称必须以字母开头。
名称也可以以 $和 _ 开头(但我们不会在本教程中使用它)。
名称区分大小写(y 和 Y 是不同的变量)。
保留字(如 JavaScript 关键字)不能用作名称。
JavaScript 标识符区分大小写。
在 JavaScript 中,等号 (=
) 是一个“赋值”运算符,而不是一个 “等于”运算符。
这与代数不同。以下内容没有意义 代数:
x = x + 5
然而,在 JavaScript 中,它是完全有意义的:它将 x + 5 的值分配给 X。
(它计算 x + 5 的值并将结果放入 x 中。x 的值 增加 5。)
“等于”运算符的写法类似于 JavaScript 中的 ==
。
JavaScript 变量可以保存像 100 这样的数字和像“John 美国能源部”。
在编程中,文本值称为文本字符串。
JavaScript 可以处理多种类型的数据,但现在只考虑数字和字符串。
字符串写在双引号或单引号内。数字被写了 不带引号。
如果将数字放在引号中,它将被视为文本字符串。
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>
<p id="demo"></p>
<script>
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
在 JavaScript 中创建变量称为“声明”变量。
您可以使用 var
或 let
关键字声明 JavaScript 变量:
var carName;
let carName;
声明后,该变量没有值(从技术上讲,它是未定义
)。
要为变量分配值,请使用等号:
carName = "Volvo";
您还可以在声明变量时为其赋值:
let carName = "Volvo";
在下面的示例中,我们创建一个名为 carName
的变量并分配值 “沃尔沃”吧。
然后我们将值“输出”到 id="demo" 的 HTML 段落中:
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
在脚本开头声明所有变量是一种很好的编程习惯。
您可以在一条语句中声明多个变量。
开始声明 使用 let
并用逗号分隔变量:
let person = "John Doe", carName = "Volvo", price = 200;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
一个声明可以跨越多行:
let person = "John Doe",
carName = "Volvo",
price = 200;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
在计算机程序中,变量声明时通常不带值。价值 可以是必须计算的东西,或者将提供的东西 后来,就像用户输入一样。
没有值声明的变量将具有值 未定义。
执行此语句后,变量 carName 将具有值 undefined
:
let carName;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>A variable without a value has the value of:</p>
<p id="demo"></p>
<script>
let carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
如果您重新声明使用 var
声明的 JavaScript 变量,它不会丢失其值。
执行这些语句后,变量 carName
仍将具有值“Volvo”:
var carName = "Volvo";
var carName;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>If you re-declare a JavaScript variable, it will not lose its value.</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
您不能重新声明使用 let
或 const
声明的变量。
这是行不通的:
let carName = "Volvo";
let carName;
与代数一样,您可以使用 JavaScript 变量进行算术运算,使用 运算符,例如 =
和 +
:
let x = 5 + 2 + 3;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 5 + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
您还可以添加字符串,但字符串将被连接:
let x = "John" + " " + "Doe";
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "John" + " " + "Doe" is:</p>
<p id="demo"></p>
<script>
let x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
也试试这个:
let x = "5" + 2 + 3;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "5" + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
如果将数字放在引号中,则其余数字将被视为字符串并连接起来。
现在试试这个:
let x = 2 + 3 + "5";
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 2 + 3 + "5" is:</p>
<p id="demo"></p>
<script>
let x = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
由于 JavaScript 将美元符号视为字母,因此包含 $的标识符是有效的变量名称:
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The dollar sign is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let $$$ = 2;
let $myMoney = 5;
document.getElementById("demo").innerHTML = $$$ + $myMoney;
</script>
</body>
</html>
在 JavaScript 中使用美元符号并不常见, 但专业程序员经常使用它 作为 JavaScript 库中 main 函数的别名。
以 JavaScript 库 jQuery 为例,main 函数 $
用于选择 HTML 元素。 在 jQuery 中 $ ("p");
表示“选择所有 p 元素”。
由于 JavaScript 将下划线视为字母,因此包含 _ 的标识符是有效的变量名称:
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The underscore is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let _x = 2;
let _100 = 5;
document.getElementById("demo").innerHTML = _x + _100;
</script>
</body>
</html>
在 JavaScript 中使用下划线并不常见, 但专业程序员之间的一个约定是使用它作为别名 “私有(隐藏)”变量。