当前位置：首页 > news >正文

【3.2JavaScript】JavaScript语法基础

news 2025/2/22 16:58:43

文章目录

- 1.变量与常量
- - 1.1变量的命名
  - 1.2变量的使用
  - 1.3常量
- 2.数据类型
- - 2.1数字
  - 2.2字符串
  - 2.3布尔值
  - 2.4未定义值
  - 2.5空值
- 3.运算符
- - 3.1算数运算符
  - - 3.1.1自增运算符
  - 3.2赋值运算符
  - 3.3比较运算符
  - 3.4逻辑运算符
  - 3.5条件运算符
- 4.类型转换
- - 4.1”字符串“转化为”数字“
  - - Number()方式
    - parseInt()方式
    - parseFloat()方式
  - 4.2”数字“转化为”字符串“
  - - 与空字符串相加
    - toString()
- 5.转义字符
- - 5.1 document.write() 中的换行
  - 5.2 alert() 中的换行
- 6.注释

1.变量与常量

1.1变量的命名

变量由字母、数字、下划线或 $* * 组成，并且第一个字母必须是 “ * * 字母、下划线或$ ”。
变量不能是系统关键字和保留字

1.2变量的使用

所有的 JavaScript 变量都是由 var 声明

var 变量名 = 值;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var a = 10;document.write(a);</script>
</head>
<body>
</body>
</html>

此外，一个 var 也可以同时声明多个变量，其中变量名之间必须用英文逗号（,）隔开，如下所示：

var a=10,b=20,c=30;

等价于

var a=10;
var b=20;
var c=30;

1.3常量

一般情况下，常量名全部大写

var DEBUG = 1;

2.数据类型

数据类型可以分为两种：一种是“基本数据类型”，另外一种是”引用数据类型“。其中，基本数据类型只有一个值，而引用数据类型可以含有多个值。

JavaScript中，基本数据类型有五种：数字、字符串、布尔值、未定义值、空值。而常见的引用数据类型有两种：数组、对象

2.1数字

JavaScript中的数字是不区分”整形（int）“和”浮点型（float）“，记住一句话：在JavaScript中，所有变量都是用var声明的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var n = 1001;document.write(n);</script>
</head>
<body>
</body>
</html>

2.2字符串

在JavaScript中，字符串都是用英文单引号或英文双引号（注意都是英文）括起来的。

1.单引号括起来的一个或多个字符

'我'
'我爱你'

2.双引号括起来的一个或多个字符

"我"
"我爱你"

3.单引号括起来的字符串中可以包含双引号

'我来自于"北京"'

3.双引号括起来的字符串中可以包含单引号

"我来自于'北京'"

举例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var str = '我爱你"中国"'document.write(str);</script>
</head>
<body>
</body>
</html>

注：单引号括起来的字符串中，不能含有单引号，只能含有双引号。同理，双引号括起来的字符串中，也不能含有双引号，只能含有单引号。（因为加入字符串中都是双引号，JavaScript判断不出来哪两个双引号是一对）

2.3布尔值

JavaScript中布尔值的类型只有两个：true 和 false

布尔值最大的用途就是：选择结构的条件判断

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var a = 10;var b = 20;if (a < b) {alert("a小于b");} else {alert("a大于b");}</script>
</head>
<body>
</body>
</html>

2.4未定义值

JavaScript中，未定义值指的是如果一个变量索然已经用 var 来声明了，但是并没有对这个变量进行赋值，此时该变量的值就是“未定义值”。其中，未定义值用 undefined 表示。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var a;document.write(a);</script>
</head>
<body>
</body>
</html>

2.5空值

数字、字符串等数据在定义时，系统都会分配一定的内存空间。在 JavaScript 中，空值用 null 表示。如果一个变量的值等于 null，如 var n=null;，则表示系统没有给这个变量 n 分配内存空间

null 和 undefined 非常相似，但是也有一定的区别，这里我们不需要深入

3.运算符

常见的运算符有以下五种：

算术运算符
赋值运算符
比较运算符
逻辑运算符
条件运算符

3.1算数运算符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var a = 10 + 4;var b = "Web 前端开发" + "工程师";<!-- 字符串和数字相加，数字会转换为字符串 -->var c = "今年是" + 2025 + "年";document.write(a + "<br>" + b + "<br>" + c);</script>
</head>
<body>
</body>
</html>

3.1.1自增运算符

i++ 指的是在使用 i 之后，再让 i 的值加上 1

i = 1;
j = i++;

上面的执行结果为：i =2 ，j = 1

++i 指的是在使用 i 之前，先让 i 的值加上 1

i = 1;
j = ++i;

上面的执行结果为：i = 2，j = 2

自减运算符和自增运算符相似

3.2赋值运算符

3.3比较运算符

