前端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());