前端知识点---字符串的8种拼接方法(Javascript)
文章目录
- 01使用 + 运算符(改变了原始字符串)
- 02使用 += 运算符(改变了原本的字符串)
- 03 使用 concat() 方法(不改变原本的字符串)
- 04使用模板字面量(不改变原本的字符串)
- 05使用 join() 方法(不改变原本的字符串)
- ①指定分隔符
- ②没有指定分隔符:
- ③使用不同的分隔符:
- ④空数组:
- ⑤元素为不同类型:
- 06使用 Array.prototype.reduce() 方法
- 07使用 String.raw() 方法
- 08总结:
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!
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():处理包含转义字符的模板字符串时使用。