在 JavaScript 中，比较运算符用于将运算符两边的值或表达式进行比较，如果比较结果是对的，则返回 true；如果比较结果是错的，则返回 false。

注：等号（=）是赋值运算符，用于将右边的值赋值给左边的变量。双等号（==）是比较运算符，用于比较左右两边的值是否相等。

3.4逻辑运算符

3.5条件运算符

条件运算符也叫三目运算符

var a = 条件 ? 表达式1 : 表达式2;

当条件为 true 时，选择的是“表达式1”，也就是 var a = 表达式1; ，当条件为 false 时，我们选择的是 ”表达式2“，也就是var a = 表达式2;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var result = (2 > 1) ? '2大' : '1大';document.write(result);</script>
</head>
<body>
</body>
</html>

4.类型转换

隐式类型转换
显示类型转换

隐式类型转换，指的是 JavaScript 自动进行的类型转换。显示类型转换，指的是需要我们手动用代码强制进行的类型转换。

本节重点介绍一下显示类型转化的两种情况。

4.1”字符串“转化为”数字“

在 JavaScript 中，要将字符串转化为数字，可以使用两种方式。

Number()
parseInt() 和 parseFloat();

“parse” 在英文里有 “解析、剖析” 的意思，在编程语境中，“parse” 通常代表把一种格式的数据转换为另一种更便于程序处理的格式

Number() 方法可以将任何 ”数字型字符串“ 转化为数字。类似于”123“、”3.1415“ 等这些只有数字的字符串就是 ”数字型字符串“。而 ”hao123“、”100px“等就不是。

准确来说，parseInt() 和 parseFloat() 是提取 ”首字母为数字的任意字符串“ 中的数字，其中 parseInt() 提取的是整数部分，parseFloat() 不仅会提取整数部分，还会提取小数部分

Number()方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>document.write("Number(\"123\"): " + Number("123") + "<br>");document.write("Number(\"123.456\"): " + Number("123.456") + "<br>");document.write("Number(\"123.456px\"): " + Number("123.456px") + "<br>");document.write("Number(\"123px456\"): " + Number("123px456") + "<br>");</script>
</head>
<body>
</body>
</html>

注：NaN : Not a Number(非数字)

parseInt()方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>document.write("Number(\"123\"): " + parseInt("123") + "<br>");document.write("Number(\"123.456\"): " + parseInt("123.456") + "<br>");document.write("Number(\"123.456px\"): " + parseInt("123.456px") + "<br>");document.write("Number(\"px456\"): " + parseInt("px456") + "<br>");document.write("Number(\"+123\"): " + parseInt("+123") + "<br>");document.write("Number(\"-123\"): " + parseInt("-123") + "<br>");</script>
</head>
<body>
</body>
</html>

通过这个例子可以看出，parseInt() 会从左到右进行判断，如果第一个字符是数字，则继续判断，知道出现非数字为止（小数点也是非数字）；如果第一个字符是非数字，则直接返回 NaN（因为加号和减号在数学上其实就是表示一个数的正和负，所以 parseInt() 可以接受第一个字符是加号或减号。同样，parseFloat() 也有这个特点）

parseFloat()方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>document.write("Number(\"123\"): " + parseFloat("123") + "<br>");document.write("Number(\"123.456\"): " + parseFloat("123.456") + "<br>");document.write("Number(\"123.456px\"): " + parseFloat("123.456px") + "<br>");document.write("Number(\"px456\"): " + parseFloat("px456") + "<br>");document.write("Number(\"+123\"): " + parseFloat("+123") + "<br>");document.write("Number(\"-123\"): " + parseFloat("-123") + "<br>");</script>
</head>
<body>
</body>
</html>

4.2”数字“转化为”字符串“

与空字符串相加
toString()

与空字符串相加

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var a = 2025 + ""var b = a + 10000;document.write(b);</script>
</head>
<body>
</body>
</html>

toString()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var a = 2025var b = a.toString() + 10000;document.write(b);</script>
</head>
<body>
</body>
</html>

5.转义字符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>document.write("我来自于\"北京\"");</script>
</head>
<body>
</body>
</html>

此外需要特别说明一下，对于字符串的换行，有两种情况。

如果是在 document.write() 中换行，则应该用<br/>
如果是在 alert() 中换行，则应该用 \n

5.1 document.write() 中的换行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>document.write("我来自于<br/>北京");</script>
</head>
<body>
</body>
</html>

5.2 alert() 中的换行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>alert("我来自于\n北京");</script>
</head>
<body>
</body>
</html>

6.注释

注意：在HTML、CSS 和 JavaScript 中的注释是不一样的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/* CSS注释 */</style><script>// 单行JavaScript注释/*多行JavaScript注释多行JavaScript注释多行JavaScript注释*/</script>
</head>
<body><!-- HTML注释 -->
</body>
</html>