JS 合并拼接字符串 （ 5种方法 ）

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

文章目录

• • 一、合并方法
  • • 1. 使用加号 (+) 进行拼接
    • 2. 模板字面量（Template literals）
    • 3. 使用`concat()` 方法
    • 4. 利用数组的 `join()` 方法
    • 5.使用字符串的 `replace()` 方法结合空正则表达式
    • 二、对比总结

      ---

      JavaScript提供了多种方法来合并（拼接）字符串。以下是一些主要的字符串合并方法，以及它们的代码示例和注意事项。

      一、合并方法

      1. 使用加号 (+) 进行拼接

      • 最简单且最常用的字符串拼接方法是使用加号（+）运算符。

        let part1 = "Hello, ";
        let part2 = "world!";
        let combined = part1 + part2; // "Hello, world!"
        

        注意事项：

        • 连续使用加号可能导致代码可读性下降，特别是在拼接大量字符串或变量时。
        • 对于大量小字符串的拼接，性能可能受到影响，因为每次拼接都会创建新的字符串对象。

          2. 模板字面量（Template literals）

          • 使用反引号 (`) 定界，允许嵌入表达式，并自动拼接结果。

            let name = "Alice";
            let greeting = `Hello, ${name}!`; // "Hello, Alice!"
            

            注意事项：

            • 模板字面量支持多行字符串，无需手动添加换行符或使用 \n。
            • 嵌入的表达式会被求值并插入到相应位置，注意避免可能导致副作用的表达式。
            • 如果模板字符串内部需要包含反引号，记得使用转义字符 \。

              3. 使用concat() 方法

              • 语法: string.concat(string2[, string3[, ...[, stringN]]])
              • 返回一个新的字符串，由原字符串与其他字符串连接而成。

                let str1 = "Hello, ";
                let str2 = "world!";
                let combined = str1.concat(str2); // "Hello, world!"
                

                注意事项：

                • 虽然 concat() 可以接受多个参数，但通常不如使用加号或模板字面量简洁。
                • 同样会产生新字符串，对于大量字符串拼接时性能不如数组的 join() 方法（见下文）。

                  4. 利用数组的 join() 方法

                  • 将字符串数组元素合并成一个字符串，中间用指定的分隔符连接。

                    let parts = ["Hello,", "world!"];
                    let joined = parts.join(' '); // "Hello, world!"
                    

                    注意事项：

                    • 当需要拼接大量字符串时，先将它们放入数组，再使用 join() 方法可以提高性能，因为数组操作不会每次都生成新的字符串对象。
                    • 如果需要拼接的字符串已经存在，额外创建数组可能会增加内存开销，此时应权衡选择。

                      5.使用字符串的 replace() 方法结合空正则表达式

                      • 仅适用于特定场景，例如需要在循环中动态拼接字符串时避免多次创建新对象。

                        let result = "";
                        for (let i = 0; i < names.length; i++) { result += names[i] + " ";
                        }
                        // 更高效的方式
                        let result = "";
                        for (let i = 0; i < names.length; i++) { result = result.replace(/\$/, names[i] + " ");
                        }
                        

                        注意事项：

                        • 此方法利用了 replace() 方法替换空字符串的特性，仅适用于在循环中动态拼接且已知最终拼接次数的情况。
                        • 通常情况下，优先使用模板字面量或数组 join() 方法。

                          二、对比总结

                          • 加号 (+)：简单易用，但可能影响代码可读性和性能。
                          • 模板字面量：简洁直观，支持多行和嵌入表达式，是现代JavaScript中最推荐的拼接方式。
                          • concat()：功能较弱，不如其他方法灵活，较少使用。
                          • 数组 join()：适用于拼接大量字符串，性能较好，但需预先收集到数组中。
                          • replace() 结合空正则表达式：特殊场景下的优化手段，一般不推荐常规使用。

                            在实际开发中，应根据具体需求选择合适的方法，并关注代码可读性和性能。在大多数情况下，模板字面量是最优选择。