前端js入门——JavaScript 字符串拼接 - 好文

实际应用中，目标字符串的生成可能需要多个数据的拼接。

由于应用频繁，几乎是所有编程语言都必须掌握的操作，当然每种语言具有各自特点。

本文将通过代码实例详细介绍一下JavaScript如何实现字符串拼接操作。

一.使用加号（+）拼接：

加号不但可以实现算数运算，也可以实现字符串拼接操作。

代码实例如下：

console.log(``"兴趣部落"``+``"海岛市南区"``);

上述代码使用加号（+）实现两个字符串的拼接操作。

目的是演示加号拼接功能，实际项目中根本没可能这么用。

let webName=``"兴趣部落"``;

let address=``"海岛市南区"``;

let str=webName + "位于" + address;

console.log(str);

代码实现了字符串拼接效果，webName与address是变量，不能将它们直接包裹于引号之中。

否则，webName与address就不是变量了，变量名称直接就成为字符串的一部分。

代码实例如下：

let webName=``"兴趣部落"``;

let address=``"海岛市南区"``;

let str=``"webName位于address"``;

console.log(str);

二.字符串与非字符串数据拼接：

前面代码都是字符串之间的拼接操作，其实字符串数据也可以与非字符串数据进行拼接。

首先看一段代码实例：

console.log(5+``"5"``);

可数字5与字符串"5"进行拼接，首先会将数字转换为字符串，然后再进行拼接操作。

当然字符串不止可以和数字进行拼接，也可以与其他数据类型进行拼接操作，本文不再演示。

内在原理是，不同数据类型进行拼接操作的时候，首先会进行隐式数据类型转换。

考虑到篇幅问题，本文不做介绍。

三.模板字符串实现拼接：

ES2015之前只能通过加号实现字符串拼接，如果数据量较大，那么代码看起来比较繁琐。

现在新增了更为简单的字符串拼接方式，使用模板字符串与占位符可以实现更为简洁直观的拼接操作。

代码实例如下：

let webName=``"兴趣部落"``;

let address=``"海岛市南区"``;

let str =webName位于{webName}位于webName位于{address};

console.log(str);

上面利用模板字符串与占位符实现了非常简洁直观的拼接操作。

省去了加号运算符，这也是简洁直观的关键因素。

四.字符串一旦创建不可更改：

字符串一旦创建，其值不可更改，看如下代码实例：

let str=``"兴趣部落"``;

let str=str+``"海岛市南区"``;

console.log(str);

最后打印结果是"兴趣部落海岛市南区"，这时候肯定会有朋友问，字符串的值不是已经改变了吗。其实不然，改变的是str变量值，上述操作首先销毁原来字符串"兴趣部落"，然后再将拼接后的新字符串"兴趣部落市南区"赋值给变量str，并不是直修改原字符串。

最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享 <https://jq.qq.com/?_wv=1027&k=5LhH9Ed>
），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。

热门工具换一换