国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

30個前端開發(fā)中常用的JavaScript函數(shù)

這篇具有很好參考價值的文章主要介紹了30個前端開發(fā)中常用的JavaScript函數(shù)。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

?????作者名稱:DaenCode
??作者簡介:啥技術(shù)都喜歡搗鼓搗鼓,喜歡分享技術(shù)、經(jīng)驗、生活。
??人生感悟:嘗盡人生百味,方知世間冷暖。

30個前端開發(fā)中常用的JavaScript函數(shù),前端,javascript,Vue,前端

前言

在前端開發(fā)中通常會用到校驗函數(shù),檢驗是否為空、手機號格式、身份證格式等等?,F(xiàn)按照用途分類整理出了30個常用的方法,在Vue中也可以使用,方法邏輯都是一樣的??梢院艽蟮奶岣唛_發(fā)效率。同時初學者也可以拿它用來學習JS的使用。
30個前端開發(fā)中常用的JavaScript函數(shù),前端,javascript,Vue,前端

一.JS常用校驗函數(shù)

1.1.檢驗是否為空(NULL/空串)

function checkNull(str){  
    if(str == null || str == ""){  
        return false;  
    }  
    return true;  
}  

1.2校驗是否為純數(shù)字

function checkNum(num){
   if(isNaN(num)){  
        return false;  
    }  
    return true; 
}

1.3校驗是否為純數(shù)字(正則)

function checkNum(num){  
     var re = /^[0-9]+.?[0-9]*$/; //判斷字符串是否為數(shù)字 (判斷正整數(shù) /^[1-9]+[0-9]*]*$/)  
     if (!re.test(num)){  
        return false;  
     }  
    return true;  
} 

1.4.校驗手機號

function checkPhone(phone){  
  //驗證規(guī)則,第一位是【1】開頭,第二位有【3,4,5,7,8】,第三位及以后可以是【0-9】  
    var reg = /^1[3|4|5|7|8][0-9]{9}$/; 
    if(!reg.test(phone)){  
        return false;  
    }  
    return true;  
}  

1.5.校驗座機號

function checkTel(tel) {  
    var reg = /^(\d3,4|\d{3,4}-)?\d{7,8}$/;  
    if (!reg.test(tel)) {  
        return false;  
    }  
    return true;  
} 

1.6.校驗IP

var checkIp = function(ip){    
    var reSpaceCheck = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;    
    if (reSpaceCheck.test(ip)){    
        ip.match(reSpaceCheck);    
        if (RegExp.$1 <= 255 && RegExp.$1 >= 0 && RegExp.$2 <= 255 && RegExp.$2 >=0    
          &&RegExp.$3 <= 255 && RegExp.$3 >= 0 && RegExp.$4 <= 255 && RegExp.$4>=0){    
            return true;     
        }else{    
            return false;    
        }    
    }else{    
        return false;    
    }    
}

1.7.校驗URL地址

