【ES6语言基础】· 数据类型 （1）

• 概览：6种原始类型（Undefined、Null、Boolean、Number、String、Symbol）+ 1种复杂类型（Object）
• ECMAScript不予许我们自己定义数据类型，但用它提供的7种数据类型已经可以表示所有的值

typeof运算符

• 用于确定数据类型
• 其后的括号可加可不加，由于它是一个运算符，所有还是建议不加括号的好🚩
• 特殊值"null"，被认为是一个对空对象的引用，因此"typeof(null)"返回的结果为"Object"
• 函数在ECMAScript中被认为是对象，但由于其有自身特殊的属性，为了与对象区别，typeof操作后返回"function"

Undefined类型

• 未定义的变量与未声明的变量🔴

1.该类型只有"undefined"一个值
2.用typeof操作符检测时，未定义的变量和未声明的变量都返回"undefined"，鉴于此，你应该在声明变量的同时进行初始化，这样就能区分了

<script> let name; console.log(typeof name); console.log(typeof sex); </script>

3.两者有一定区别：对未声明的变量，只能进行typeof操作，否则会报错

<script> let name; console.log(name); console.log(sex); </script>

4.undefined是一个假值，因此，可用于if等判断语句，而且一般不显示地定义值为"undefined"，undefined主要用于比较

Null类型

1.该类型也只有"null"一个值
2.null表示一个空对象指针，在初始化对象，但又没有明确的值要保存时，使用null来初始化是最佳选择
3.前面提到的undefined派生自null（先有null，后有undefined），因此两者表面上相等：

<script> alert(null == undefined); </script>

注意：等于操作符（==）会为了比较而转换操作数
4.null也是一个假值，可用于if等判断语句

Boolean类型

1.该类型有两个值：true和false（注意：两者都区分大小写），但true不等于1，false也不等于0
2.其他数据类型的值都有与布尔类型相等价的值，使用Boolean()转型函数可将其他类型转为布尔类型，具体转为false还是true要看具体的类型和值：

类型	转为true	转为false
String	非空字符串	空字符串
Boolean	true	false
Object	任意对象	null
Number	非零数值（包括无穷值）	0、NaN
Undefined	不存在（N/A）	undefined

注意：if等流程控制语句会自动执行其他类型到布尔类型的转换

Number类型

1.JavaScript中的Number类型采用IEEE 754格式来表示整数和浮点值（或称双精度值），不同的类型有不同格式的字面量格式，常见的有八进制和十六进制，八进制以"0"为前缀（这在严格模式下会报错，故使用"0O"作为前缀），如果字面量的值超出了进制所能表示的范围，前缀会被忽略，从而当成十进制处理，

<script> console.log(070); //56 console.log(0O70); //在严格模式下要用"0O"作为八进制的前缀 console.log(080); //80 </script>

十六进制以"0x"为前缀（区分大小写），后跟十六进制数字（不分大小写）

<script> console.log(0xA); //10 console.log(0x1f); //31 </script>

注意：在进行数学操作时，用八进制和十六进制创建的数都被视为十进制数
2.正零（+0）和负零（-0）是等同的
3.浮点值

• 浮点值必须包含小数点，小数点前面的数值不是必须的（但建议写上），小数点后面必须至少有一位小数
• 为节约存储空间，在小数点后面没有数字或是都是0时ECMAScript会将其自动给转为整数（Tip:存储浮点数的内存空间是整数值的两倍）

<script> console.log(0.1); //0.1 console.log(.1); //0.1 console.log(1.0); //1 console.log(.0); //0 </script>

• 一般使用科学计数法来表示非常大或非常小的数，当小数点后至少包含6个0时会被ECMAScript自动给转成科学计数法表示

<script> console.log(3.14e10); //31400000000 console.log(5e-4); //0.0005 console.log(0.0000000005); //5e-10 </script>

• 不要试图比较浮点数的大小：浮点数的精度最高可达17位小数，但在算数运算中却不如整数精确，0.1+0.2不等于0.3！（IEEE 754格式存在舍入错误），📚更多详情：https://juejin.cn/post/6844903934356619271

<script> console.log(0.1+0.2); //0.30000000000000004 console.log(0.15+0.15); //0.3 </script>

4.值的范围

• ECMAScript可以表示的最小值：Number.MIN_VALUE，可以表示的最大值：Number.MAX_VALUE，超出范围的值将被转为特殊值：Infinity（正无穷：Number.NEGATIVE_INFINITY、负无穷：Number.POSITIVE_INFINITY），这个特殊值不可用于计算

<script> console.log(Number.MIN_VALUE); //5e-324 console.log(Number.MAX_VALUE); //1.7976931348623157e+308 console.log(Number.NEGATIVE_INFINITY); //-Infinity console.log(Number.POSITIVE_INFINITY); //Infinity </script>

• 确定一个值是否超出了范围可以使用isFinite()

<script> console.log(isFinite(0.1)); //true console.log(isFinite(Number.POSITIVE_INFINITY)); //false </script>

5.NaN（Not a Number，不是数值）

• 用于表示本来应该返回数值的操作失败了
• 0、+0、-0相除会返回NaN

<script> console.log(0/0); //NaN console.log(+0/0); //NaN console.log(-0/0); //NaN console.log(+0/-0); //NaN </script>

• NaN与任何值都不相等，包括它自己
• 任何涉及NaN的操作始终返回NaN

<script> console.log(NaN == NaN); //false console.log(NaN/0); //NaN console.log(-0/NaN); //NaN console.log(0/NaN); //NaN </script>

