JS字符串拼接

2017-03-17  本文已影响0人  你单排吧

分享一个比较简单,又能拿出去装逼的技术——JS字符串拼接。

适用人群:JS学习爱好者;

适用场合:跟一群JS初学者在一起时、跟女同学独处时等。

那么接下来开始吧:

        1、假如我需要画出三个盒子,每个盒子里面分别是姓名和年龄,那么我的代码可以这么写(当然,你也可以尝试到浏览器观看效果,看看是否会与结尾呈现的最终要过一致):

        2、但是,目前我的需求是比较简单的,只有三个盒子,就算把名字和年龄全改了,也不会太麻烦。而现在如果有100个div,那么你就需要输入100次人名和年龄,那么这是非常痛苦的,显然不能把这些数据写死。这种情况往往我们会从后台调取一些数据,而在前台的代码中,我们需要让这些数据“变活”,这个时候,可以参考下面的做法:

       ① 先定义一个数组,用来存放这些数据:

② 将div>h1+p的这个结构复制一下,然后通过JS将它们以字符串的形式拼接起来:

        ③ 现在看到的文字(张三 and 此人今年23岁)是一个错误的写法,而且就算加了引号,也是变成了字符串,那么这个值就是死的,这样就无法动态控制这些数据,于是,我们可以开始考虑,将上面数组中的数据导入到现在文字所处的区域。

        这里有两个步骤要注意:

        一是先将原先html中的所有代码注释掉,避免干扰;

        二是可以通过for循环来将三组数据遍历到文字所在的地方,具体方法如下:

      ④ 这里有个小地方要解释一下,bd指的是body标签的id名。

       3、通过这个方法,就可以实现将data里面的数据全部转移到页面中呈现,最终的效果与一开始是一样的:

        4、最后总结一下:这里面运用到的知识其实很浅,更好的说法是:这只是一个网页开发的小技巧,希望大家可以作为参考与了解!

此处提供源码下载:

https://github.com/Macharf/JS-string-concatenation

上一篇 下一篇

猜你喜欢

热点阅读