function checkUrl(url) {  
    var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;  
    if (!reg.test(url)) {  
        return false;  
    }  
    return true;  
} 
// 是否為網(wǎng)址
function IsURL(strUrl) {
    var regular = /^\b(((https?|ftp):\/\/)?[-a-z0-9]+(\.[-a-z0-9]+)*\.(?:com|edu|gov|int|mil|net|org|biz|info|name|museum|asia|coop|aero|[a-z][a-z]|((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d))\b(\/[-a-z0-9_:\@&?=+,.!\/~%\$]*)?)$/i;
    if (regular.test(strUrl)) {
        return true;
    }
    else {
        return false;
    }
}

1.8.校驗身份證

function checkIdCard(idCard) {  
    var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"內(nèi)蒙古",21:"遼寧",22:"吉林",23:"黑龍江",31:"上海",32:"江蘇",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山東",41:"河南",42:"湖北",43:"湖南",44:"廣東",45:"廣西",46:"海南",50:"重慶",51:"四川",52:"貴州",53:"云南",54:"西藏",61:"陜西",62:"甘肅",63:"青海",64:"寧夏",65:"新疆",71:"臺灣",81:"香港",82:"澳門",91:"國外"}  
    var iSum = 0;  
    var info = "";  
    if (!/^\d{17}(\d|x)$/i.test(idCard)){  
        return false;//身份證長度或格式錯誤  
    }  
    idCard = idCard.replace(/x$/i, "a");  
    if (aCity[parseInt(idCard.substr(0, 2))] == null){  
        return false;//身份證地區(qū)非法;  
    }  
    var sBirthday = idCard.substr(6, 4) + "-" + Number(idCard.substr(10, 2)) + "-" + Number(idCard.substr(12, 2));  
    var d = new Date(sBirthday.replace(/-/g, "/"));  
    if (sBirthday != (d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())){  
        return false;//身份證上的出生日期非法;  
    }  
    for (var i = 17; i >= 0; i--){  
        iSum += (Math.pow(2, i) % 11) * parseInt(idCard.charAt(17 - i), 11);  
    }  
    if (iSum % 11 != 1){  
        return false;//身份證號非法;   
    }  
      
    return true;  
      
}

1.9.校驗日期

/* 
 * 檢驗日期 
 * 格式為YYYY-MM-DD 
 */  
function checkDate(date) {  
    var result = date.match(/((^((1[8-9]\d{2})|([2-9]\d{3}))(-)(10|12|0?[13578])(-)(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(11|0?[469])(-)(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(0?2)(-)(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)(-)(0?2)(-)(29)$)|(^([3579][26]00)(-)(0?2)(-)(29)$)|(^([1][89][0][48])(-)(0?2)(-)(29)$)|(^([2-9][0-9][0][48])(-)(0?2)(-)(29)$)|(^([1][89][2468][048])(-)(0?2)(-)(29)$)|(^([2-9][0-9][2468][048])(-)(0?2)(-)(29)$)|(^([1][89][13579][26])(-)(0?2)(-)(29)$)|(^([2-9][0-9][13579][26])(-)(0?2)(-)(29)$))/);  
    if (result == null) {  
        return false;  
    }  
    return true;  
} 

1.10.校驗郵箱

function checkEmail(email){  
    var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;   
    if(!reg.test(email)){  
        return false;  
    }  
    return true;  
}

1.11.校驗金額

function checkMoney(money) {  
    if (money == '') {  
        return false;  
    }  
    money = money.replace(/(^\s*)|(\s*$)/g, "");  
    var reg = /^[0-9]*\.?[0-9]{0,2}$/;  
    if (!checkNum(money)) {  
        return false;  
    }  
    if (money.length > 3) {  
        if (money.substr(0, 1) == "0") {  
            if (money.substr(3, money.length).length > 2) {  
                return false;  
            }  
        }  
    }  
    if(!reg.test(money)){  
        return false;  
    }  
    return true;  
}

1.12.校驗是否為漢字

function checkChar(charValue) {  
    var reg = /^[\u4e00-\u9fa5]{0,}$/;  
    if(!reg.test(charValue)){  
        return false;  
    }  
    return true;  
} 

1.13.檢測密碼強度

function checkPwd(str) {
 var nowLv = 0;
 if (str.length < 6) {
 return nowLv
 }
 ;
 if (/[0-9]/.test(str)) {
 nowLv++
 }
 ;
 if (/[a-z]/.test(str)) {
 nowLv++
 }
 ;
 if (/[A-Z]/.test(str)) {
 nowLv++
 }
 ;
 if (/[\.|-|_]/.test(str)) {
 nowLv++
 }
 ;
 return nowLv;
}
checkPwd('123') // 0
checkPwd('123ASHD') // 2
checkPwd('12asdASAD') // 3
checkPwd('123ASHD)(&!a_') // 4

1.14.校驗url鏈接是否有效

function getUrlState(URL) {
    var suc = false;
    var xmlhttp = new ActiveXObject("microsoft.xmlhttp");
    xmlhttp.Open("GET", URL, false);
    try {
        xmlhttp.Send();
    } catch (e) {
    } finally {
        var result = xmlhttp.responseText;
        if (result) {
            if (xmlhttp.Status == 200) {
                suc = true;
            } else {
                suc = false;
            }
        } else {
            suc = false;
        }
    }
    return suc;
}

二.校驗常用表達式

2.1.校驗數(shù)字的表達式

數(shù)字:^[0-9]*$ 
n位的數(shù)字:^\d{n}$
至少n位的數(shù)字:^\d{n,}$ 
m-n位的數(shù)字:^\d{m,n}$ 
零和非零開頭的數(shù)字:^(0|[1-9][0-9]*)$ 
非零開頭的最多帶兩位小數(shù)的數(shù)字:^([1-9][0-9]*)+(.[0-9]{1,2})?$ 
帶1-2位小數(shù)的正數(shù)或負數(shù):^(\-)?\d+(\.\d{1,2})?$ 
正數(shù)、負數(shù)、和小數(shù):^(\-|\+)?\d+(\.\d+)?$ 
有兩位小數(shù)的正實數(shù):^[0-9]+(.[0-9]{2})?$
有1~3位小數(shù)的正實數(shù):^[0-9]+(.[0-9]{1,3})?$
非零的正整數(shù):^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
非零的負整數(shù):^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
非負整數(shù):^\d+$ 或 ^[1-9]\d*|0$
非正整數(shù):^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
非負浮點數(shù):^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
非正浮點數(shù):^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
正浮點數(shù):^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
負浮點數(shù):^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮點數(shù):^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

2.2.校驗字符的表達式

漢字:^[\u4e00-\u9fa5]{0,}$ 
英文和數(shù)字:^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$ 
長度為3-20的所有字符:^.{3,20}$ 
由26個英文字母組成的字符串:^[A-Za-z]+$ 
由26個大寫英文字母組成的字符串:^[A-Z]+$ 
由26個小寫英文字母組成的字符串:^[a-z]+$ 
由數(shù)字和26個英文字母組成的字符串:^[A-Za-z0-9]+$ 
由數(shù)字、26個英文字母或者下劃線組成的字符串:^\w+$ 或 ^\w{3,20}$ 
中文、英文、數(shù)字包括下劃線:^[\u4E00-\u9FA5A-Za-z0-9_]+$
 中文、英文、數(shù)字但不包括下劃線等符號:^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
 可以輸入含有^%&',;=?$\"等字符:[^%&',;=?$\x22]+
 禁止輸入含有~的字符:[^~\x22]+

2.3.特殊需求表達式

Email地址:^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ 
域名:[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.? 
InternetURL:[a-zA-z]+://[^\s]*^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ 
手機號碼:^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$ 
電話號碼("XXX-XXXXXXX""XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$  
國內(nèi)電話號碼(0511-4405222、021-87888822):\d{3}-\d{8}|\d{4}-\d{7} 
身份證號(15位、18位數(shù)字)^\d{15}|\d{18}$ 
短身份證號碼(數(shù)字、字母x結(jié)尾)^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$ 
帳號是否合法(字母開頭,允許5-16字節(jié),允許字母數(shù)字下劃線)^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密碼(以字母開頭,長度在6~18之間,只能包含字母、數(shù)字和下劃線)^[a-zA-Z]\w{5,17}$
強密碼(必須包含大小寫字母和數(shù)字的組合,不能使用特殊字符,長度在8-10之間)^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

日期格式:^\d{4}-\d{1,2}-\d{1,2}
一年的12個月(0109112)^(0?[1-9]|1[0-2])$
一個月的31天(0109131)^((0?[1-9])|((1|2)[0-9])|30|31)$

 錢的輸入格式:
 1.有四種錢的表示形式我們可以接受:"10000.00""10,000.00", 和沒有 "分""10000""10,000"^[1-9][0-9]*$
 2.這表示任意一個不以0開頭的數(shù)字,但是,這也意味著一個字符"0"不通過,所以我們采用下面的形式:^(0|[1-9][0-9]*)$
 3.一個0或者一個不以0開頭的數(shù)字.我們還可以允許開頭有一個負號:^(0|-?[1-9][0-9]*)$
 4.這表示一個0或者一個可能為負的開頭不為0的數(shù)字.讓用戶以0開頭好了.把負號的也去掉,因為錢總不能是負的吧.下面我們要加的是說明可能的小數(shù)部分:^[0-9]+(.[0-9]+)?$
 5.必須說明的是,小數(shù)點后面至少應(yīng)該有1位數(shù),所以"10."是不通過的,但是 "10""10.2" 是通過的:^[0-9]+(.[0-9]{2})?$
 6.這樣我們規(guī)定小數(shù)點后面必須有兩位,如果你認為太苛刻了,可以這樣:^[0-9]+(.[0-9]{1,2})?$
 7.這樣就允許用戶只寫一位小數(shù).下面我們該考慮數(shù)字中的逗號了,我們可以這樣:^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
 8.13個數(shù)字,后面跟著任意個 逗號+3個數(shù)字,逗號成為可選,而不是必須:^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$

備注:這就是最終結(jié)果了,別忘了"+"可以用"*"替代如果你覺得空字符串也可以接受的話(奇怪,為什么?)最后,別忘了在用函數(shù)時去掉去掉那個反斜杠,一般的錯誤都在這里
xml文件:^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
中文字符的正則表達式:[\u4e00-\u9fa5]
雙字節(jié)字符:[^\x00-\xff] (包括漢字在內(nèi),可以用來計算字符串的長度(一個雙字節(jié)字符長度計2,ASCII字符計1))
空白行的正則表達式:\n\s*\r (可以用來刪除空白行)
HTML標記的正則表達式:<(\S*?)[^>]*>.*?</\1>|<.*? /> (網(wǎng)上流傳的版本太糟糕,上面這個也僅僅能部分,對于復(fù)雜的嵌套標記依舊無能為力)
首尾空白字符的正則表達式:^\s*|\s*$或(^\s*)|(\s*$) (可以用來刪除行首行尾的空白字符(包括空格、制表符、換頁符等等),非常有用的表達式)
騰訊QQ號:[1-9][0-9]{4,} (騰訊QQ號從10000開始)
中國郵政編碼:[1-9]\d{5}(?!\d) (中國郵政編碼為6位數(shù)字

三.手機類型判斷

var BrowserInfo = {    
    userAgent: navigator.userAgent.toLowerCase()
    isAndroid: Boolean(navigator.userAgent.match(/android/ig)),
    isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),
    isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),
    isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),
}

/**
 * 判斷是否移動設(shè)備
 */
function isMobile() {
    if (typeof this._isMobile === 'boolean') {
        return this._isMobile;
    }
    var screenWidth = this.getScreenWidth();
    var fixViewPortsExperiment = rendererModel.runningExperiments.FixViewport
            || rendererModel.runningExperiments.fixviewport;
    var fixViewPortsExperimentRunning = fixViewPortsExperiment
            && (fixViewPortsExperiment.toLowerCase() === "new");
    if (!fixViewPortsExperiment) {
        if (!this.isAppleMobileDevice()) {
            screenWidth = screenWidth / window.devicePixelRatio;
        }
    }
    var isMobileScreenSize = screenWidth < 600;
    var isMobileUserAgent = false;
    this._isMobile = isMobileScreenSize && this.isTouchScreen();
    return this._isMobile;
}

/**
 * 判斷是否移動設(shè)備訪問
 */
function isMobileUserAgent() {
    return (/iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i
            .test(window.navigator.userAgent.toLowerCase()));
}

/**
 * 判斷是否蘋果移動設(shè)備訪問
 */
function isAppleMobileDevice() {
    return (/iphone|ipod|ipad|Macintosh/i.test(navigator.userAgent
            .toLowerCase()));
}

/**
 * 判斷是否安卓移動設(shè)備訪問
 */
function isAndroidMobileDevice() {
    return (/android/i.test(navigator.userAgent.toLowerCase()));
}

/**
 * 判斷是否Touch屏幕
 */
function isTouchScreen() {
    return (('ontouchstart' in window) || window.DocumentTouch
            && document instanceof DocumentTouch);
}

/**
 * 判斷是否在安卓上的谷歌瀏覽器
 */
function isNewChromeOnAndroid() {
    if (this.isAndroidMobileDevice()) {
        var userAgent = navigator.userAgent.toLowerCase();
        if ((/chrome/i.test(userAgent))) {
            var parts = userAgent.split('chrome/');

            var fullVersionString = parts[1].split(" ")[0];
            var versionString = fullVersionString.split('.')[0];
            var version = parseInt(versionString);

            if (version >= 27) {
                return true;
            }
        }
    }
    return false;
}


四.判斷兩個日期大小

//得到日期值并轉(zhuǎn)化成日期格式
//replace(/\-/g, "\/")是根據(jù)驗證表達式把日期轉(zhuǎn)化成長日期格式
//這樣再進行判斷就好判斷了
function validateDate() {
    var beginDate = $("#t_datestart").val();
    var endDate = $("#t_dateend").val();
    if (beginDate.length > 0 && endDate.length>0) {
        var sDate = new Date(beginDate.replace(/\-/g, "\/"));                
        var eDate= new Date(endDate.replace(/\-/g, "\/"));                
        if (sDate > eDate) {
            alert('開始日期要小于結(jié)束日期'); 
            return false;
        }
    }
}


五.回車提交

$("id").onkeypress = function (event) {    
    event = (event) ? event : ((window.event) ? window.event : "")
    keyCode = event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode);    
    if (keyCode == 13) {
        $("SubmitLogin").onclick();
    }
}

六.替換非法字符

function URLencode(sStr) {
return escape(sStr).replace(/\+/g, '%2B').replace(/\"/g, '%22').replace(/\'/g, '%27').replace(/\//g, '%2F');
};

七.獲取當前時間

function GetCurrentDate() {
        var d = new Date();
        var y = d.getYear()+1900;
        month = add_zero(d.getMonth() + 1),
        days = add_zero(d.getDate()),
        hours = add_zero(d.getHours());
        minutes = add_zero(d.getMinutes()),
        seconds = add_zero(d.getSeconds());
        var str = y + '-' + month + '-' + days + ' ' + hours + ':' + minutes + ':' + seconds;        
        return str;
    }; 
function add_zero(temp) {
    if (temp < 10) return "0" + temp;
    else return temp;
}


八.加入收藏夾

function AddFavorite(sURL, sTitle) {
    try {
        window.external.addFavorite(sURL, sTitle);
    } catch (e) {
        try {
            window.sidebar.addPanel(sTitle, sURL, "");
        } catch (e) {
            alert("加入收藏失敗,請使用Ctrl+D進行添加");
        }
    }
}

九.IP地址轉(zhuǎn)整型

function _ip2int(ip) {
    var num = 0;
    ip = ip.split(".");
    num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256
            + Number(ip[2]) * 256 + Number(ip[3]);
    num = num >>> 0;
    return num;
}

十.整型解析為IP

function _int2iP(num) {
    var str;
    var tt = new Array();
    tt[0] = (num >>> 24) >>> 0;
    tt[1] = ((num << 8) >>> 24) >>> 0;
    tt[2] = (num << 16) >>> 24;
    tt[3] = (num << 24) >>> 24;
    str = String(tt[0]) + "." + String(tt[1]) + "." + String(tt[2]) + "."
            + String(tt[3]);
    return str;
}

十一.數(shù)組元素是否重復(fù)

function isRepeat(arr) {  //arr是否有重復(fù)元素
    var hash = {};
    for (var i in arr) {
        if (hash[arr[i]) return true;
        hash[arr[i] = true;
    }
    return false;
    };

十二.生成隨機數(shù)

function randombetween(min, max){
    return min + (Math.random() * (max-min +1));
    }


十三.數(shù)組去重

function unique(arr) {
    var result = [], json = {};
    for (var i = 0, len = arr.length; i < len; i++){
        if (!json[arr[i]) {
            json[arr[i] = 1;
            result.push(arr[i]);  //返回沒被刪除的元素
        }
    }
    return result;
}

十四.到某一個時間的倒計時

function getEndTime(endTime){
    var startDate=new Date();  //開始時間,當前時間
    var endDate=new Date(endTime); //結(jié)束時間,需傳入時間參數(shù)
    var t=endDate.getTime()-startDate.getTime();  //時間差的毫秒數(shù)
    var d=0,h=0,m=0,s=0;
    if(t>=0){
      d=Math.floor(t/1000/3600/24);
      h=Math.floor(t/1000/60/60%24);
      m=Math.floor(t/1000/60%60);
      s=Math.floor(t/1000%60);
    } 
    return "剩余時間"+d+"天 "+h+"小時 "+m+" 分鐘"+s+" 秒";
}

getEndTime('2018/8/8 8:0:0') // "剩余時間172天 12小時 10 分鐘47 秒"

十五.模板引擎

var render = function(tpl,data){
    return tpl.replace(/\{\{(.+?)\}\}/g,function(m,m1){
        return data[m1]
    })
}

render('我是{{name}},年齡{{age}},性別{{sex}}',{
    name:'姓名',
    age:18,sex:'女',
}) 
// "我是姓名,年齡18,性別女"

寫在最后

最后,感謝大家對于本博文的閱讀。同時,也希望此博文對你的日常開發(fā)或者學習很有幫助。文中如有錯誤或者不足之前,請大家在評論區(qū)留言,感激不盡。
30個前端開發(fā)中常用的JavaScript函數(shù),前端,javascript,Vue,前端文章來源地址http://www.zghlxwxcb.cn/news/detail-620592.html

到了這里,關(guān)于30個前端開發(fā)中常用的JavaScript函數(shù)的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔相關(guān)法律責任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • 【JavaScript】3.4 JavaScript在現(xiàn)代前端開發(fā)中的應(yīng)用

    【JavaScript】3.4 JavaScript在現(xiàn)代前端開發(fā)中的應(yīng)用

    JavaScript 是現(xiàn)代前端開發(fā)的核心。無論是交互效果,還是復(fù)雜的前端應(yīng)用,JavaScript 都發(fā)揮著關(guān)鍵作用。在本章節(jié)中,我們將探討 JavaScript 在現(xiàn)代前端開發(fā)中的應(yīng)用,包括如何使用 JavaScript 來處理用戶交互、動態(tài)內(nèi)容、前端路由、API 請求等。 JavaScript 是處理用戶交互的主要工

    2024年02月04日
    瀏覽(26)
  • 前端開發(fā)——Javascript知識(介紹)

    目錄 有關(guān)JavaScript的知識? JavaScript的優(yōu)點? ?JavaScript的領(lǐng)域 JavaScript的組成 JavaScript的特點 第一個JavaScript程序 在 HTML 文檔中嵌入 JavaScript 代碼 在腳本文件中編寫 JavaScript 代碼 JavaScript內(nèi)容? Html內(nèi)容? JavaScript 代碼執(zhí)行順序 JavaScript中的幾個重要概念 標識符 保留字 區(qū)分

    2024年02月01日
    瀏覽(25)
  • 前端開發(fā)——JavaScript的條件語句

    ? 世界不僅有黑,又或者白 世界而是一道精致的灰 ?——Lungcen ? ? 目錄 條件判斷語句 if 語句 if else 語句 if else if else 語句 ?switch語句 break case 子句 default語句 while循環(huán)語句 do while循環(huán)語句 for循環(huán)語句 for 循環(huán)中的三個表達式 for 循環(huán)嵌套 for 循環(huán)變體——for in for 循環(huán)

    2023年04月21日
    瀏覽(24)
  • 【前端知識】JavaScript——設(shè)計模式(工廠模式、構(gòu)造函數(shù)模式、原型模式)

    工廠模式是一種眾所周知的設(shè)計模式,廣泛應(yīng)用于軟件工程領(lǐng)域,用于抽象創(chuàng)建特定對象的過程。 優(yōu)點:可以解決創(chuàng)建多個類似對象的問題 缺點:沒有解決對象標識問題(即新創(chuàng)建的對象是什么類型) 示例: 構(gòu)造函數(shù)模式與工廠模式相比,沒有顯式地創(chuàng)建對象,其屬性和方

    2024年02月15日
    瀏覽(54)
  • vue(javaScript) 操作字符串的常用方法

    1. 獲取字符串長度 JavaScript中的字符串有一個length屬性,該屬性可以用來獲取字符串的長度 2. 獲取字符串指定位置的值 charAt()和charCodeAt()方法都可以通過索引來獲取指定位置的值 charAt() 方法獲取到的是指定位置的字符; charCodeAt()方法獲取的是指定位置字符的Unicode值。 (1)

    2024年02月03日
    瀏覽(27)
  • 前端隨筆:HTML/CSS/JavaScript和Vue

    前端隨筆:HTML/CSS/JavaScript和Vue

    最近因為工作需要,需要接觸一些前端的東西。之前雖然大體上了解過 HTML 、 CSS 和 JavaScript ,也知道 HTML 定義了內(nèi)容、 CSS 定義了樣式、 JavaScript 定義了行為,但是卻沒有詳細的學習過前端三件套的細節(jié)。而最近的工作中需要使用 Vue ,并且想到未來的工作中使用 Vue 能夠更

    2024年02月16日
    瀏覽(26)
  • 〖大前端 - 基礎(chǔ)入門三大核心之JS篇?〗- JavaScript 的數(shù)組的常用方法 (一)

    〖大前端 - 基礎(chǔ)入門三大核心之JS篇?〗- JavaScript 的數(shù)組的常用方法 (一)

    當前子專欄 基礎(chǔ)入門三大核心篇 是免費開放階段 。 推薦他人訂閱,可獲取扣除平臺費用后的35%收益,文末名片加V! 說明:該文屬于 大前端全棧架構(gòu)白寶書專欄, 目前階段免費開放 , 購買任意白寶書體系化專欄可加入 TFS-CLUB 私域社區(qū)。 福利:除了通過訂閱\\\"白寶書系列專

    2024年02月07日
    瀏覽(23)
  • 前端技術(shù)Html,Css,JavaScript,Vue3

    1.基本標簽 2.文本格式化 3.鏈接 4.圖片 5.無序列表 6.有序列表 7.表格 8.表單 1.選擇器 2.文本和字體 3.鏈接 4.隱藏 5.定位position 6.浮動 7.對齊 8.圖像 1.輸出 2.函數(shù) 3.常用事件 4.DOM 5.改變Html 6.DOM 元素 (節(jié)點) 尾部創(chuàng)建新的 HTML 元素 (節(jié)點) - appendChild() 頭部創(chuàng)建新的 HTML 元素 (節(jié)點)

    2024年02月13日
    瀏覽(53)
  • [前端開發(fā)] 常見的 HTML CSS JavaScript 事件

    代碼示例指路 常見的 HTML、CSS、JavaScript 事件代碼示例 在 Web 開發(fā)中,事件是用戶與網(wǎng)頁交互的重要方式之一。通過事件,用戶可以與頁面元素進行交互,觸發(fā)相應(yīng)的功能或效果。本文將介紹常見的 HTML、CSS、JavaScript 事件,以及事件對象和事件代理的概念。 鼠標事件 鼠標事

    2024年02月19日
    瀏覽(30)
  • 2023年web前端開發(fā)之JavaScript進階(一)

    2023年web前端開發(fā)之JavaScript進階(一)

    接上篇博客進行學習,通俗易懂,詳細 博客地址: 2023年web前端開發(fā)之JavaScript基礎(chǔ)(五)基礎(chǔ)完結(jié)_努力的小周同學的博客-CSDN博客 學習 作用域 、變量提升、 閉包 等語言特征,加深對 JavaScript 的理解,掌握變量賦值、函數(shù)聲明的簡潔語法, 降低代碼的冗余度 。 理解作用域?qū)Τ绦?/p>

    2024年02月03日
    瀏覽(37)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包