【輪子01】常用字串操作方法

海瑞菌·部落格發表於2019-06-11
字串

開發過程中經常需要用到重複的方法。而這些重複的方法就是輪子。讓未來遇到的一些問題可以通過這些方法進行解決。當然網上的輪子固然好用，但如果自己寫的肯定是最好的，如果自己封裝，那最好也要想辦法解讀它。

一枚活躍於前端圈的90後碼農

不定期分享網際網路前端開發經驗內容

微^信^公^眾^號：Web前端Talk

陪你走在技術成長的路上，歡迎關注！

物件轉url引數

/*
指定物件轉url引數
param 一個物件(一級物件)
*/
function urlEncode(param, key, encode) {
    if (param == null) return '';
    var paramStr = '';
    var t = typeof(param);
    if (t == 'string' || t == 'number' || t == 'boolean') {
        paramStr += '&' + key + '=' + ((encode == null || encode) ? encodeURIComponent(param) : param);
    } else {
        for (var i in param) {
            var k = key == null ? i : key + (param instanceof Array ? '[' + i + ']' : '.' + i)
            paramStr += urlEncode(param[i], k, encode)
        }
    }
    return paramStr;
}
//呼叫
console.log(urlEncode({a:1,b:2}))//&a=1&b=2

獲取url中的引數值

/*
獲取當前url中的指定引數值
name 指定引數名
*/
function getQueryString(name){
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}
//呼叫
console.log(getQueryString("a"))//1
//若當前url為：http://xxx.com?a=1，則返回1，若沒有引數a，則返回null


