Javascript字符串拼接小技巧(推薦)
在Javascript中經(jīng)常會(huì)遇到字符串的問(wèn)題,但是如果要拼接的字符串過(guò)長(zhǎng)就比較麻煩了。
如果是在一行的,可讀性差不說(shuō),如果要換行的,會(huì)直接報(bào)錯(cuò)。
在此介紹幾種Javascript拼接字符串的技巧.
字符串相加(+)
var items = '<li class="details">' + '<span>Hello world</span>' + '</li>';
利用反斜線拼接字符串
var items = '<li class="details">' \ '<span>Hello world</span>' \ '</li>';
利用數(shù)組拼接字符串
利用數(shù)組的join方法,把數(shù)組轉(zhuǎn)成字符串.
var empList = ['<li class="details">', '<span>Hello world</span>','</li>'].join("");
在數(shù)組的基礎(chǔ)上可以封裝一個(gè)StringBuffer的方法來(lái)完成字符串的拼接。
function StringBuffer(){ this.buffer = []; } StringBuffer.prototype = { constructor: StringBuffer, append: function(str){ this.buffer.push(str); return this; }, toString: function(){ return this.buffer.join(''); } };
ES6模板字符串
ES6中引入了一種新型的字面量語(yǔ)法,稱(chēng)為模板字符串。
用反撇號(hào)`來(lái)代替原來(lái)的單引號(hào)或雙引號(hào).
$('.warning').html(` <h1>Working!</h1> <p>迷糊餐廳</p> <p>區(qū)區(qū)一只亞麻太</p> `);
字符串中的換行、縮進(jìn)、空格都會(huì)原樣輸出到新生成的字符串中。
如果想要了解字符串拼接的性能問(wèn)題,推薦去看Nicholas C.Zakas的《高性能Javascript》一書(shū)
以上這篇Javascript字符串拼接小技巧(推薦)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript綁定事件監(jiān)聽(tīng)函數(shù)的通用方法
這篇文章主要為大家詳細(xì)介紹了JavaScript綁定事件監(jiān)聽(tīng)函數(shù)的通用方法,感興趣的朋友可以參考一下2016-05-05JS運(yùn)動(dòng)特效之鏈?zhǔn)竭\(yùn)動(dòng)分析
這篇文章主要介紹了JS運(yùn)動(dòng)特效之鏈?zhǔn)竭\(yùn)動(dòng),結(jié)合實(shí)例形式分析了javascript鏈?zhǔn)竭\(yùn)動(dòng)的原理與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-01-01jQuery實(shí)現(xiàn)文字自動(dòng)橫移
本文詳細(xì)介紹了通過(guò)jquery尺寸相關(guān)函數(shù)實(shí)現(xiàn)文字自動(dòng)橫移的方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01javascript中的parseInt和parseFloat區(qū)別
這篇文章用簡(jiǎn)單的小例子演示了parseInt和parseFloat區(qū)別,有需要的朋友可以參考一下2013-07-07JS/jQuery實(shí)現(xiàn)超簡(jiǎn)單的Table表格添加,刪除行功能示例
這篇文章主要介紹了JS/jQuery實(shí)現(xiàn)超簡(jiǎn)單的Table表格添加,刪除行功能,結(jié)合實(shí)例形式詳細(xì)分析了JS與jQuery針對(duì)Table表格添加,刪除行功能的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-07-07全面解析Bootstrap中tooltip、popover的使用方法
這篇文章主要為大家詳細(xì)解析了Bootstrap中tooltip、popover的使用方法,了解提示框、彈出框的實(shí)現(xiàn)原理,感興趣的朋友可以參考一下2016-06-06