JavaScript中字符串拼接：日常开发四种写法，优缺点

做前端开发，几乎每天都要和字符串拼接打交道。拼接用户名、拼接接口参数、拼接页面HTML结构，随处都能用到。很多新手只会无脑用加号拼接，写复杂代码的时候不仅代码乱糟糟，偶尔还会出现莫名的数据拼接bug，排查起来很浪费时间。结合平时项目实战，我把JS里四种主流字符串拼接方式，结合真实开发场景直白讲清楚。

一、加号+拼接：最简单，但有隐形坑

这是入门最先学的拼接方式，少量文本拼接足够好用，写法直观易懂。但很多人不知道，JS字符串具备不可变性，每一次加号拼接，都会在内存生成新字符串。

普通业务少量拼接看不出问题，一旦放在循环里批量拼接数据，页面就会出现明显卡顿。另外还有一个高频坑：数字和字符串相加，很容易出现拼接和运算混淆的问题，新手踩坑率特别高。

二、concat()方法：极少用，局限性很大

concat是字符串自带拼接方法，支持一次性传入多个变量合并文本。日常项目里我几乎很少主动使用，原因很直白：不支持链式灵活书写，无法直接拼接换行格式文本，性能也不如数组拼接。只适合简单两个固定字符串合并，实用性很低。

三、数组join拼接：循环大批量拼接首选

工作中遇到for循环批量生成列表、批量拼接多条文本，我都会优先用数组push+join。先把所有片段存入数组，最后一次性合并输出，全程只生成一次字符串，内存开销极小。

早些年没有模板字符串的时候，前端拼接HTML代码全靠它，至今大批量文本拼接依旧是最优解。

四、模板字符串``：目前项目主流首选

现在企业开发项目，90%的场景我都会直接用反引号模板字符串。最大优势是可以直接换行、直接嵌入变量，不用反复拼接引号和加号，代码可读性直接拉满。

不用纠结引号嵌套问题，也不用拆分换行文本，处理动态变量、多行HTML代码格外省心。唯一小短板：极低版本IE浏览器不兼容，目前绝大多数项目早已不用低版本浏览器，完全可以放心使用。

真实开发选型总结

少量简单拼接：直接用加号；循环大批量拼接：数组join；日常页面动态渲染、多行文本：模板字符串；concat方法直接忽略即可。

字符串拼接综合实战案例（前端页面动态渲染列表）

贴合真实工作场景，模拟后端返回用户数组，分别使用四种方式实现拼接，直观对比效果：

// 后端模拟用户数据

const userList = [

    {name:"张三",age:24,job:"前端开发"},

    {name:"李四",age:26,job:"网站优化"},

    {name:"王五",age:23,job:"网页设计"}

]

// 1. 加号拼接（可读性差）

let str1 = "";

userList.forEach(item=>{

    str1 += "<li>姓名："+item.name+"，年龄："+item.age+"，岗位："+item.job+"</li>"

})

// 2. 模板字符串（推荐，代码整洁）

let str2 = "";

userList.forEach(item=>{

    str2 += `<li>姓名：${item.name}，年龄：${item.age}，岗位：${item.job}</li>`

})

// 3. 数组join拼接（循环大数据最优）

let arr = [];

userList.forEach(item=>{

    arr.push(`<li>姓名：${item.name}，年龄：${item.age}，岗位：${item.job}</li>`)

})

let str3 = arr.join("");

console.log("加号拼接结果：",str1);

console.log("模板字符串结果：",str2);

console.log("数组拼接结果：",str3);