JavaScript 字符串拼接的 4 种常见方法详解

作者:代码拾荒

时间:2026-10-30

浏览:471

本文详细介绍 JavaScript 中四种常用的字符串拼接方法。包括使用加号运算符进行基础连接、利用反引号模板字符串实现变量嵌入与多行文本处理、通过 concat 方法合并数组或字符串,以及使用 join 方法将数组元素转换为指定分隔符连接的字符串。

文章目录

一、采用连接符 + 串联目标字符串

let shy = '帅哥'
let a =  '我是' + shy
console.log(a)  // 我是帅哥

二、模板字符串

模板字符串(template string)为增强版字符串,以反引号(`)界定,具备以下特性:

1) 字符串内部允许包含换行符

2) 支持通过 ${xxx} 语法输出变量值

1. 执行最基础的变量拼接操作

// 变量拼接
let shy = '帅哥'
let a =  `我是${shy}`
console.log(a)  // 我是帅哥

一、采用连接符 + 串联目标字符串

2. 在模版字符串中嵌入html代码及多行文本

// html代码以及换行文本
let hi=`<div>
    <h2>你好呀!</h2>
</div>`
console.log(hi)  // 原样输出,包括换行

一、采用连接符 + 串联目标字符串

3. 插入一个表达式

// 插入表达式
let x=30;
let y=10;
let a=`x-y=${x-y}`
console.log(a)  // 输出表达式计算结果

一、采用连接符 + 串联目标字符串

4. 在模版字符串内部调用函数表达式

let food=function(){
    return "苹果"
}
let a=`我喜欢吃${food()}`;
console.log(a)

一、采用连接符 + 串联目标字符串

三、利用 js的 concat() 方法实现字符串或数组连接

concat() 方法旨在连接两个或多个数组或者字符串。

该方法不修改现有数组,仅返回连接后生成的新数组。

字符串随即拼接在一起

// 拼接数组
let a = ['java']
let b = ['script']
 
let str = a.concat(b)
 
console.log(a)
console.log(b)
console.log(str)  //  ["java", "script"]

一、采用连接符 + 串联目标字符串

// 拼接字符串
let a = 'java'
let b = 'script'
 
let str = a.concat(b)
 
console.log(a)
console.log(b)
console.log(str)  // javascript

一、采用连接符 + 串联目标字符串

四、利用 js的 join() 方法,将数组所有元素放入一个字符串

join() 方法将数组中的所有元素放入一个字符串:

join()——默认各元素间以逗号隔开

join("-")——各元素间以- 隔开,分隔符支持自定义

var arr=[1,2,3];
var str=arr.join();// 默认是逗号,也可以自定义连接符
var str2=arr.join('-');// 自定义连接符-
var str3=arr.join('.');// 自定义连接符-
console.log(arr); // [1,2,3]
console.log(str); // 1,2,3
console.log(str2); // 1-2-3
console.log(str3); // 1.2.3

一、采用连接符 + 串联目标字符串

参考资料:

1、 https://blog.csdn.net/chenjunxing1992/article/details/125514168

2、https://blog.csdn.net/m0_51708342/article/details/119005518

3、https://blog.csdn.net/weixin_44880730/article/details/109379041

总结

至此关于js字符串拼接的4种常见方法的文章介绍完毕,更多相关js字符串拼接内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章