JavaScript 字符串怎么拼接

平时写网页的时候，总会碰到要把两段文字凑成一段的情况：比如把用户输入的“小明”和“你好”拼成“小明你好”，或者把商品名和价格拼成“T恤 99元”。这种把零散文字拼到一起的操作，在JavaScript里叫字符串拼接，是前端开发里最常用的基础操作之一，今天就用大家熟悉的生活例子把它讲明白。

最常用的“加号拼接”：像搭积木凑句子

第一种方法也是新手最容易想到的，就是用加号“+”把多个字符串连起来，像搭积木一样把小木块拼成完整的造型。比如你要做一个问候语，先定义两个变量存姓氏和打招呼的话：

`javascript

const surname = "李";

const greeting = "，今天过得好吗？";

const fullGreeting = surname + "先生" + greeting;

`

运行后fullGreeting会得到“李先生，今天过得好吗？”。这种方法的好处是简单直观，不管多少段都能直接用加号连，适合新手快速上手。但它有个小坑要注意：如果不小心把数字和字符串用加号连，数字会自动变成文字，比如10 + "℃"会得到“10℃”，但如果写成"温度是" + 10也是对的，可如果是10 + 5 + "度"，会先算10加5得15，再变成“15度”，而如果是"10" + 5就会直接变成“105”，这一点要留心别踩坑。

更清爽的“模板字符串”：不用加引号和加号

如果觉得用加号连太多字符串会显得乱，尤其是要拼很长的句子时，还有一种更清爽的方法——模板字符串，它是ES6（JavaScript的新一代标准）里推出的，就像把要拼的内容直接写在一个“大引号”里，这个大引号是键盘上数字1左边的那个反引号（`），不是普通的单双引号。

比如要做一个商品信息，用模板字符串写出来就很清楚：

`javascript

const product = "纯棉T恤";

const price = 99;

const info = ${product} 售价${price}元;

`

运行后info就是“纯棉T恤 售价99元”。它的优势有两个：一是不用每段都加引号和加号，直接把变量放在${}里就行，看着干净；二是可以直接换行，比如要写一段地址，直接按回车换行就不会出错，不用像加号拼接那样加\n（换行符），写多行内容时特别方便。

适合批量拼接的“数组join法”：处理多段内容更省心

如果要拼的内容是一段一段的，比如要把用户选的三个标签“运动”“休闲”“纯棉”拼成标签字符串，用数组的join方法会更高效。先把所有内容放进一个数组，再用join指定拼接时的分隔符，比如用顿号：

`javascript

const tags = ["运动", "休闲", "纯棉"];

const tagStr = tags.join("、");

`

得到的tagStr就是“运动、休闲、纯棉”。这种方法特别适合内容数量不确定的情况，比如从后台拿到多个标签，或者循环生成的文字，不用反复加加号，代码更简洁，也不容易出错。

平时开发时，加号拼接适合短内容，模板字符串适合需要嵌入变量或换行的场景，数组join法适合批量、多段内容的拼接，根据实际情况选就行，不用纠结哪一种更好，好用的就是最适合的。