前端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，并不是直修改原字符串。

*声明：本文于网络整理，版权归原作者所有，如来源信息有误或侵犯权益，请联系我们删除或授权事宜。

公众号ID：tzbc666扫码关注最新动态点个好看和转发也是一种支持哟！