【JavaScript】内置对象 - 字符串对象 ① ( 基本包装类型 | 三种基本装包类型 - String / Number / Boolean | 包装过程触发条件 | 包装过程 )

Dear 丶 2024-05-28 10:07 29阅读 0赞

#### 文章目录 ####

*  一、基本包装类型引入
 *   *  1、字符串类型变量示例
     *  2、基本包装类型引入
 *  二、基本包装类型
 *   *  1、三种基本装包类型 - String / Number / Boolean
     *  2、包装过程触发条件
     *  3、基本包装类型的包装过程

**String 字符串对象参考文档 :** [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/String][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_String]

## 一、基本包装类型引入 ##

--------------------

### 1、字符串类型变量示例 ###

JavaScrip 中的 字符串 是 简单数据类型 , 如下面的 str 变量 , 是 简单数据类型 String 类型 , 表示文本类型 和 字符序列 ;

// 字符串类型变量
            var str = 'Hello World';
    
            // 打印字符串类型的长度
            console.log(str.length);

上述代码执行后 , 最终调用 str.length 属性 , 得到的值为 11 ;

**完整代码示例 :**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>JavaScript</title>
        <style></style>
        <script>
            // 字符串类型变量
            var str = 'Hello World';
    
            // 打印字符串类型的长度
            console.log(str.length);
        </script>
    </head>
    
    <body>
    </body>
    
    </html>

**执行结果 :**

![在这里插入图片描述][b0a53b0be74d431d82a2cae3073438ad.png]

### 2、基本包装类型引入 ###

在上述代码中 , `var str = 'Hello World';` 是一个简单数据类型 ,

简单数据类型 是没有 成员变量 和 成员属性的 ,

之所以能调用 String 简单数据类型的 的 length 属性 ,

是因为 这是 JavaScript 为 String 字符串类型做了一层基本包装 ;

除了 String 字符串类型之外 , Number 数字类型 和 Boolean 布尔值类型 都是 基本包装类型 ;

## 二、基本包装类型 ##

--------------------

### 1、三种基本装包类型 - String / Number / Boolean ###

JavaScript 语言中 有 3 种 基本装包类型 :

*  String : 用于字符串基本类型的操作 ;
    
     *  使用 `var str = 'Hello World'` 字面量 或 `var str = new String('Hello World')` 构造函数创建 ;
     *  String 对象 提供了 方法和属性 , 如 : length 属性 - 获取字符串长度 , charAt() 方法 - 获取指定位置的字符 , concat() 方法 - 拼接字符串 ;
 *  Number : 用于数字基本类型的操作 ;
    
     *  使用 `var num = 66` 字面量 或 `var num = new Number(66)` 构造函数 创建 ;
     *  Number 对象 提供了 方法和属性 , 如 : toFixed() 方法 - 格式化数字到指定的小数位数 , toExponential() 方法 - 以指数表示法返回数字的字符串形式 ;
 *  Boolean : 用于布尔值基本类型的操作 ;
    
     *  使用 `var bool = true` 字面量 或 `var bool = new Boolean(true)` 构造函数 创建 ;
     *  Boolean 对象 提供了 toString 方法 可以将布尔值转为 字符串 , 如 : `'true'` 或 `'false'` ;

### 2、包装过程触发条件 ###

基本包装类型 可以在基本数据类型上调用 方法 和 属性;

**在调用 上述类型的 变量 的 方法和属性 时 , JavaScript 会自动将这些 基本数据类型 转换为相应的 包装对象 ;**

这个包装过程 , 将 简单数据类型 包装成了 复杂数据类型 ;

### 3、基本包装类型的包装过程 ###

以 `var str = 'Hello World';` String 字符串类型的变量为例 , 分析 将 字符串类型变量 包装成 复杂数据类型对象 的 过程 ;

// 字符串类型变量
            var str = 'Hello World';
    
            // 打印字符串类型的长度
            console.log(str.length);

如果只使用 str 变量的值 , 不调用 str.length 属性 , 包装过程不会发生 ,

一旦开始调用了 str 变量的 length 属性 , JavaScript 引擎就会将 str 变量包装成 复杂数据类型对象 ;

**String 字符串 基本包装类型的包装过程 :**

*  **首先 ,** 调用 new String() 构造函数 , 创建 String 类型对象 , 该操作将 简单数据类型 转为了 复杂数据类型 , 创建一个临时变量 temp 临时存储 创建的 String 类型对象 ;

var temp = new String('Hello World');

*  **然后 ,** 将 temp 临时对象 赋值给 str 变量 , 之后可以调用 该临时对象的 length 属性 ;

str = temp;

*  **最后 ,** 访问完毕后 , 销毁 temp ;

temp = null;

[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_String]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String
[b0a53b0be74d431d82a2cae3073438ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/8f64564d366f4eb6ba0161d5de11d323.png