【JavaScript】内置对象 - 字符串对象 ② ( 字符串类型不可变性 | 字符串不可变的好处 | 字符串不可变 - 示例分析 )

短命女 2024-05-28 10:07 92阅读 0赞

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

*  一、字符串不可变
 *   *  1、字符串类型不可变性说明
     *  2、字符串不可变的好处
 *  二、字符串不可变 - 示例分析
 *   *  1、字符串不可变示例分析
     *  2、完整代码示例
     *  3、字符串拼接性能测试 - 拼接 10 次字符串
     *  4、字符串拼接性能测试 - 拼接 10000000 次字符串

**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、字符串类型不可变性说明 ###

在 JavaScript 中 , 一个字符串 一旦被创建 , 之后就不能更改该字符串的值 ;

尝试修改一个字符串变量时 , 实际上是在内促中开辟出了一块新的内存空间 , 并在该控件中创建了一个新的字符串 , 赋值给原来的字符串变量 ;

每次修改字符串 , 都需要消耗更多的内存 , 但是从线程安全 , 性能优化 角度出发 , 字符串不可修改获益更大 ;

### 2、字符串不可变的好处 ###

**字符串不可变的好处 :**

*  **线程安全 :** 多个线程操作 同一个字符串 , 由于字符串不可变 , 不会出现数据竞争或数据不一致的问题 ;
 *  **优化性能 :** 对字符串进行 拼接 , 截取 , 查找 等操作时 , 由于字符串不可变 , 可以提高字符串相关操作的性能 ;
 *  **内存回收 :** 字符串不可变 , 一旦修改直接废弃原来的字符串创建新字符串 , 废弃的字符串一旦没有引用指向它们 , 其占用的内存会被直接回收 ;

## 二、字符串不可变 - 示例分析 ##

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

### 1、字符串不可变示例分析 ###

**解析下面的代码 :**

// 创建字符串
            var str = 'Tom';
            // 输出 : Tom
            console.log(str);
    
            // 修改字符串变量值
            str = 'Jerry';
            // 输出 : Jerry
            console.log(str2);

**创建字符串并赋值给变量 :** 声明 str 变量 , 就是在 内存中 , 开辟了一块内存空间 , 内存空间中存放字符串 `'Tom'` 字面量值 , 将该字符串初始化给 str 变量 , 则 str 变量的引用指向 内存中 `'Tom'` 字面量值 所在的空间 ;

var str = 'Tom';

![在这里插入图片描述][77132b92c0c240b8ab5ea53dbfd6f2f0.png]  
此时 , 执行 `console.log(str);` 代码 , 打印上述字符串变量 str , 打印出 Tom 字符串值 ;

**重新为字符串变量赋值 :** 再次为 str 字符串变量赋值 , 原来在内存空间中的 `'Tom'` 字符串保持不变 , 而是在内存空间中重新创建一个新的字符串 `'Jerry'` , 让 str 变量指向新的 `'Jerry'` 字符串所在的内存空间 ;

str = 'Jerry';

原来的 `'Tom'` 字符串 以及 该字符串所占用的内存空间 , 仍然保留 ;

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

每次对字符串进行 赋值 , 拼接 , 切割 操作 , 会在内存中产生大量的新的字符串 , 如果没有来得及进行内存回收 , 可能造成内存泄漏 ;

### 2、完整代码示例 ###

**代码示例 :**

<!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 = 'Tom';
            // 输出 : Tom
            console.log(str);
    
            // 修改字符串变量值
            str = 'Jerry';
            // 输出 : Jerry
            console.log(str2);
        </script>
    </head>
    
    <body>
    </body>
    
    </html>

**执行结果 :**

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

### 3、字符串拼接性能测试 - 拼接 10 次字符串 ###

<!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 = '';
    
            // 字符串拼接
            for (var i = 0; i < 10; i++) {
          
                str += i + ' ';
            }
    
            // 输出 : 
            console.log(str);
        </script>
    </head>
    
    <body>
    </body>
    
    </html>

**执行效果 :** 字符串拼接 循环 10 次 , 马上就能刷新出来 ;

![在这里插入图片描述][bb99edbd9240430fb324350ffc36d03e.gif]

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

### 4、字符串拼接性能测试 - 拼接 10000000 次字符串 ###

<!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 = '';
    
            // 字符串拼接
            for (var i = 0; i < 10000000; i++) {
          
                str += i + ' ';
            }
    
            // 输出 : 
            console.log(str);
        </script>
    </head>
    
    <body>
    </body>
    
    </html>

**执行效果 :** 字符串拼接 循环 10000000 次 , 需要等待一段时间才能刷新出来 ; 大量使用字符串操作 , 会降低网页性能 ;

![在这里插入图片描述][aae1e5558d734441b6eafe3f72c4e698.gif]

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

[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
[77132b92c0c240b8ab5ea53dbfd6f2f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/2cc54a84c4474ca5be2a5a7e658a9aba.png
[f7487bdb32264293a32f35e1e05cf41d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/bd32d1923c474eb28b35cb76664907cb.png
[485785bbde65468992a5d773c857636e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/36535e95a02646158c102226c2020826.png
[bb99edbd9240430fb324350ffc36d03e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/c0145bbba16f4c47880b82b46fb7137f.gif
[9350e2484bcb436d81b6fae8be933424.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/03688b12c50c4727acc767363b34d1e2.png
[aae1e5558d734441b6eafe3f72c4e698.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/42dd4290b33c4d5fab50752d2bf01117.gif
[003e89fc02fd4e03997031d1a66d3a11.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/28/9849e0bd31c54efe9aa617a1844939c2.png