close
今天才知道有反斜線的方式，很方便，但使用join是比較好的方式。
--
--
javascript的幾種使用多行字符串的方式
JS裡並沒有標準的多行字符串的表示方法，但是在用模板的時候，為了保證模板的可閱讀性，我們又不可避免的使用多行字符串，所以出現了各種搞法，這里以一段jade的模板作為示例，簡單總結和對比一下。
1. 字符串相加
這是最容易理解也很常用的一種形式，如下
var tmpl = '' +
'!!! 5' +
'html' +
' include header' +
' body' +
' //if IE 6' +
' .alert.alert-error' +
' center對不起，我們不支持IE6，請升級你的瀏覽器' +
' a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下載' +
' a(href= "https://www.google.com/intl/en/chrome/browser/") | Chrome下載' +
' include head' +
' .container' +
' .row-fluid' +
' .span8' +
' block main' +
' include pagerbar' +
' .span4' +
' include sidebar' +
' include footer' +
' include script'
優點:
- 易理解，簡單，可靠
- 足夠靈活，可以在單個字符串中添加js邏輯
缺點 :
- 並不是真正意義上的多行字符串,如果想要真正的多行，需要自己加
\n - 大量的
+號看上去滿天星,大量的'和",醜陋
2. 反斜線
這個叫續行符, 這個並非一種很常見的方式, 但是一旦用上了，還是很容易上癮，只需要加一個字符
var tmpl = '\
!!! 5\
html\
include header\
body\
//if IE 6\
.alert.alert-error\
center 對不起，我們不支持IE6，請升級你的瀏覽器\
a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下載\
a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下載\
include head\
.container\
.row-fluid\
.span8\
block main\
include pagerbar\
.span4\
include sidebar\
include footer\
include script'
優點:
- 簡單,每一行只需要有多一個
\ - 高效！在大部分的瀏覽器上，這種方式都是最快的，看這個效率對比
缺點 :
- 致命缺陷，每一行的
\必須不可以有空格，否則直接腳本錯誤 - 並不是真正意義上的多行字符串,如果想要真正的多行，需要自己加
\n - 儘管絕大部分的js引擎都支持它，但是它並不是ECMAScript的一部分(我並沒有研究規範，這句話是從google的編碼規範翻譯過來的)
3. 字符串數組join
var tmpl = [
'!!! 5' ,
'html' ,
' include header' ,
' body' ,
' //if IE 6' ,
' .alert.alert-error' ,
' center對不起，我們不支持IE6，請升級你的瀏覽器' ,
' a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下載' ,
' a(href="https ://www.google.com/intl/en/chrome/browser/") | Chrome下載' ,
' include head' ,
' .container' ,
' .row-fluid' ,
' .span8' ,
' block main' ,
' include pagerbar' ,
' .span4' ,
' include sidebar' ,
' include footer' ,
' include script' ]. join ( '\n' );
優點:
- 真正意義上的多行字符串
- 易理解，簡單，可靠
- 足夠靈活，可以在單個字符串中添加js邏輯
缺點 :
- 大量的
,號和'、",醜陋
--
全站熱搜
留言列表
AI 
