JS中基本包装类型说明需求文档

Posted 2020-09-24

为了便于操作基本类型值，ES还提供了三种特殊的引用类型，即（基本包装类型）：Number,String,Boolean。这三种类型与前面介绍的引用类型相似，但同时也拥有基本数据类型的一些特性。

平时经常看到人家代码里创建了一个字符串/数字类型，然后使用字符串/数字类型的一些方法，比如，split()、substring()等等，搞得我们误以为基本包装类型拥有的方法。其实，我们这种理解是错误的。实际上，当我们操作基本包装类型数据时，在后台就会悄悄的创建一个对应的基本包装类型的对象。因为是对象呀，所以我们才能够调用对象所拥有的方法。

举个例子：

var str = "hello,1024idea";
var strSub = str.substring(2,7);
console.log(strSub);//llo,1

执行上面代码，其实，在后台会执行如下步骤：

1. 创建基本包装类型的对象实例

2. 调用对象实例的函数

3. 销毁这个对象

如下所示：

var str = "hello,1024idea";
var strObj = new String(str);
var strObjSub = strObj.substring(2,7);
strObj.null;
console.log(strObjSub);//llo,1

引用类型与基本包装类型的区别：在于对象的生命周期。

使用new关键字创建的引用类型的实例，对象在当前作用域都存在。而基本包装类型自动创建的对象则在对象被调用的时刻存在，调用完毕后，就被销毁不存在了。

Object()构造函数，可以根据你传入的参数的类型，返回基本包装类型的实例。你传入字符串，则返回String类型的实例；传入数字，则返回Number类型的实例；传入布尔值，则返回Boolean类型实例。如：

var obj = new Object("hello,1024idea");
console.log(obj instanceof String);// true

注意：使用new关键字创建的构造函数与使用同名的转型函数的效果是不一样的。如：

// 构造函数与转型函数返回值的区别
var str = "1024";

var strObj = new String(str);
console.log(typeof strObj);//object

var strNum = Number(str);
console.log(typeof strNum);//number

这个例子中，变量strObj保存的是object类型，而变量strNum保存的是number类型。

一般情况下，是不建议手动的去创建基本包装类型的对象，因为这样经常造成的问题是，分不清自己是在处理基本包装类型还是引用类型。

 

---

Boolean类型

Boolean类型是布尔值创建的引用类型。创建Boolean类型,可以使用Boolean构造函数去创建，并传入true或者false参数。如：

var booleanObject = new Boolean(true);

注意：在布尔表达式中使用Boolean对象，我们可能会出错的一些地方，如：

var booleanObj = new Boolean(false);
var result = booleanObj && true;
console.log(result);

你觉得上面会打印出什么结果呢？大多数人可能会说是false,因为一真一假嘛，所以为false。但是，事实上结果是true，因为booleanObj是一个对象，在布尔表达式中，所有的对象都会被转换为true。记住：引用类型的布尔值，其实是对象。

当然，我们不推荐这么用（不推荐用引用类型的布尔值来判断布尔表达式）

                             爱创课堂--专业前端技术培训

                                                         年薪30万不是梦

---

Number 类型

Number类型是数字值创建的引用类型。创建Number类型,使用Number类型的构造函数，可以传递数字值参数，如：

var numberObj = new Number(1024);

这里介绍一个Number类型的一个方法：numberObj.toFixed();可以接受一个数值，表示保留的小数的个数（会自动四舍五入）。在平时项目中，我们经常要处理价格问题或者增长率问题，即保留多少为小数，用这个方法非常有效。

// Number 类型
var numberObj = new Number(1024.153);
console.log(numberObj.toFixed(2));//1024.15
console.log(numberObj.toFixed(1));//1024.2

 

---

String类型

String类型是字符串值创建的引用类型。

String类型创建的方式，使用String构造函数创建，可以传入字符串参数；如：

var stringOjb = new String(“hello,1024idea”);

String类型的每个实例都有一个length属性，用于计算字符串的长度（即字符串中包含多少个字符）。

字符方法：charAt()，charCodeAt(),接受一个数字参数，返回某个数字索引位置的字符或字符编码。

在ES5还定义了另一个访问字符串中某个字符的方法，在支持ES5的浏览器中，可以用方括号[]来访问。

// String类型
var str = "hello,1024idea";
console.log(str.charAt(4));//o
console.log(str.charCodeAt(4));//111
console.log(str[4]);//o

字符串的操作方法：concat(),可以将多个字符串连接起来。返回得到的新字符串。

var str1 = "hello,";
var str2 = str1.concat("1024idea");
console.log(str2);//hello,1024idea

其实，实践中，我们平时用的多的还是用“+”去拼接字符串。

split() 将字符串用某个分隔符分割，返回数组。你也可以传入一个参数，即“分隔符”。

slice(),substring(),substr().这三个是截取字符串的函数。其中，slice()跟substring()非常类似，第一个参数都是截取的起始位置，第二个参数是截取的终止位置；而substr()第一个参数是起始位置，第二个参数则是需要截取的长度。
这三个函数，都不改变原本的字符串，只是在原先的字符串上创建了一个副本。返回操作副本后的值。

字符串的位置方法：indexOf(),lastIndexOf();从索引0的位置开始查询子字符串/从最后一个索引开始查找字符串。如果找到，则返回子字符串的位置，如果没有找到，返回-1；第一个参数为要查找的子字符串，第二个参数 可选的，如果有，则表示从某个位置开始查找。

ES5中还定义了trim()方法，去除字符串的开头和结尾的所有空格。此外，对于firefox,safari,chrome的后面的一些版本中，还支持非标准的trimLeft()和trimRight()方法，用于删除字符串的开头空格或结尾空格。

字符串的大小写转换方法：toLowerCase(),toUpperCase();