JavaScript基础教程之学习过程中遇到的问题：字符串拼接

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

该博客写于：2018年01月04日 11:46:52

前提：

今天在复习for循环的过程中，碰到这样一个问题——就是这个可恶的字符串的拼接问题，一直都看不懂，不知道到底是怎么实现的。中途看过好几次，每次都思考半天，最后还是没有看懂。

话不多说，直接上代码：

原始的p标签长这样：

<p style='font-size:15px'>欢迎光临</p>

之前一直在纠结包围font-size属性的两个单引号，因为我觉得这两个单引号不能从中间断开，是成对存在的。后来发现，我错了。

for(var i = 1; i < 5; i++){
    var str = "<p style='font-size:" + i*10 + "px'>欢迎光临</p>";
    document.write(str);
}   

就是中间这行代码，让我头疼。

今天又重温了一下，开始还是没收获，索性就直接将这行代码var str = "<p style='font-size:" + i*10 + "px'>欢迎光临</p>";上手测试了一下，终于知道是什么原因了，看来还是自己平时的实践太少了，也有可能是自己的理解不到位导致的。

---

测试过程如下：

1.先把p标签写出来，看看到底应该在哪里添加引号断开。

<p style='font-size:15px'>欢迎光临</p>

因为牵扯到修改字号大小，肯定要在15的前面断开，然后拼接起来。

2.于是试了试，做了下面的处理：

var str = "<p style='font-size:" + "15px'>欢迎光临</p>";

发现这样居然可以显示出来。

其实这就相当于把整个字符串（即p标签）分为两半，前面是独立的一部分，后面是独立的一部分，每一部分都分别用双引号引起来，然后再拼接起来成为一个完整的字符串（即p标签）。所以这样做自然没问题。

3.接下来就好办了，只要把数字15分割出来就好了，然后再把数字15和两边的字符串拼接起来就好了。这样做：

这里涉及到 js的隐式类型转换：数字 +“字符串”（自动转换为字符串）

var str = "<p style='font-size:" + 15 + "px'>欢迎光临</p>";

4.此时，只需要把数字15替换为字符串变量，就可以实现了。

var str = "<p style='font-size:" + i*10 + "px'>欢迎光临</p>";

至此，字符串拼接问题就完美解决了！

今天是2018年03月06日 23:48:40

后语

今天在学习json的时候，又碰到了这个可恶的字符串拼接的问题，当时呢，一时半会没有反应过来，只好去群里请教大神帮忙解决。最后被大神一语道破，这才发现自己并没有完全掌握字符串拼接的用法。

情景再现

如图所示：刚开始一直在纠结'+str+'是什么写法？表示完全看不懂这个写法，却忽略的问题的本质。

json = '{"name":" '+str+' "}'
//疑问：这个双引号里面加两个单引号，然后再用两个加号把变量包裹起来，完全看不懂这种写法

//别人：字符串拼接 这有什么看不懂
//我：'+str+' 这是一个整体？
//别人：你从头开始理，第一个单引号对应下一个。
       '{"name":"'  //这是一个整体

//此时，瞬间恍然大悟，发现字符串原来是这样拼接的，怪不得，一直看不懂

继续看图：

为了方便观看，已经显式的标记出来了。