/*
獲取指定url中的指定引數值
url 指定url
name 指定引數名
*/
function getUrlQueryString(url,name){
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var s=url.indexOf("?");
    var r = url.substring(s+1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}
//呼叫
getUrlQueryString("http://www.baidu.com?a=2&b=3","a")//2

更改url的訪問引數（增加引數、修改引數）

/*
更改url的訪問引數（增加引數、修改引數）
url 你要修改的url
params 你要加入的引數 json格式
*/
function extendUrlSearch(url,params){
    var urlSearch = url.split('?')[1];
    var tempObj = {};
    var paramsArr = []
    var urlHash = '';
    if (urlSearch) {
        // 如果url中有hash，則會包含
        urlSearch = urlSearch.split('&');
        // 提取查詢引數到物件
        urlSearch.map(function (item, i) {
            // 帶上原有的hash
            if (item.indexOf('#') > 0) {
                urlHash = item.split('#')[1]
                item = item.split('#')[0]
            }
            var key = item.split('=')[0],
            val = item.split('=')[1];
            tempObj[key] = val
        })
    }
    // 新增引數, 會覆蓋同名key
    Object.assign(tempObj, params);
    Object.keys(tempObj).map(function (k) {
        paramsArr.push(k + '=' + tempObj[k])
    })
    url = url.split('?')[0] + '?' + paramsArr.join('&')
    if (urlHash) {
        url += '#' + urlHash
    }
    return url;
}
//呼叫
console.log(extendUrlSearch("https://www.baidu.com/",{a:1,b:2}))//https://www.baidu.com/?a=1&b=2

生成指定位數內的隨機數

/*
生成指定位數內的隨機數
length 生成的隨機數最大位數
*/
function random(length){
    var l = '1',
        length = length ? length : 6;
    for (var i = 0; i < length; i++) {
        l += '0';
    }
    l = Number(l);
    return Math.floor(Math.random() * l);
}
//呼叫
console.log(random(2))//0-100之間的整數 不包含0/100

物件轉陣列

/*
物件轉陣列
obj 需要轉換的物件
*/
function toArray(obj){
    var arr = [];
    for (var k in obj) {
        arr.push(obj[k]);
    }
    return arr;
}
//呼叫
console.log(toArray({a:1,b:2,c:3}))//[1,2,3]

模板拼裝字串（根據指定的模板和提供的資料，生成字串。常用於dom生成。類似jsx）

/*
模板拼裝字串
tpl 模板 不能用. 用[]
obj 物件
*/
function tplConnect(tpl,obj){
    var rel = '';
    rel = tpl.replace(/\{([\w|\[|\]]+)\}/gi, function(word, key) {
        if (obj[key] != undefined) {//若obj含有這個屬性，則返回obj的屬性值
            return obj[key];
        } else {
            var oldWord = word;
            word = word.replace(/\{(\w+)\[(\w+)\]\}/gi, function(a, b, c, d) {
                if (obj[b] != undefined && obj[b][c] != undefined) {
                    return obj[b][c];
                } else {
                    return c;
                }
            })
            return word;
        }
    });
    return rel;
}
//呼叫
var tpl='<div>{a}</div><div>{b[x]}</div><div>{b[y]}</div>';
var obj={a:1,b:{x:2,y:3}}
console.log(tplConnect(tpl,obj));//<div>1</div><div>2</div><div>3</div>

獲取當前時間資訊

/*
獲取當前時間資訊
*/
function getDate(){
    var t={};
    var d=new Date();
    t.YY=d.getYear();//取當前年份(從1900年到現在過了幾年)
    t.yyyy=d.getFullYear();//取完整年份(4位)
    t.MM=d.getMonth();//取當前月份(0-11 +1後才是)
    t.dd=d.getDate();//取當前幾號
    t.day=d.getDay();//取當前星期幾
    t.HH=d.getHours();//取當前小時數(0-23)
    t.mm=d.getMinutes();//取當前分鐘數(0-59)
    t.ss=d.getSeconds();//取當前秒數(0-59)
    t.ms=d.getMilliseconds();//取當前毫秒數(0-999)
    t.localeDate=d.toLocaleDateString();//取當前日期(yyyy/MM/dd)
    t.localeTime=d.toLocaleTimeString();//取當前時間(下午hh:mm:ss)
    t.locale=d.toLocaleString();//取當前日期與時間(yyyy/MM/dd 下午hh:mm:ss)
    t.time=d.getTime();//取時間戳
    return t;
}
//呼叫
console.log(getDate())

url引數轉物件

/*
url引數轉物件
*/
function parseQueryString(url){
    var reg_url = /^[^\?]+\?([\w\W]+)$/,
    reg_para = /([^&=]+)=([\w\W]*?)(&|$)/g,
    arr_url = reg_url.exec(url),
    ret = {};
    if (arr_url && arr_url[1]) {
        var str_para = arr_url[1], result;
        while ((result = reg_para.exec(str_para)) != null) {
            ret[result[1]] = result[2];
        }
    }
    return ret;
}
//呼叫
console.log(parseQueryString("http://xxx.com/?a=1&b=2"))//{a:1,b:2}

實現銀行卡號的輸入排序（每4位一個空格）

const formatSplitString=(str='',gap=1,sep=' ')=>{
    if(!str || str.length <gap) return str;
    let successArr=str.match(new RegExp("\\d{"+gap+"}","g"));//匹配成功成陣列 //\d{4}/g
    let successStr=successArr.join('')//匹配成功的字元
    let errorStr=str.replace(successStr,'')//匹配失敗的字元
    let resultStr=successArr.join(sep)+sep+errorStr;//拼接
    return resultStr;
}
console.log(formatSplitString('622848110110634315',4,' '))

模板字串程式碼實現

let template = '你好，我們公司是{{ company }}，我們屬於{{group.name}}業務線，我們在招聘各種方向的人才，包括{{group.jobs[0]}}、{{group["jobs"][1]}}等。';
let obj = {
    group: {
        name: '新制造',
        jobs: ['前端','後臺']
    },
    company: '阿里'
}
function render (template, obj) {
    // 程式碼實現
    let newStr=template;
    let strArr=template.match(/\{\{(.*?)\}\}/g);
    strArr.map(function(str,i){
        let key=str.replace("{{","").replace("}}","").trim();
        let value=eval('obj.'+key)||"";
        newStr=newStr.replace(str,value)
    })
    console.log(newStr)
    document.getElementById("app").innerHTML=newStr;
}
render(template, obj); //返回渲染後的結果

 

相關文章