web前端面试题附答案038-拼接字符串你平时怎么搞？

web前端面试题附答案038-拼接字符串你平时怎么搞？
后续陆续推出大学生解惑系列文章，欢迎把疑惑发给我

拼接字符串还是很常见的，几乎每天都会遇到，那么如果面试官问到这个问题，你能回到多少种方案呢，如果只是 += 是不是就不太好了

1、采用 + 符号的方式

+ 符号简单粗暴，他本身不光可以操作计算数字，拼接字符串，一串一串的拼，也是一把好手。甚至可以定义多个字符串，就这样一直 + 下去
```
<script>
            let str1 = '今天学HTML--';
            let str2 = '明天学CSS--';
            let str3 = '后天学Javascript';
            let str4 = str1 + str2 + str3;
            console.log(str4);
script>
```
这样做的缺点很明显，需要定义多个字符串

2、采用 += 符号的方式

如果单纯的用 + 号，需要定义多个字符串变量，虽然字符串是基础数据类型，存到栈内存中，但定义多个的写法至少也是很low的吧，所以，我们用一下 += 符号，基本一个变量就搞定了。
```
<script>
            let str1 = '今天学HTML--';
            str1 += '明天学CSS--';
            str1 += '后天学Javascript';
            console.log(str1);
script>
```
这样做的缺点就是拼接过程中消耗内存

3、数组字符串互转

但是 += 慢慢大家也觉得不够优秀，因为一个字符串总是这样拼接下去，过程中会比较耗内存。所以人们慢慢推崇先定义一个数组，然后不断的往进push字符串，最后再将数组转为字符串，innerHTML到提前预备好的div或者其他元素中

例如我们要展示类似这样的一个元素区域
```
<div id="demo">
            <p>动态标题p>
            <div style="text-align: center;">动态的内容，内容有很多div>
            <div class="button">
                <button>按钮button>
            div>
div>
```
但现实情况肯定是“动态标题”“动态内容”要异步获取，而且这里只是一个大概的例子，真实的开发场景要比这复杂的多。可能一拼就是好多行，中间又包含数值计算等问题。如下代码段，看上去是不是工整的多
```
<script>
    $(function() {
       let arr = [];
       let str = '';
       let domElement = document.querySelector('#demo');
       $.ajax({
          url: xxx,
          data: xxx,
          sucess: function(data) {
             arr.push(''+ data.title +'
');
             arr.push(''+ data.content +'
');
             arr.push('');
             arr.push('');
             arr.push('
');
```
str = arr.join('');
domElement.innerHTML = str;
}
})
})
script>

这样做其实已经流行了很久了，终于出现了vue react这类模板架构

4、ES6有拼接符

很多时候，涉及到字符串的拼接，越拼越乱，甚至怎么拼都不好使，怎么拼都报错这里多一个单引号，哪里多一个双引号，做过拼接工作的一定是头疼的不行。但是ES6出了一个拼接符，好用到爆炸，我觉得这是ES6最实用的功能之一。通过小撇儿拼接符号，内部涉及到变量的直接通过$符一对花括号拼接。而且里面还可以做运算，写表达式，非常非常棒


<script>
    let str1 = '今天学HTML';
    let str2 = '明天学CSS';
    let str3 = `${str1}----${str2}--${3 + 3}`;
    console.log(str3);
script>

5、总结：

一个小小的字符串也是通过人民群众的智慧不断的改进中，现在ES6的方式可以说已经非常方便了，而且自从用了vue react后，这类拼接的工作变得愈发的少了，直接在template模板中进行开发了。未来再过几年，人们又会发现什么用的优秀的方案呢

1、采用 + 符号的方式

2、采用 += 符号的方式

3、数组字符串互转

4、ES6有拼接符

5、总结：