前端JS经常使用字符串处理实例

时间 2019-11-30

原文原文链接

字符串处理经常用在处理服务器回传的数据、动态拼接生成html等，是前端面试的必考题。
我以为字符串处理这种经常使用到的，必定要了然于心，否则用到时急急忙忙去翻手册费半天。

入正题，首先提出日常遇到的几个需求，后面咱们来一步一步解决它：

需求1：根据服务器返回的json数据，动态添加元素到列表<ul> 【难度：1】

使用场景：瀑布流下拉刷新、延迟加载、ajax点击加载列表css

html模板是这样：html

<ul class="icon_list">
            <li><a href="#"><img src="images/floor1-1.png" alt=""></a>
                <p>360杀毒</p>
                <p>10.00M</p>
                <a href="">下载</a></li>
            <li><a href="#"><img src="images/floor1-2.png" alt=""></a>
                <p>软件管家</p>
                <p>10.00M</p>
                <a href="">下载</a></li>

</ul>

json是这样：前端

{softList:[
    {"name":"360杀毒","size":"10.00M","png_src":"/floor1-1.png","href":"www.baidu.com"},
    {"name":"软件管家","size":"12.00M","png_src":"/floor1-2.png","href":"www.baidu.com"},
    {"name":"360浏览器","size":"14.00M","png_src":"/floor1-3.png","href":"www.baidu.com"},
    {"name":"360商场","size":"10.20M","png_src":"/floor1-4.png","href":"www.baidu.com"},
    {"name":"影视大全","size":"11.00M","png_src":"/floor1-5.png","href":"www.baidu.com"},
    {"name":"万能省电","size":"13.00M","png_src":"/floor1-6.png","href":"www.baidu.com"},
    {"name":"360wifi","size":"25.10M","png_src":"/floor1-7.png","href":"www.baidu.com"},
    {"name":"360ROOT","size":"10.90M","png_src":"/floor1-8.png","href":"www.baidu.com"},
]}

结果是这样：面试

解决思路：将动态生成各个<li>拼接成字符串，追加到父节点的innerHTML里面ajax

下面给出直接可运行的页面代码（本文太长的代码都会默认折叠了一下）：json

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>page name</title>
    <style>
        /*超连接去下划线*/
        a {
            display: block;
            overflow: hidden;
            outline: none;
            text-decoration: none;
            color: black;
            font-family: "Microsoft YaHei UI";
            color: #333;
        }
        /*li去掉点号*/
        li {
            list-style-type: none;
            text-align: center;
        }
        .floor h2 {
            font-size: 1.6em;
            margin-top: 10px;
            margin-left: 4%;
            color: #333333;
        }
        /*响应式布局核心css*/
        .floor .icon_list{
            min-width: 320px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .floor .icon_list li {
            width: 25%;
            margin-bottom: 15px;
        }

        .floor .icon_list li img {
            width: 60%;
        }

        .floor .icon_list li p {
            margin: 4px;
            font-size: 15px;
            color: #33333f;
        }

        .floor .icon_list li p:nth-child(3) {
            color: #ccc;
            font-size: 14px;
        }

        .floor .icon_list li a:last-child {
            margin: 5px auto 0;
            width: 66%;
            height: 25px;
            border: none;
            line-height: 27px;
            border-radius: 18px;
            background: #def3e1;
            font-size: 14px;
            color: #23ac38;
        }

    </style>
</head>

<body>

<!--手机软件-->
<div class="content">
    <div class="floor">
        <h2>手机软件</h2>
        <ul class="icon_list" id="softList">
        </ul>
    </div>
</div>
</div>
</body>
<script>
    //json能够经过ajax加载进来
    var json = {
        softList: [
            {"name": "360杀毒", "size": "10.00M", "png_src": "/floor1-1.png", "href": "www.baidu.com"},
            {"name": "软件管家", "size": "12.00M", "png_src": "/floor1-2.png", "href": "www.baidu.com"},
            {"name": "360浏览器", "size": "14.00M", "png_src": "/floor1-3.png", "href": "www.baidu.com"},
            {"name": "360商场", "size": "10.20M", "png_src": "/floor1-4.png", "href": "www.baidu.com"},
            {"name": "影视大全", "size": "11.00M", "png_src": "/floor1-5.png", "href": "www.baidu.com"},
            {"name": "万能省电", "size": "13.00M", "png_src": "/floor1-6.png", "href": "www.baidu.com"},
            {"name": "360wifi", "size": "25.10M", "png_src": "/floor1-7.png", "href": "www.baidu.com"},
            {"name": "360ROOT", "size": "10.90M", "png_src": "/floor1-8.png", "href": "www.baidu.com"},

        ]
    }
    //动态添加’手机软件 处的列表元素
    function addSoftList(softList) {
        //a要使用getElementById，若是使用getElementsByClassName注意要加[0]
        var a = document.getElementById('softList');
        //var a = document.getElementsByClassName('icon_list')[0];
        var str = '';
        //一条li的格式
        /*<li><a href="#"><img src="images/floor1-1.png" alt=""></a>
         <p>360杀毒</p>
         <p>10.00M</p>
         <a href="">下载</a></li>*/
        for (var i in softList) {
            str += '<li><a href="#"><img src="images' + softList[i].png_src + '" alt=""></a>' +
                    '<p>' + softList[i].name + '</p>' +
                    '<p>' + softList[i].size + '</p>' +
                    '<a href="' + softList[i].href + '">下载</a></li>';
        }
        //追加元素
        a.innerHTML += str;
    };
    //这样调用
    addSoftList(json.softList);
</script>
</html>

展开代码

顺便也作成了Flex响应式布局，不管页面是什么尺寸都会自动适应页面大小。数组

不明白什么是Flex响应式布局的可参见 http://www.cnblogs.com/chris-oil/p/5831028.html浏览器

需求2：生成驼峰法字符串【难度：1】

例如：border-bottom-color->borderBottomColor 服务器

解决思路：将字符串按单词切分->将每一个子字符串首字母大写->合成新字符串（分别用到split函数、toUpperCase函数、join函数）ide

var str='border-bottom-color'; 
String.prototype.transform = function(){ 
var arr = this.split('-'); //切分单词，存到数组
var _length=arr.length;
for(var i=1;i<_length;i++){ 
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substring(1); 
//首字母大写
} 
return arr.join('') ;//合并数组到字符串
} 
 alert(str.transform());

展开代码

前端JS经常使用字符串处理实例

字符串处理经常用在处理服务器回传的数据、动态拼接生成html等，是前端面试的必考题。

我以为字符串处理这种经常使用到的，必定要了然于心，否则用到时急急忙忙去翻手册费半天。

入正题，首先提出日常遇到的几个需求，后面咱们来一步一步解决它：

需求1：根据服务器返回的json数据，动态添加元素到列表<ul> 【难度：1】

需求2：生成驼峰法字符串 【难度：1】

需求2：生成驼峰法字符串【难度：1】