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('<p>'+ data.title +'</p>');
             arr.push('<div style="text-align: center;">'+ data.content +'</div>');
             arr.push('<div class="button">');
             arr.push('<button>按钮</button>');
             arr.push('</div>');
             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模板中进行开发了。未来再过几年，人们又会发现什么用的优秀的方案呢