字符串既然直接可以用+相加，那要concat干什么?ES6之后又用什么

今天我们来学习下JavaScript的一种字符串方法， 字符串方法_concat()方法 concat()用于连接两个不同的字符串，返回一个新字符串，不改变原字符串

示例对比：

如果是连接两个字符串分别使用两种方法

使用 concat()方法：

let a="Hello";
let b="World";
// 中间用空格号隔开
let result=a.concat(" ",b); //"Hello World"
```

接下来看看 + 运算符

let a="Hello";
let b="World";
let result=a + " " +b; // "Hello World"

这样下来我们可以看出虽然concat()方法似乎并不复杂，但 + 似乎更通俗易懂些，但我想介绍_concat()方法远远不止这些 例如连接三个字符串： 使用 concat()方法:

var str1="Hello";
var str2="World";
var str3="!"

var result=str1.concat(str2,str3)
console.log(result) // "HelloWorld!"

其中concat()括号内合并是没有限制的，在这个(str2,str3)我们合并了两个，我们还可以合并三个，四个，只需要用","隔开就可以了。

我们再用 + 连接字符串方法试试看:

var str1="Hello";
var str2="World";
var str3="!";

var result=str1+str2+str3;
console.log(result) // "HelloWorld!"

这样看来，使用 + 比使用 _concat()方法更加方便，那我们为什么要concat()字符串方法呢？ 别急，接下来让我们一起来做一道题

var a=1;
var b=2;
var c='3';

console.log(''.concat(a,b,c));
console.log( a + b + c );

A 123 33

B 123 123

C 33 33

D 6 6

做完了我们一起来看控制台打印效果

答案是选A，不知道你选对了没有？ 接下来让我们一起来解答一下这道题目

这其中我我们知道1和2是数字，而3是字符串。concat()开始前是一个字符串，所以1和2连接就会成为字符串相连，所以结果是"12",以字符串"3"相连，结果就是"123",因此C,D排除。

而用 + 的话，由于1和2属于数字类型，1和2首先会做个加法运算结果为3，而后面的"3"属于字符串类型，只能拼接在一起，所以结果为"33"。故答案选A

通过这道例题，我们也能明白 concat 和 + 之间的区别 类型转换的差异（重点）

+ 会自动转换类型：

let result = "数字是：" + 123; // "数字是：123"

concat() 不会自动转换类型：

let result = "数字是：".concat(123); // 报错：不是字符串

你必须手动转成字符串：

let result = "数字是：".concat(String(123)); // "数字是：123"

--

那为什么还要用 concat()？

1. 语义更清晰

• concat() 明确表示“我要拼接字符串”，而不是做数学加法。
• 在代码可读性上，有时更清晰，尤其在链式调用中：

let result = "".concat(a, b, c, d);

2. 函数式编程风格

• 有些人更喜欢用函数调用的方式处理字符串，而不是运算符。

实际开发建议

场景 推荐 简单拼接 用 + 更直观 多个字符串拼接 + 或模板字符串 ` 明确语义、函数式风格 用 concat() 需要类型安全 用 concat() + 手动转换

总结一句话：

+ 更灵活、更常用，concat() 更语义化、适合函数式风格，二者各有用途。

在 ES6 中，模板字符串（Template Literals）使用反引号（`）包裹，允许在字符串中直接嵌入变量或表达式，从而替代传统的字符串拼接（加号 +）。

传统拼接 vs 模板字符串

传统方式（ES5及之前）：

const name = 'Alice';
const age = 25;
const message = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';

模板字符串（ES6）：

const name = 'Alice';
const age = 25;
const message = `Hello, my name is ${name} and I am ${age} years old.`;

核心优势：

1. 无需显式加号：变量或表达式通过 ${} 直接嵌入字符串。
2. 支持多行字符串：无需 \n 或字符串拼接。

const text = `This is
a multi-line
string.`;

3. 支持表达式计算：

const a = 5, b = 10;
console.log(`Sum is ${a + b}.`); // 输出 "Sum is 15."

总结： 模板字符串通过 ${} 语法让字符串拼接更直观，完全替代了传统的 + 拼接方式，尤其在处理复杂字符串时更简洁易读。

如果你想深入了解字符串处理、模板字符串、性能对比等，我会可以继续展开，提供易懂，优质的文章。