★文章内容学习来源：拉勾教育大前端就业集训营

本篇学习目标：
1.掌握常见的字面量写法；
2.掌握变量的用法；
3.理解数据类型的含义和转换方法。

一、字面量

1.概念

• 字面量（literal）是用于表达一个固定值的表示法，又叫常量。
• 通俗的理解，字面就是所见即所得JS程序执行到代码中的字面量，会立即知道它是什么
  类型的数据，值是多少。
• 可以用于表示固定值，比如：数字、字符串、undefined、布尔类型的字面值等。

2.数字字面量

• 这里的数字就是数学意义上的数字。
• 数字字面量区分：整数字面量、浮点数字面量（小数）、特殊值。
• 书写时直接书写字面量，不需要添加任何辅助符号。

(1)整数

• 整数字面量写法区分进制。

• 整数可以被表示成十进制（基数为10）、八进制（基数为8）以及十六进制（基数为16）。

• 在进行算术计算时或者参与程序，所有八进制和十六进制的数字都会被转换成十进制。

• 十进制是最基本的数值字面量格式，可以直接在代码中输入。

<script> console.log("十进制"); console.log(10); console.log(-10); console.log(100); </script>

• 八进制字面值必须带前导0或0O或0o ，八进制整数只能包括数字0-7。
• 特殊的：八进制中，如果以0开头，每个位数上有超过0-7之间的数字出现，也就是8或9，强制忽视前面的0，直接将后面数字当做十进制**。**

<script> console.log("八进制——以0开头"); console.log(01); console.log(010); console.log(0100); console.log(01000); console.log("八进制——以0O开头"); console.log(0O10); console.log("八进制——以0o开头"); console.log(0o10); console.log("八进制——以0开头后面数字却超过了7"); console.log(09); </script>

• 十六进制的前缀是0x或0X，后面可以包含数字（0-9）和字母a~f或A~F。

<script> console.log("十六进制——以0x开头"); console.log(0x1); console.log(0x10); console.log(0x100); console.log(0x1000); console.log("十六进制——以0X开头"); console.log(0X1000); </script>

(2)浮点数

• 就是数学概念中的小数。
• 包含：整数、小数点、小数部分。
• 浮点数不区分进制，所有的浮点数都是十进制下的数字。
• 注意：如果浮点数是大于0 小于1的，可以省略小数点前面的0不写。
• 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。
• 例如：0.1 + 0.2; 结果不是 0.3，而是：0.30000000000000004；

<script> console.log("浮点数"); console.log(0.23); console.log(.23); console.log(1.0e4); console.log(2.2e-4); </script>

(3)Infinity

• Infinity：无穷的意思，Infinity 本身就是一个数字。
• 由于计算机计算能力有限，如果高于最大计算值直接显示为正无穷 Infinity，如果低于最小
  计算值直接显示为 -Infinity；
• 无穷大：Infinity；
• 无穷小：-Infinity；
• 最小值：Number.MIN_VALUE，这个值为： 5e-324；
• 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308。

<script> console.log("Infinity类数据"); console.log("最小的数是"+Number.MIN_VALUE); console.log("最大的数是"+Number.MAX_VALUE); console.log(-5e789); </script>

(4)NaN

• NaN：not a number，表示不是一个正常的数，但是还是一个 Number 类型的数字。
• 这个数字没办法用前面的表示方法表示。
• NaN 与任何值都不相等，包括他本身。
• isNaN(): 判断一个数据是不是一个NaN。(true:是NaN / false:不是NaN)

<script> console.log("NaN类数据"); console.log(0/0); console.log(isNaN(0/0)); console.log(isNaN(5)); </script>

3.字符串字面量

(1)含义及注意事项

• 字符串是由任意个数的有序或无序的字符组成的串，类似人类的语言，在 JS 中有自己特殊的写法。
• 组成：字母、汉字、特殊符号、空白等。
• 字符串字面量写法：是用一对单引号或双引号及引号内的字符构成；
• 引号中间的字符可以有任意多个，也可以是没有字符的空字符串。
• 注意：字符串中如果字符包含了双引号，则其外部应该由单引号标示，反之相同。

