前端知识点---字符串的8种拼接方法(Javascript)

文章目录

01使用 + 运算符(改变了原始字符串)

这是最基础的方法

let str1 = "Hello";
let str2 = "World";
let result = str1 + " " + str2;  // 输出: "Hello World"
console.log(result);

使用 + 运算符时，可以直接连接多个字符串，也可以连接字符串和变量。
这种方法适用于简单的拼接操作。

02使用 += 运算符(改变了原本的字符串)

+= 运算符用于将字符串追加到已有的字符串后面。

let str = "Hello";
str += " World";  // str 变成 "Hello World"
console.log(str);

使用 +=，字符串的内容会被追加到原有字符串的后面。这改变了原本的字符串
适合在循环或多次拼接时使用，但对于较长的字符串拼接可能会有性能影响。

03 使用 concat() 方法(不改变原本的字符串)

concat() 方法用于连接两个或多个字符串，返回一个新的拼接后的字符串。

let str1 = "Hello";
let str2 = "World";
let result = str1.concat(" ", str2);  // 输出: "Hello World"
console.log(result);

concat() 方法不会修改原始字符串，而是返回一个新字符串。
它可以接受多个参数，用于连接多个字符串。

04使用模板字面量（不改变原本的字符串）

模板字面量使用反引号（`）来包含字符串，支持插入变量和表达式。

let str1 = "Hello";
let str2 = "World";
let result = `${str1} ${str2}`;  // 输出: "Hello World"
console.log(result);

let name = "Alice";
console.log(`Hello, ${name}!`);  // 输出: Hello, Alice!

想深入了解卡我另一篇文章前端知识点—模板字符串(Javascript)

05使用 join() 方法（不改变原本的字符串）

join() 是数组的方法，它将数组中的所有元素用指定的分隔符连接成一个字符串。

let strArray = ["Hello", "World"];
let result = strArray.join(" ");  // 输出: "Hello World"
console.log(result);

join() 方法是将数组的所有元素连接起来，可以指定分隔符。
适用于多个字符串拼接时，尤其是当字符串数据存储在数组中时。
基本使用：

①指定分隔符

let arr = ['Apple', 'Banana', 'Orange'];
let result = arr.join(', ');  // 使用逗号和空格作为分隔符
console.log(result);  // 输出: "Apple, Banana, Orange"

②没有指定分隔符：

如果没有指定分隔符，join() 默认会使用逗号（,）来连接元素。

let arr = ['Apple', 'Banana', 'Orange'];
let result = arr.join();  // 默认使用逗号
console.log(result);  // 输出: "Apple,Banana,Orange"

③使用不同的分隔符：

join() 可以使用任何字符串作为分隔符。例如，可以使用空格、破折号、换行符等：

let arr = ['Apple', 'Banana', 'Orange'];
let result = arr.join(' - ');  // 使用破折号作为分隔符
console.log(result);  // 输出: "Apple - Banana - Orange"

④空数组：

如果数组为空，join() 会返回一个空字符串。注意类型发生了转化

let arr = [];
let result = arr.join(', ');  // 空数组
console.log(result);  // 输出: ""

⑤元素为不同类型：

如果数组中的元素是不同类型的数据（比如数字、布尔值、对象等），它们会被转换为字符串，然后使用分隔符连接。

let arr = [1, true, null, 'Hello'];
let result = arr.join(' | ');  // 使用 ' | ' 作为分隔符
console.log(result);  // 输出: "1 | true | null | Hello"

特性：
不会改变原始数组：join() 方法返回一个新的字符串，不会修改原始的数组。
支持自定义分隔符
适用于任何类型的数组元素：即使数组中的元素是数字、对象或者其他非字符串类型，join() 方法也能将它们转换为字符串并进行拼接。

常见应用：
连接数组元素：将多个数组元素连接成一个字符串，常见于将数组中的单词或者数值连接起来。

let words = ['Hello', 'World'];
let sentence = words.join(' ');  // 连接成 "Hello World"
console.log(sentence);

格式化输出：可以使用 join() 格式化数组输出，例如打印数字列表、日期、文件路径等。

let numbers = [1, 2, 3, 4, 5];
let result = numbers.join(' - ');  // "1 - 2 - 3 - 4 - 5"
console.log(result);

06使用 Array.prototype.reduce() 方法

reduce() 方法是数组的一个函数式编程方法，它可以将数组中的元素累加成一个字符串。适用于需要更复杂拼接逻辑的场景。

let strArray = ["Hello", "World"];
let result = strArray.reduce((acc, curr) => acc + " " + curr, "");  // 输出: "Hello World"
console.log(result);

reduce() 方法允许你使用累加器（acc）来累积数组元素，适合处理复杂的拼接规则。

07使用 String.raw() 方法

String.raw() 是 ES6 提供的一个方法，主要用于获取原始字符串，通常用于处理模板字符串中的转义字符，但也可以用于拼接字符串。

let result = String.raw`Hello World`;
console.log(result);  // 输出: "Hello World"

String.raw() 用于创建原始字符串，它不会解析模板字符串中的转义字符，因此更常用于多行字符串或处理包含特殊字符的字符串。

08总结：

• 运算符：最基础、常见，适用于简单的字符串拼接。 += 运算符：适用于追加字符串。 concat() 方法：连接两个或多个字符串，返回新字符串。 模板字面量（`）：最现代的拼接方式，推荐使用，适合插入变量和表达式。 join() 方法：用于将数组元素拼接成字符串，适合多个字符串或数组中的字符串拼接。 reduce() 方法：适用于复杂的拼接需求，尤其是需要累加或动态拼接的情况。 String.raw()：处理包含转义字符的模板字符串时使用。