javascript的創(chuàng)建多行字符串的7種方法
JS里并沒有標(biāo)準(zhǔn)的多行字符串的表示方法，但是在用模板的時(shí)候，為了保證模板的可閱讀性，我們又不可避免的使用多行字符串，所以出現(xiàn)了各種搞法，這里以一段jade的模板作為示例，簡(jiǎn)單總結(jié)和對(duì)比一下。
一、字符串相加
這是最容易理解也很常用的一種形式，如下
var tmpl =''+
'!!! 5' +
'html' +
' include header' +
' body' +
' //if IE 6' +
' .alert.alert-error' +
' center 對(duì)不起，我們不支持IE6，請(qǐng)升級(jí)你的瀏覽器' +
' a() | IE8官方下載' +
' a() | Chrome下載' +
' include head' +
' .container' +
' .row-fluid' +
' .span8' +
' block main' +
' include pagerbar' +
' .span4' +
' include sidebar' +
' include footer' +
' include script'
優(yōu)點(diǎn):
易理解，簡(jiǎn)單，可靠
足夠靈活，可以在單個(gè)字符串中添加js邏輯
缺點(diǎn) :
并不是真正意義上的多行字符串, 如果想要真正的多行，需要自己加\n
大量的+號(hào)看上去滿天星,大量的'和", 丑陋
二、使用反斜線
這個(gè)叫續(xù)行符, 這個(gè)并非一種很常見的方式, 但是一旦用上了，還是很容易上癮，只需要加一個(gè)字符
var tmpl ='\
!!! 5\
html\
include header\
body\
//if IE 6\
.alert.alert-error\
center 對(duì)不起，我們不支持IE6，請(qǐng)升級(jí)你的瀏覽器\
a() | IE8官方下載\
a() | Chrome下載\
include head\
.container\
.row-fluid\
.span8\
block main\
include pagerbar\
.span4\
include sidebar\
include footer\
include script'
優(yōu)點(diǎn):
簡(jiǎn)單,每一行只需要有多一個(gè)\
高效！在大部分的瀏覽器上，這種方式都是最快的，
缺點(diǎn) :
致命缺陷，每一行的\必須不可以有空格，否則直接腳本錯(cuò)誤
并不是真正意義上的多行字符串, 如果想要真正的多行，需要自己加\n
盡管絕大部分的js引擎都支持它，但是它并不是ECMAScript的一部分
三、字符串?dāng)?shù)組join
var tmpl = [
'!!! 5' ,
'html' ,
' include header' ,
' body' ,
' //if IE 6' ,
' .alert.alert-error' ,
' center 對(duì)不起，我們不支持IE6，請(qǐng)升級(jí)你的瀏覽器' ,
' a() | IE8官方下載' ,
' a() | Chrome下載' ,
' include head' ,
' .container' ,
' .row-fluid' ,
' .span8' ,
' block main' ,
' include pagerbar' ,
' .span4' ,
' include sidebar' ,
' include footer' ,
' include script'].join('\n');
優(yōu)點(diǎn):
真正意義上的多行字符串
易理解，簡(jiǎn)單，可靠
足夠靈活，可以在單個(gè)字符串中添加js邏輯
缺點(diǎn) :
大量的,號(hào)和'、", 丑陋
五、String.prototype.concat
var tmpl = String.prototype.concat.call(
'!!! 5' ,
'html' ,
' include header' ,
' body' ,
' //if IE 6' ,
' .alert.alert-error' ,
' center 對(duì)不起，我們不支持IE6，請(qǐng)升級(jí)你的瀏覽器' ,
' a() | IE8官方下載' ,
' a() | Chrome下載' ,
' include head' ,
' .container' ,
' .row-fluid' ,
' .span8' ,
' block main' ,
' include pagerbar' ,
' .span4' ,
' include sidebar' ,
' include footer' ,
' include script');
優(yōu)點(diǎn):
不常用，事實(shí)上字符串的concat方法遠(yuǎn)沒有+號(hào)常見
易理解，簡(jiǎn)單，可靠
足夠靈活，可以在單個(gè)字符串中添加js邏輯
缺點(diǎn) :
并不是真正意義上的多行字符串
大量的,號(hào)和'、", 丑陋
五、heredoc
這是一種很有技巧的解決辦法, 利用了function的toString方法
function heredoc(fn) {
return fn.toString().split('\n').slice(1,-1).join('\n') + '\n'
}
var tmpl = heredoc(function(){/*
!!! 5
html
include header
body
//if IE 6
.alert.alert-error
center 對(duì)不起，我們不支持IE6，請(qǐng)升級(jí)你的瀏覽器
a() | IE8官方下載
a() | Chrome下載
include head
.container
.row-fluid
.span8
block main
include pagerbar
.span4
include sidebar
include footer
include script
*/});
優(yōu)點(diǎn):
模板字符串內(nèi)不必寫多余的任何字符，干凈，簡(jiǎn)單
真正意義上的多行字符串, 有\(zhòng)n哦
缺點(diǎn) :
不可以在單個(gè)字符串中添加js邏輯
容易被壓縮器壓縮掉，yui compressor可以通過(guò)/*!來(lái)避免被壓縮掉，uglifyjs和gcc也可以通過(guò)選項(xiàng)配置不刪除特定的注釋，這個(gè)不是大問(wèn)題
六、coffeescript
相當(dāng)于換了一個(gè)語(yǔ)言，其實(shí)這種語(yǔ)言上缺少的功能，通過(guò)coffeescript這種以js為編譯目標(biāo)的語(yǔ)言來(lái)實(shí)現(xiàn)是一種非常棒的選擇。
var tmpl = """
!!! 5
html
include header
body
//if IE 6
.alert.alert-error
center 對(duì)不起，我們不支持IE6，請(qǐng)升級(jí)你的瀏覽器
a() | IE8官方下載
a() | Chrome下載
include head
.container
.row-fluid
.span8
block main
include pagerbar
.span4
include sidebar
include footer
include script
"""
優(yōu)點(diǎn):
易理解，簡(jiǎn)單，可靠
缺點(diǎn) :
需要了解coffeescript
整個(gè)文件都需要用coffeescript來(lái)寫
七、ES6
ES6的有一個(gè)新的特性，Template Strings, 這是語(yǔ)言層面上第一次實(shí)現(xiàn)了多行字符串, 在chrome canary里打開Enable Experimental JavaScript就可以使用這個(gè)特性，另外typescript也會(huì)支持這種方式
var tmpl =
`!!! 5
html
include header
body
//if IE 6
.alert.alert-error
center 對(duì)不起，我們不支持IE6，請(qǐng)升級(jí)你的瀏覽器
a() | IE8官方下載
a() | Chrome下載
include head
.container
.row-fluid
.span8
block main
include pagerbar
.span4
include sidebar
include footer
include script`
優(yōu)點(diǎn):
易理解，原生支持
真正的多行字符串
缺點(diǎn) :
JS引擎支持有限
八、總結(jié)
看了這么些寫法，如何選擇？如果你用的是coffeescript，放心大膽的使用它支持的多行字符串寫法；如果是在客戶端，同時(shí)你解決了你的壓縮器去掉注釋的問(wèn)題，推薦使用heredoc；如果你無(wú)法解決壓縮器的問(wèn)題，使用反斜線連接吧，每行只需要加一個(gè)字符。
相關(guān)文章
這篇文章主要為大家介紹了uniapp?@click事件冒泡問(wèn)題解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
js阻止瀏覽器默認(rèn)行為的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js阻止瀏覽器默認(rèn)行為的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
這篇文章主要介紹了js中的new?Map的用法示例小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
2009-06-06
JavaScript Event事件學(xué)習(xí)第一章 Event介紹
Events是每一個(gè)JavaScript程序核心。什么是事件處理，它有什么問(wèn)題和怎樣寫出跨瀏覽器的代碼，我將在這一章做一個(gè)概述。我也會(huì)提供一些有精彩的關(guān)于事件處理程序的細(xì)節(jié)的文章。2010-02-02
JavaScript事件委托是一種常見的優(yōu)化性能的技術(shù),它利用了事件冒泡的機(jī)制,將事件處理程序綁定在父元素上,而不是綁定在每個(gè)子元素上,這篇文章主要給大家介紹了關(guān)于JavaScript事件委托(事件代理)的相關(guān)資料,需要的朋友可以參考下2024-03-03
js實(shí)現(xiàn)3D旋轉(zhuǎn)相冊(cè)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)3D旋轉(zhuǎn)相冊(cè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
詳解Javascript數(shù)據(jù)類型的轉(zhuǎn)換規(guī)則
本文主要介紹了Javascript的基本數(shù)據(jù)類型和數(shù)據(jù)類型的轉(zhuǎn)換規(guī)則。具有很好的參考價(jià)值，需要的朋友可以看下2016-12-12
Google韓國(guó)首頁(yè)圖標(biāo)動(dòng)畫效果
Google韓國(guó)首頁(yè)圖標(biāo)動(dòng)畫效果...2007-08-08
JavaScript中Textarea滾動(dòng)條不能拖動(dòng)的解決方法
這篇文章主要介紹了JavaScript中Textarea滾動(dòng)條不能拖動(dòng)的解決方法,主要針對(duì)IE瀏覽器中Textarea滾動(dòng)條綁定了onfocus事件時(shí)分析對(duì)應(yīng)的處理方法,需要的朋友可以參考下2015-12-12