<script> console.log("这是一个字符串"); console.log("123"); console.log("hello"); console.log(" "); console.log('happy'); console.log("你知道'happy'这个单词什么意思吗"); </script>

(2)转义符号 \

• 字符串中，有一些特殊功能的字符不能直接书写，还有一些特殊效果不能直接书写。
• 这时，可以使用转义符 \ 对这些字符进行转义。
• 在字符串中可以使用转义符 \ 加普通字母，替代一些特殊字符:
  \n 换行
  \t Tab制表(缩进)

<script> console.log("这是一段话，有换行的\n你看"); console.log("这个缩进\t\t\t有什么效果呢？"); </script>

• 字符串中可以使用转义符 \ 将特殊功能字符变为普通字符。
  \' 单引号
  \" 双引号
  \\ 反斜杠

<script> console.log("转义符号 \\"); console.log("单引号\'"); console.log("双引号\""); </script>

二、变量

1.含义

(1)是什么

• 变量（variables） 是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据。
• 变量相当于一个容器，内部可以存储任意类型的数据;
• 使用变量时，用的是内部存储的数据。

(2)为什么用

• 使用变量可以方便的获取或者修改内存中的数据。

2.声明/创建/定义变量

(1)介绍

• 变量声明又叫做定义变量、创建变量。
• 变量在使用前，必须先有定义，如果没有定义，会出现引用错误。

(2)定义方法

• 使用一个 var 的关键字进行定义，后面必须加一个空格，空格后面自定义变量名。

3.命名规则规范

(1) 规则

• 必须遵守的，不遵守会报错：
• 由字母、数字、下划线、$ 符号组成，不能以数字开头。
• 字母区分大小写，A 和 a 表示不同。
• 不能是关键字和保留字；
• 关键字指的是JS中有特殊功能的小词语，比如 var、for 等；
• 保留字指的是现在没有特殊功能，但是将来新语法中有可能作为关键字使用。

(3)规范

• 建议遵守的，不遵守不会报错：
• 变量名有意义：
  遵守驼峰命名法。多个单词组合而成的，第一个单词首字母小写，后面单词的首字母需要大写。例如：userName、userPassword。

4.赋值

(1)介绍

• 变量定义之后，初始时没有进行赋值，内部有一个默认存储的值叫 undefined（未定义），表示变量内部未赋值，可以存储数据了。
• 变量赋值的方式：通过等号 = 赋值，等号右边的值赋值给左边的变量。
• 注意：书写时，等号 = 两侧习惯书写一个空格。

<script> //定义变量 var firstVariable; //赋值 firstVariable = 4; //调用 console.log(firstVariable); </script>

(2)变量赋值的几种情况：

①变量赋值时：内部可以存储任意类型的数据，甚至是一个变量;

• 赋值过程中，等号右侧的变量使用的是存储的数据;
• 注意：变量参与赋值过程时，等号左变右不变;
• 等号左侧会被赋值，将来值发生变化，等号右侧的变量使用内部的值参与运算，自身不会发生变化。

<script> //变量赋值的几种情况①赋值数据可以是任何内容，甚至是一个变量 var a; a = 3; var b; b = a+3; console.log("a的值是"+a); console.log("b的值是"+b); </script>

②变量的赋初值过程可以与声明过程写在一起;

<script> //变量赋值的几种情况②变量声明同时赋值 var a = "hello"; console.log(a); </script>

③变量一次定义，可以多次等号赋值;

• 变量内部的值，可以通过多次赋值的方法，进行更改。

<script> //变量赋值的几种情况③一次定义，可多次赋值更改 var c = 4; c = 8; console.log(c); c = "再次赋值更改为这个字符串"; console.log(c); </script>

④一个关键字 var 可以同时定义多个变量，并且都赋初值。

• 多个变量之间用逗号进行分隔，最后一个变量后面使用分号进行结尾。

