JS | JavaScript中的基本包装类型有哪些？

 

一、基本包装类型

在 ES 中，数据类型分为基本数据类型和引用数据类型。

而基本包装类型，严格来说不属于上面两个中的任意一个，但是又和这两种类型息息相关。

基本数据类型和引用类型这两个类型其中一个很明显的区别是，引用类型有自己内置的方法，也可以自定义其他方法用来操作数据，而基本数据类型不能像引用类型那样有自己的内置方法对数据进行更多的操作。

但基本数据类型真的没有吗？对于部分基本类型来说确实是这样的。

按照最新 ES 标准定义，基本数据类型(primitive value)包括6个，分别为 Undefined, Null, Boolean, Number, Symbol, String。

为了便于操作基本类型值，ECMAScript提供了3个特殊引用类型（基本包装类型）：Boolean, Number, String。

基本包装类型和其他引用类型一样，拥有内置的方法可以对数据进行额外操作。

每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型对象，从而可以调用一些方法操作这些数据。

比如：

var str = 'test';
//substring(start,end) 表示截取从start到end的字符串，不包括end。
var str2 = str.substring(2);
console.log(str2); //st

上面 str 变量存储的值是一个字符串，‘test’ 字符串是基本数据类型 String 类型的值。然而它调用了substring方法，并将结果保存在了str2中。

为什么它不是对象却能调用对象的方法呢？

★ 因为在执行第二行代码时，JS会自动进行下面的步骤：

1、自动创建 String 类型的一个实例（和基本类型的值不同，这个实例就是一个基本包装类型的对象）

var str = new String()

2、调用实例（对象）上指定的方法

var str2 = str.substring()

3、销毁这个实例

str = null

经过上面的加工后，基本字符串变的跟对象一样，上面这三个步骤也适用于Boolean、Number类型。

所以，虽然基本类型的值没有方法可以调用，但是后台临时创建的构造函数实例（也就是对象）上有内置方法可以让我们对值进行操作，因此，这样我们就可以对字符串、数值、布尔值这三种基本数据类型的数据进行更多操作，这也是基本包装类型的主要用处：便于操作基本类型值。

❤ JS什么时候会自动创建一个对应的基本包装类型对象呢？

基本包装类型的实例会在我们调用一些基本类型变量方法或属性的时候被自动创建：

var str = 'yezi'
console.log(str.length) // 4

❤ 引用类型和基本包装类有什么不同呢？

最主要的区别就是对象的生存期。

● 引用类型：使用new操作符创建的引用类型实例，在执行流离开当前作用域之前一直都保存在内存中
● 基本包装类型：只存在一行代码的执行瞬间，然后立即销毁

var str = 'test'
str.test = 'hhh'
console.log(str,typeof str) // test string
console.log(str.test) //undefined

上面第二行代码给自动创建的 String 实例对象添加了 test 属性，虽然此刻代码执行时他是生效的，但是在这行代码执行完毕后该 String 实例就会立刻被销毁，String 实例的 test 属性也就不存在了。

当执行第四行代码时，由于是读取模式，又重新创建了新的 String 实例，而这个新创建的 String 实例没有 test 属性，结果也就是 undefined。

❤ 怎么才能给基本类型添加方法或者属性呢？

1、增加对应的包装对象的原型方法

//给字符串添加属性或方法  要写到对应的包装对象的原型下才行
var str = 'hello';
String.prototype.last = function(){
  // 返回指定位置的字符
  return this.charAt(this.length - 1);
};
console.log(str.last()); //o  执行到这一句，JS会偷偷做一些事情
// 相当于
// 1.找到基本包装对象，new一个和字符串值相同的对象，
// var str = new String('hello');
// 2.通过这个对象找到了包装对象下的方法并调用 
// str.last();  
// 3.这个对象被销毁
// str = null; 

2、使用new运算符创建String对象

// new运算符
var str = new String('hello');
// 有效属性
str.name = 'HI';
// 有效方法
str.age = function () {
  return 100;
}
console.log(str); //[String: 'hello'] { name: 'HI', age: [Function] }
console.log(typeof str); //object
console.log(typeof str.valueOf()); //string
console.log(str.name);  // HI
console.log(str.age()); // 100