• 判断一个参数是否“不是数值”（或者更进一步说：“是否可以转换为数值”）：isNaN()（注意：参数为对象时，会先调用对象的valueOf()确定返回的值是否可以转为数值，如果不能，会再调用toString()并测试返回其值，这一流程也是ECMAScript内置函数和操作符的工作方式）

<script> console.log(isNaN(NaN)); //true console.log(isNaN(10)); //false console.log(isNaN("10")); //false console.log(isNaN("blue")); //true console.log(isNaN(true)); //false </script>

6.数值转换

• Number()
• parseInt()
• parseFloat()

String类型

• 用于表示零个（空字符串）或多个16位Unicode字符序列，使用单引号、双引号或反引号标示

<script> let name = 'zk'; let firstName = "kai"; let lastName = `zhang`; </script>

• 字符字面量

1.用于表示一些非打印字符或有其他用途的字符

字面量	含义
\n	换行
\t	制表符
\b	退格
\r	回车
\f	换页
\	反斜杠
'	单引号
"	双引号
`	反引号
\xnn	以十六进制编码nn表示的字符
\unnnn	以十六进制编码nnnn表示的Unicode字符

2.字符字面量其实就是一个转义序列，它只被视为一个字符
3.字符串的长度（或者说字符串中16位字符的个数）用length属性获取

<script> let myName = " zhang kai \n"; console.log(myName.length); //12 </script>

• 字符串的特点

  1.字符串是不可变的，要修改必须先销毁原来的字符串，然后将替之以新的字符串（这些处理都在后台进行）
  2.转换为字符串
  String()
toString()

• 模板字面量

1.使用反引号标示字符串
2.会保留换行字符，可以跨行定义字符串，非常适合定义HTML模板

<script> let pageHTML = ` <div> <a href="#"><span>Jaxk</span></a> </div> `; let name = `firstName\nlastName`; alert(pageHTML); </script>

• 字符串插值

1.在一个连续定义中插入一个或多个值
2.原理：模板字面量并不是字符串，而是一种JavaScript句法表达式，它求值后得到的才是字符串，在其中插入的变量会从最近的作用域中取值
3.实现形式：在${}中使用一个JavaScript表达式

<script> let value = 5; let exponent = "second"; //字符串插值以前是这样实现的： let interpolatedString = value + 'to the ' + exponent + 'power is' + (value*value); console.log(interpolatedString); //现在使用模板字符串这样来实现： let interpolatedTemplateLiteral = `${value} to the ${exponent} power is ${value*value}`; console.log(interpolatedTemplateLiteral); </script>

4.嵌套的模板字符串无需转义

<script> alert(`hello ${`world`}!`); </script>

5.将表达式转换为字符串时会调用toString()

<script> let foo = {toString:()=>'world'}; alert(`hello,${foo}!`); </script>

6.插值表达式中可以调用函数和方法

<script> function capitalize(word){ return `${word[0].toUpperCase()}${word.slice(1)}`; } alert(`${capitalize('hello')},${capitalize('world')}!`); </script>

7.可以插入自己以前的值

<script> let value = ''; function Append(){ value = `${value}abc`; console.log(value); } console.log(Append()); console.log(Append()); console.log(Append()); console.log(Append()); console.log(Append()); </script>

8.模板字面量支持标签函数
使用标签函数可以自定义插值行为（如下所示），标签函数本身是一个普通的函数，通过前缀到模板字面量来应用自定义行为，它接受被插值标记（"${}"）分隔后的模板和对每个表达式求值的结果作为参数

<script> let a = 6; let b = 9; function simpleTag(strings,aValExpression,bValExpression,sumValExpression){ console.log(strings); console.log(aValExpression); console.log(bValExpression); console.log(sumValExpression); return 'foobar'; } let untaggedResult = `${a} + ${b} = ${a+b}`; let taggedResult = simpleTag`${a} + ${b} = ${a+b}`; console.log(untaggedResult); console.log(taggedResult); </script>

参数的数量通常都是可变的，因此使用剩余操作符（...）将它们收集到一个数组中，将上面的示例改写为：

<script> let a = 6; let b = 9; function simpleTag(strings,...expressions){ console.log(strings); for(const expression of expressions){ console.log(expression); } return 'foobar'; } let untaggedResult = `${a} + ${b} = ${a+b}`; let taggedResult = simpleTag`${a} + ${b} = ${a+b}`; console.log(untaggedResult); console.log(taggedResult); </script>

可以将上面示例中标签函数返回的结果拼接起来：
注：map()、join()的详细用法请参考相关文档

<script> let a = 6; let b = 9; function simpleTag(strings,...expressions){ return strings[0] + expressions.map((e,i) => `${e}${strings[i + 1]}`).join(''); } let untaggedResult = `${a} + ${b} = ${a+b}`; let taggedResult = simpleTag`${a} + ${b} = ${a+b}`; console.log(untaggedResult); console.log(taggedResult); </script>

9.原始字符串
使用标签函数String.raw可以获得模板字面量的原始内容：

<script> console.log(`\u00A9`); //© console.log(String.raw`\u00A9`); //\u00A9 console.log(`first line\nsecond line`); console.log(String.raw`first line\nsecond line`); console.log(`first line second line`); console.log(String.raw`first line second line`); //对实际的换行符不起作用 </script>

也可以通过标签函数的第一个参数（字符串数组）的.raw属性取得字符串的原始内容：

<script> function printRaw(strings){ console.log("Actual characters:"); for(const string of strings){ console.log(string); } console.log("Escaped characters:"); for(const rawString of strings.raw){ console.log(rawString); } } printRaw`\u00A9${'and'}\n`; </script>