文章导航

JavaScript 字符串拼接

2019-1-17 01:10| 作者: admin| 查看: 4096| 评论: 0|来自: 蚂蚁部落

实际应用中,目标字符串的生成可能需要多个子字符串拼接而成。

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

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

一.使用加号(+)拼接:

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

代码实例如下:

[JavaScript] 纯文本查看 复制代码
console.log("蚂蚁部落"+"青岛市南区");

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/17/011110uwcstcmerprcctlp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

[JavaScript] 纯文本查看 复制代码运行代码
let webName="蚂蚁部落";
let address="青岛市南区";
let str=webName + "位于" + address;
console.log(str);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/17/011134gscfss0f0svvhcsw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
let webName="蚂蚁部落";
let address="青岛市南区";
let str="webName位于address";
console.log(str);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/17/011201c0qaa9h0az3h6lqq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

首先看一段代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
console.log(5+"5");

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/17/011239o7v5kh4l5hldq524.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

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

考虑到篇幅问题,本文不做介绍,参阅JavaScript 隐式数据类型转换一章节。

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

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

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

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
let webName="蚂蚁部落";
let address="青岛市南区";
let str = `${webName}位于${address}`;
console.log(str);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/17/011326me71gpkj7ezbj1ak.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

省去了加号运算符,这也是简洁直观的关键因素,更多内容参阅如下两篇文章:

(1).占位符参阅${} 占位符用法一章节。

(2).模板字符串参阅JavaScript 模板字符串一章节。

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

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

[JavaScript] 纯文本查看 复制代码运行代码
let str="蚂蚁部落";
let str=str+"青岛市南区";
console.log(str);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/17/011411ra8558a20axa2av2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

3

鲜花
1

握手

雷人

路过

鸡蛋

刚表态过的朋友 (4 人)

最新评论

返回顶部