★ 注意：在使用 new 运算符创建String，Number，Boolean三种类型的对象时，可以给自己添加属性和方法；或增加对应的包装对象的原型方法；但我们建议不要这样使用，因为这样会导致根本分不清到底是基本类型值还是引用类型值。

二、基本包装类型的属性和方法

1、Boolean类型

Boolean 类型没有特定的属性或者方法。一般直接将Boolean当做一个工具方法来使用。

2、Number类型

2.1 内置属性

静态属性，直接调用即可

属性	描述
MAX_VALUE	可表示的最大的数。
MIN_VALUE	可表示的最小的数。
NaN	非数字值。
NEGATIVE_INFINITY	负无穷大，溢出时返回该值。
POSITIVE_INFINITY	正无穷大，溢出时返回该值。
prototype	使您有能力向对象添加属性和方法。

// 最大值
console.log(Number.MAX_VALUE); //1.7976931348623157e+308
// 最小值
console.log(Number.MIN_VALUE); //5e-324

// prototype如果想要手动的向其原型对象中添加方法 一般加上一些特殊的符号 不建议
Number.prototype._toFixed = function () {
}

2.2 内置方法

对象方法

var num = 123456
// toString 把数字转换为字符串，使用指定的基数
console.log(num.toString()); //'123456'

// toLocaleString 把数字转换为字符串，使用本地数字格式顺序
console.log(num.toLocaleString()); //'123,456'

// toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字。
console.log(num.toFixed(5)); //'123456.00000'

// toExponential 把对象的值转换为指数计数法。科学计数法
console.log(num.toExponential()); //'1.23456e+5'

//toPrecision 方法可在对象的值超出指定位数时将其转换为指数计数法。
console.log(num.toPrecision(2)); //'1.2e+5'

// valueOf 返回一个 Number 对象的基本数字值。
console.log(num.valueOf()); //123456

3、String类型

3.1 对象属性

属性	描述
constructor	对创建该对象的函数的引用
length	字符串的长度
prototype	允许您向对象添加属性和方法

//获取字符串长度
var str = 'yeziyes'
console.log(str.length); // 7

String 也包含对象的通用方法，比如 valueOf()、toLocaleString()和 toString()方法，但这些方法都返回字符串的基本值。

3.2 字符方法

方法	描述
charAt(index)	返回指定索引位置的字符
charCodeAt(index)	以Unicode编码形式返回指定索引位置的字符

charAt(index) 返回指定索引位置的字符。

index，必需。表示字符串中某个位置的数字，即字符在字符串中的下标。

var str = 'hello';
console.log(str.charAt(0)); // h

charCodeAt(index) 以Unicode编码形式返回指定索引位置的字符。
index，必需。表示字符串中某个位置的数字，即字符在字符串中的下标。

var str = 'hello';
console.log(str.charCodeAt(0)); // 104

3.3 字符串操作方法

方法	描述
concat()	连接字符串。
slice()	方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
substring()	提取字符串中两个指定的索引号之间的字符。
substr()	从起始索引号提取字符串中指定数目的字符。

concat(str1,str2...strx) 连接字符串。（str1,str2…strx 将要被连接的字符串）与Array.prototype.concat类似。

var str = 'hello';
console.log(str.concat('world', 'hello', 'javascript')); // helloworldhellojavascript
console.log(str); //hello

slice(start,end) 提取字符串的片断，并在新的字符串中返回被提取的部分。返回字符串start到end(不包括end)之间位置的字符串，start和end可以为负数。

var str = 'hello';
console.log(str.slice(0,3)); // hel
//从第一位截取到最后
console.log(str.slice(1)); //ello
//最后一位是-1，往前依次递减
console.log(str.slice(-3,-1)); //ll
console.log(str); //hello

substring(start,end) 提取字符串中两个指定的索引号之间的字符。
返回字符串start到end(不包括end)之间位置的字符串，start和end不可以为负数，没有end的话，提取剩余全部。