<script> //变量赋值的几种情况④一个关键字var可以定义多个变量，并且可以都赋初值 var d = 4, e = 5, f = 6, g = 7; console.log(d); console.log(e); console.log(f); console.log(g); </script>

三、数据类型

• JavaScript 中的值，无论是字面量还是变量，都有明确的类型。

1.简单数据类型

• 另外，还有复杂数据类型 Object 对象类型，后期会详细介绍。

(1)Number

• 数字类型，不区分整数、浮点数、特殊值(Infinity，NaN)，都是 Number 类型。

(2)string

• 所有的字符串都是 String 类型。

(3)Boolean

• Boolean 字面量： 只有 true 和 false 两个字面量的值，必须是小写字母。
• 计算机内部存储：true为1，false为0。

(4)undefined

• undefined 本身是一个数据，表示未定义。
• 变量只声明的时候，值默认是 undefined。

(5)null

• null 本身是一个数据。
• 从逻辑角度，null 值表示一个空对象指针，object。
• 如果定义的变量准备在将来用于保存对象，最好将该变量初始化为 null。

2.检测数据类型

(1)检测方式

• 推荐使用： typeof 的方法（函数）进行数据检测，在 typeof后面加小括号 () 执行，将要检测的数据放在小括号内部。

<script> //检测数据类型typeof()函数 console.log(typeof(1)); console.log(typeof(NaN)); console.log(typeof(Infinity)); console.log(typeof("1")); console.log(typeof("文字")); console.log(typeof('什么类型呢')); console.log(typeof(true)); console.log(typeof(null)); console.log(typeof(undefined)); </script>

• 也可以将 typeof 作为关键字，后面加空格，空格后添加数据的方式，检测数据。但是不常用。

<script> //检测数据类型typeof作为关键字，后面加空格 console.log(typeof 78); console.log(typeof (78+89)); //不常用，因为如果是如下情况，这时候的加号成了连接符 console.log(typeof 78+89); </script>
</script>

(2)变量的数据类型

• JavaScript 语言是一门动态类型的语言，变量并没有一个单独的数据类型，而是会随着内部存储数据的变化，数据类型也会发生变化。
• 变量的数据类型，与内部存储数据有关。
• 将来使用变量时，需要知道内部存储的数据是什么类型，避免程序出错。

<script> //变量的数据类型 var a = 7; console.log(typeof(a)); var a = "字符串"; console.log(typeof(a)); </script>

(3)提示

• 如何使用谷歌浏览器控制台，快速的查看数据类型？
• 数值类型是蓝色的，字符串的颜色是黑色的，布尔类型也是蓝色的，undefined和null是灰色的。
  

3.数据类型转换

• 不同的数据类型之间，可以进行互相转换。

(1)转成字符串

①数据.toString() 方法

<script> //转为字符串①数据.toString() 方法 //只有boolean类型可以用这个方法转为字符串 console.log(true);//boolean类型，与下方做个对比 console.log(true.toString()); </script>

② String(数据) 方法

• 所有数据类型的数据都可用这个方法转为String类型；
• 特别是有些值没有办法用toString()方法，这个时候可以使用String()。比如：undefined和null。

<script> //转为字符串②String(数据) 方法 console.log(78) //number类型，与下方做个对比 console.log(String(78)); console.log(undefined); //undefined类型，与下方做个对比 console.log(String(undefined)); console.log(null); //null类型，与下方做个对比 console.log(String(null)); console.log(false);//boolean类型，与下方做个对比 console.log(String(false)); </script>

③+ 号拼接字符串方式

• num + ""，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串。
• 注意 +加号的特殊性：
  两边只要有一个是字符串，那么 + 就是字符串拼接功能
  两边如果都是数字，那么就是算术功能。

