JavaScript中字符串拼接的实现方法
在JavaScript开发中，字符串拼接是非常常见的操作，无论是拼接接口请求参数、处理页面展示文本还是生成动态内容，都需要用到字符串拼接能力。下面介绍几种常用的字符串拼接实现方式，以及它们的适用场景和注意事项。
1. 使用加号（+）运算符拼接
这是最基础也最常用的字符串拼接方式，通过加号运算符可以直接将多个字符串、变量、其他类型的值拼接成一个新的字符串。如果拼接的内容包含非字符串类型，JavaScript会自动将其转换为字符串后再拼接。
// 拼接纯字符串 const str1 = "Hello" + " " + "World"; console.log(str1); // 输出：Hello World // 拼接变量 const name = "张三"; const age = 25; const info = "姓名：" + name + "，年龄：" + age; console.log(info); // 输出：姓名：张三，年龄：25 // 拼接其他类型的值，会自动转换为字符串 const num = 100; const result = "数值是：" + num + "，类型是：" + typeof num; console.log(result); // 输出：数值是：100，类型是：number
这种方式语法简单直观，适合拼接内容较少、逻辑简单的场景，但是当拼接内容较多时，连续的加号会让代码可读性下降，也不利于维护。
2. 使用加等（+=）运算符拼接
如果需要在原有字符串的基础上不断追加内容，可以使用加等运算符，这种方式的本质是对原字符串变量重新赋值，将新内容追加到原有字符串末尾。
let message = "今天天气"; message += "晴朗"; message += "，温度适宜"; message += "，适合外出"; console.log(message); // 输出：今天天气晴朗，温度适宜，适合外出
这种写法适合逐步构建长字符串的场景，但是需要注意，字符串在JavaScript中是不可变类型，每次使用+=都会创建一个新的字符串对象，如果拼接次数非常多（比如循环拼接上千次），会产生较多的内存开销，性能不如后面介绍的数组join方式。
3. 使用模板字符串（反引号 ` ）拼接
ES6引入的模板字符串是目前推荐的字符串拼接方式，它使用反引号包裹内容，支持在字符串中直接嵌入变量和表达式，不需要手动拼接，也支持多行字符串，大大提升了代码的可读性。
const product = "笔记本电脑";
const price = 5999;
const count = 2;
// 嵌入变量，使用${}包裹变量或表达式
const orderInfo = `您购买了${count}台${product}，总价为${price * count}元`;
console.log(orderInfo); // 输出：您购买了2台笔记本电脑，总价为11998元
// 支持多行字符串，不需要手动添加换行符
const multiLineStr = `第一行内容
第二行内容
第三行内容`;
console.log(multiLineStr);
// 输出：
// 第一行内容
// 第二行内容
// 第三行内容
// 模板字符串中可以嵌入函数调用结果
function getDiscount(price) {
return price * 0.9;
}
const discountInfo = `原价${price}元，打折后价格为${getDiscount(price)}元`;
console.log(discountInfo); // 输出：原价5999元，打折后价格为5399.1元模板字符串几乎可以覆盖大部分字符串拼接场景，尤其是需要拼接变量、表达式或者多行文本时，优势非常明显，是目前开发中的首选方式。
4. 使用数组join方法拼接
当需要拼接大量字符串（比如循环构建长文本）时，可以先将所有要拼接的内容放到数组中，最后调用数组的join方法将数组元素连接成字符串。这种方式的性能比多次使用+=更好，因为只会创建一次最终的字符串对象。
// 循环拼接场景
const items = ["苹果", "香蕉", "橙子", "葡萄"];
const tempArr = [];
for (let i = 0; i < items.length; i++) {
tempArr.push(`第${i + 1}个水果是${items[i]}`);
}
const fruitList = tempArr.join("；"); // 用分号作为连接符
console.log(fruitList); // 输出：第1个水果是苹果；第2个水果是香蕉；第3个水果是橙子；第4个水果是葡萄
// 自定义连接符，不传参数默认用逗号连接
const arr = ["a", "b", "c"];
console.log(arr.join()); // 输出：a,b,c
console.log(arr.join("")); // 输出：abc，空字符串作为连接符直接拼接这种方式适合需要大量拼接的场景，比如生成HTML片段、构建长日志内容等，性能表现更优。
5. 使用concat方法拼接
字符串的concat方法可以接收一个或多个参数，将参数内容拼接到原字符串末尾，返回新的字符串，原字符串不会被修改。
const baseStr = "Hello";
const newStr = baseStr.concat(" ", "JavaScript", "!");
console.log(newStr); // 输出：Hello JavaScript!
console.log(baseStr); // 输出：Hello，原字符串不变
// 可以拼接多个参数
const str = "a".concat("b", "c", "d");
console.log(str); // 输出：abcdconcat方法的语法比较繁琐，实际开发中用得比较少，大部分场景用加号或者模板字符串就可以替代。
不同拼接方式的对比与选择
日常开发中可以根据场景选择合适的拼接方式：
- 简单少量拼接、兼容性要求高的场景，可以选择加号（+）运算符
- 需要嵌入变量、表达式或者多行文本的场景，优先选择模板字符串，可读性最好
- 大量循环拼接、性能要求高的场景，选择数组join方法
- concat方法除非有特殊需求，否则一般不推荐使用
另外需要注意，如果拼接的内容包含用户输入的内容，要警惕XSS风险，尤其是拼接后插入到DOM中的场景，需要对特殊字符进行转义处理，避免恶意脚本执行。