当前位置: 首页 > news >正文

前端知识点---字符串的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():处理包含转义字符的模板字符串时使用。

http://www.mrgr.cn/news/70658.html

相关文章:

  • 常见LLM大模型概览与详解
  • 了解大模型:开启智能科技的新篇章
  • Simulink中Model模块的模型保护功能
  • 从零开始:如何使用第三方视频美颜SDK开发实时直播美颜平台
  • 2024年自学手册 网络安全(黑客技术)
  • FairGuard游戏加固实机演示
  • 边缘检测的100种方法
  • PCL 点云拟合 Ransac拟合空间球体
  • 基于图的去中心化社会推荐过滤器
  • 麒麟服务器工作站SP1 arm环境qt5.6.3源码编译
  • 【大咖云集 | IEEE计算智能学会广州分会支持】第四届信息技术与当代体育国际学术会议(TCS 2024,12月13-15日)
  • 数据库基础(14) . MySQL存储过程
  • 嵌入式学习-C嘎嘎-Day01
  • 基于stm32的智能晾衣杆(开源)
  • uniapp中webview全屏不显示导航栏解决方案
  • 20个Python自动化脚本,提升编程能力
  • 图形几何之美系列:仿射变换矩阵之先转后偏
  • 元岭村停车场的收费情况探寻
  • C#-objetc中的方法
  • mysql数据库(四)单表查询
  • 20241111_室内定位
  • 把握鸿蒙生态崛起的机遇:开发者视角的探讨
  • 应用系统开发(4)CMOS 模拟开关芯片HCF4053BE
  • CS144_01
  • 快手推出可灵AI独立APP,视频美学表达和运动表现持续领先
  • tiktok 用户主页接口API服务