JavaScript的变量基础精选（超详细的学习分享！）-js教程-PHP中文网

JavaScript的变量基础精选（超详细的学习分享！）

WBOY

发布： 2021-10-12 17:38:16

原创

1975 人浏览过

本篇讲的是JavaScript的变量基础，先讲一下变量的基础概念和标量的数据类型，希望对大家有所帮助，一起加油！

JavaScript的变量基础精选（超详细的学习分享！）

变量

1.1 变量的概念：

变量是指程序中一个已经命名的储存单位，它的主要作用就是为数据操作提供存放信息的容器。变量可以看作是一个容纳数据的容器。

1.2 变量的声明与赋值

在JavaScript中，使用变量前需要先对其进行声明，声明变量是使用系统关键字var来进行的。在声明变量时也可以使用赋值号“=”对变量进行赋值，语法格式如下：

var 变量名 = 变量值

登录后复制

举例：

var  name ;  //声明一个变量
var name,city,like ; //声明多个变量，多个变量之间用英文状态下的逗号分开
var name = "阿泽"; //声明一个变量并且赋值

登录后复制

1.3 变量的命名规则

变量不能以数字开头，可以以字母或下划线开头。
JavaScript的变量名要区分大小写。
不能使用JavaScript中的关键字作为变量名。

2.变量的数据类型

变量的类型关键在于值的类型

2.1数值型

数值型的变量是可以进行数学运算的，它包括：整型、浮点型和NaN

例：

var a = 10;
var y = 0.1;
var x = 100;

登录后复制

其中较为特殊的是：NaN（not a number)不是一个数字。当将其它数据类型，转成数值型，转不过去，但程序又不能报错，这时将返回一个NaN的值。如下情况：

<html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script>
           var length = "500m";
           length = length*5;
           document.write(length);
        </script>
    </head>
    <body>
    </body>
</html>

登录后复制

现在我们想让一个东西的长度变成原来的5倍，一个字符串，是不能转换成有意义的数值的，只能转换成NaN
一个含纯数字的字符串，可以转成有意义的数值，可以修改length为纯数字的字符串，输出查看结果。

2.2字符型

单引号或者双引号引起来的一个字符串。

需要注意的是：单引号和双引号之间可以相互嵌套；单引号内只能嵌套双引号，双引号内只能嵌套单引号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    var name = "阿泽";
            var str = "我的名字是&#39;" +name+"&#39;"
            document.write(str)
    </script>
   </head>
<body>
    </body>
</html>

登录后复制

其中加号是字符串连接符，如果想在双引号内，再嵌套双引号，里面的双引号，一定要进行转义(\”)。JS中的转义字符是反斜杠（\）。

常用的转义字符有：\’、\”、\\、\r、\n等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    var name = "阿泽";
            var str =  "我的名字叫做\"" +name+"\""
            document.write(str)
    </script>
   </head>
<body>
    </body>
</html

登录后复制

2.3 布尔型

布尔型又称逻辑型。只有两个值：true(真)、false(假)。也就是两个状态，比如：灯的开关、性别等。

var a = true;
var b = false

登录后复制

布尔型常用if条件判断语句中，例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
     var a = 10;
           var b = 110;
           if(x>y){
               document.write(a+"比"+b+"大");
           }else{
               document.write(b+"比"+a+"大");
           }
    </script>
   </head>
<body>
    </body>
</html>

登录后复制

2.4 未定义型

未定义型的值只有一个undefined。

一个变量定义，未被赋值时，会返回为未定义型；一个对象，属性不存在时，也会返回为未定义型；

例：未赋值

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

登录后复制

2.5 空型

空型只有一个值：null。

当一个对象不存在时，将返回空型；如果你想清除一个变量的值的话，可以给赋一个null的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
      var x = null;
     var a = 100;
     var a = null ;
     document.write(x);
     document.write(a);
    </script>
   </head>
<body>
    </body>
</html>

登录后复制

【推荐学习：javascript高级教程】

以上是JavaScript的变量基础精选（超详细的学习分享！）的详细内容。更多信息请关注PHP中文网其他相关文章！