<script> //转为字符串③ + 号拼接字符串方式 //只要加号一边是String类型，加号就是拼接功能，会最终输出String类型 console.log(23);//number类型，与下方做个对比 console.log(""+23); console.log(false);//boolean类型，与下方做个对比 console.log(""+false); console.log(null); //null类型，与下方做个对比 console.log(""+null); console.log(undefined); //undefined类型，与下方做个对比 console.log(""+undefined); console.log(23);//number类型，与下方做个对比 console.log("字符串"+23); //注意：如果两边都是数字，就成了算术功能 console.log(23);//number类型 console.log(23+5);//还是number类型 </script>

(2)转成数值

① Number(数据) 方法

• 转型函数Number();
• 可以用于任何数据类型，将其他数据类型转为数字。

<script> //当括号中数据为Sring——纯数字字符串，会转为对应数字 console.log(Number("589")); //当括号中数据为Sring——空字符串or空白字符串，会转为0 console.log(Number("")); console.log(Number(" ")); //当括号中数据为Sring——非空非纯数字字符串，会转为NaN console.log(Number("三位数589")); console.log(Number("五的字符串")); </script>

<script> //当括号中数据为Boolean——false，会转成0 console.log(Number(false)); //当括号中数据为Boolean——true，会转成1  console.log(Number(true)); </script>

<script> //当括号中数据为undefined，会转成NaN console.log(Number(undefined)); //当括号中数据为null，会转成0 console.log(Number(null)); </script>

②parseInt() 方法

• 字符串 转 整数方法；
• 作用：第一，对浮点数进行取整操作；第二，将字符串转为整数数字。
  ①对数字取整功能，直接舍弃小数部分，只保留整数。
  ②将字符串转为整数数字，也包含取整功能。
• 字符串中，必须是纯数字字符串或者数字字符开头的字符串，才能转换为正常数字,且只取整数部分;
• 字符串中，如果不是数字打头的字符串，会转换为 NaN。

<script> //转换为数值类型②parseInt()方法 //对数字取整，舍弃小数部分，只保留整数 console.log(parseInt(598.2333)); //对纯数字字符串或以数字开头的字符串取整 console.log(parseInt("98.2333")); console.log(parseInt("58.2333是一个小数")); //非纯数字开头的字符串会被转为NaN console.log(parseInt("这是一个小数598.2333")); </script>

③parseFloat() 方法

• 字符串 转 浮点数方法；
• 作用：将字符串转为浮点数数字。
• 要求：满足浮点数数字字符必须在字符串开始，如果不在开始返回值都是NaN。

<script> //转换为数值类型③parseFloat()方法 //对纯数字字符串或以数字开头的字符串转为浮点数数字 console.log(parseFloat("45.5")); console.log(parseFloat("89.6是小数字符串")); //非纯数字开头的字符串会被转为NaN console.log(parseFloat("这是一个小数10.7")); </script>

④实际应用

• 工作中，利用变量接收 prompt() 语句返回的用户输入的数据，检测数据类型后，得到的是字符串类型。
• 如果想要获取的是数字类型的数据，则需要先将得到的字符串转数字，避免出现字符串参与数学加法运算等。

<script> //实际工作中 var num = prompt("请输入10以内的数字"); alert("您输入的是"+typeof(num)+"数据类型"); num = parseInt(num); var s = num + 5; alert("转换为整数数字类型后，与'5'相加的结果是"+ s); </script>

• 可以写得再简便些：

<script> //化简写法 var num = parseInt(prompt("请输入10以内的数字")); var s = 5 + num; alert("转换为整数数字类型后，与'5'相加的结果是"+ s); </script>

(3)转成布尔

① Boolean(数据) 方法

• 转型函数 Boolean() 可以用于任何数据类型，将其他数据类型转为布尔类型的值。

<script> //转换为Boolean类型 //转为false console.log(Boolean(NaN)); console.log(Boolean(0)); console.log(Boolean("")); console.log(Boolean(null)); console.log(Boolean(undefined)); //转为true console.log(Boolean(" "));//其中是空格也可以 console.log(Boolean("非空字符串")); console.log(Boolean(589));//非NaN的数字，非0 </script>

下篇继续：【66】JS(3)——操作符