var str = 'hello';
console.log(str.substring(0, 3)); // hel
console.log(str.substring(1)); // ello

substr(start,length) 从起始索引号提取字符串中指定数目的字符。返回字符串start(可以为负数)开始的length个字符串

var str = 'hello';
console.log(str.substr(0, 3)); // hel
console.log(str.substr(-4, 3)); // ell

3.4 字符串位置方法

方法	描述
indexOf(str,n)	从n开始搜索第一个str，并将搜索的索引值返回
lastIndexOf(str,n)	从n开始搜索的最后一个str，并将搜索的索引值返回

indexOf(str,n) 从n开始(包括n)往后搜索到的第一个str，并将搜索的索引值返回。n为可选的整数参数，合法取值是 0 到 string.length - 1。如省略该参数，则将从字符串的首字符开始往后检索。如果没有找到，则返回-1

var str = 'hello';
console.log(str.indexOf('l')); // 2
console.log(str.indexOf('l',3)); // 3

lastIndexOf(str,n) 从n开始往前搜索到的第一个str，并将搜索的索引值返回。n为可选的整数参数，合法取值是 0 到 string.length - 1。如省略该参数，则将从字符串的末尾字符开始往前检索。如果没有找到，则返回-1

var str = 'hello world';
console.log(str.lastIndexOf('l')); // 9
console.log(str.lastIndexOf('l',5)); // 3

3.5 大小写转换方法

方法	描述
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
toLocaleLowerCase()	把字符串转换为小写。本地化
toLocaleUpperCase()	把字符串转换为大写。本地化

var str = 'hello world';
// 转换为大写
console.log(str.toUpperCase()); //HELLO WORLD
// 转换为小写
console.log(str.toLowerCase()); //hello world

3.6 字符串的模式匹配方法

方法	描述
match()	找到一个或多个正则表达式的匹配。
replace()	替换与正则表达式匹配的子串。
search()	检索与正则表达式相匹配的值。
split()	把字符串分割为字符串数组。

var str = 'HELLO World';
//找到 L，返回 L 否则返回 null
console.log(str.match('L')); //[ 'L', index: 2, input: 'HELLO World', groups: undefined ]
//找到 L 的位置，和 indexOf 类似
console.log(str.search('L')); //2
//把 L 替换成 Q
console.log(str.replace('L', 'Q')); //HEQLO World
//如果把空字符串 ("") 用作 分隔符，那么 stringObject 中的每个字符之间都会被分割。
//把字符串分割为字符串数组
console.log(str.split('')); //['H', 'E', 'L', 'L','O', ' ', 'W', 'o','r', 'l', 'd']

---

JS中的基本包装类型

在JavaScript中，基本包装类型（String, Number, Boolean）是原始类型的对象表示，它们具有属性和方法。当你尝试对一个原始类型的值进行属性或方法的操作时，JavaScript会在后台自动创建一个临时的对象，这就是基本包装类型的由来。

例如，当你尝试给一个字符串添加属性时，你实际上是在给一个临时的String对象添加属性，当操作完成后，这个临时对象就会被销毁。

var str = "Hello";

str.prop = "World";

console.log(str.prop); // undefined

在上面的例子中，我们尝试给字符串"Hello"添加一个属性prop，然后尝试打印这个属性，但是结果是undefined，这是因为我们只是在临时的String对象上添加了prop属性，并没有在原始的字符串上。

如果你需要在原始类型的值上添加属性或方法，你应该显式地创建它们的包装对象。

var str = "Hello";

var strObj = new String(str);

strObj.prop = "World";

console.log(strObj.prop); // World

在上面的例子中，我们创建了一个String对象strObj，并给它添加了prop属性。这次当我们尝试打印strObj.prop时，结果是World，因为我们是在同一个对象上操作的。

需要注意的是，通常情况下，我们不需要手动创建基本包装类型的对象，因为JavaScript会在需要的时候自动创建它们。手动创建它们通常是为了添加属性和方法或者在特定的作用域内保持状态。

---

参考资料

JavaScript 中的包装类型_js包装类-CSDN博客 | JS之基本包装类型 | JS基本包装类型详解