原文:http://asenbozhilov.com/articles/multiline-strings.html
多行字符串的作用是用來提高源代碼的可讀性.尤其是當你處理預定義好的較長字符串時,把這種字符串分成多行書寫更有助於提高代碼的可讀性和可維護性.在一些語言中,多行字符串還可以用來做代碼注釋.
大部分動態腳本語言都支持多行字符串,比如Python, Ruby, PHP. 但Javascript呢?
譯者注:python中可以使用兩種多行字符串的寫法,一種是使用三引號,也是python中多行注釋的方法,這種方法產生的多行字符串是真正的多行.也就是說,解釋器會認為每行的結尾處的確有一個"\n":
>>>print("""我 你 他 """) 我 你 他另一種寫法是
>>>print("我\ 你\ 他\ ") 我你他這種寫法也是下面要講的JavaScript目前實現的寫法,它產生的實際上只有一行字符串.但稱它為多行指的是在源代碼中這個字符串占用了多個物理行(對應的概念是邏輯行).
Ruby, PHP中是通過Here document實現多行字符串.
你在網上見過下面這種結論嗎?
"Javascript不支持多行字符串."
"多行字符串不是合法的JavaScript語法."
如果是的話,忘掉它們吧,這樣的說法是不對的.Javascript其實支持多行字符串.
關於JavaScript最奇怪的一件事是,盡管這門語言有着非常好的規范文檔ECMA-262.但卻有很多關於該語言的誤解.網上有太多描述不恰當的或者完全錯誤的文章.
當然,每個人都有權選擇自己去讀什么文章,有權選擇是否相信文章中給出的結論.但當我在博客上,郵件列表上,twitter上,或者其他任何地方閱讀關於JavaScript的東西時,我總是會動手進行測試,最主要的是我會打開ECMA-262,把文中給出的信息和文檔做對比,看看是不是像他說的那樣.也許你會問我:"那你為什么還要讀別人的文章啊?".是啊,既然有了ECMA-262文檔,我們為何還要去讀別人寫的文章呢?首先,規范文檔是比較難閱讀和難理解的.你必須很熟悉文檔中提到的那些抽象的東西才能真正的弄懂它.而且你必須閱讀完整的相關內容.如果你跳過一些單詞或句子,你就可能理解錯誤.
寫在博客中的文章可以看作是更高層次的文檔.通常意味着作者是在讀過文檔之后,用更容易理解的話語和代碼片段解釋了文檔中的內容.這樣的文章才算是好文章.
多行字符串就是我上面所說的一個例子.它確實是正式規范(ECMA 265 5th edition)的一部分,ES5擴展了字符串字面量的語法.在(7.8.4 String Literals)中添加了DoubleStringCharacter
和 SingleStringCharacter
: LineContinuation
.
LineContinuation
的語法是:
\ LineTerminatorSequence
LineTerminatorSequence
指的是下面這些字符中的一個:
換行符 | <LF> |
回車符 | <CR> |
行分割符 | <LS> |
段分隔符 | <PS> |
換句話說,你可以通過轉義行終止符來實現多行字符串.你必須這么做,否則會得到一個語法錯誤.
var htmlStr = '\
<div>\
content\
</div>\
';
當他,這種寫法只支持ECMA-262-5的環境.(譯者注:實際上,ES3的環境也全都支持)
但是需要注意的是,當輸出字符串時,換行符是不會顯示出來的.如果你需要真實的換行,必須在反斜杠前面加上一個\n
.
如果你需要兼容舊的引擎環境,你應該使用多個字符串相連接的辦法,或者把多個字符串分別放在一個數組的元素中,最后join它們
var htmlStr = '<div>' +
'content' +
'</div>';
var htmlStr = [
'<div>',
'content',
'</div>'
].join('');
JavaScript風格的多行字符串是有點小丑,而且很容易出錯.不過有個好消息是,在未來版本的規范中,將會有一個 Template Strings
: http://wiki.ecmascript.org/doku.php?id=harmony:quasis.
其中最大的不同是,LineTerminatorSequence
可以直接出現在字符串字面量中而不需要使用反斜杠轉義.
譯者注:再介紹兩種沒有什么實際用途的實現多行字符串的寫法.其實最好不要看.
1.利用E4X的寫法
var string = (<xml><![CDATA[
我 你 他 ]]></xml>).toString().trim(); console.log(string); 我 你 他E4X只有Firefox支持,支持了很多年了,但其他瀏覽器一直不實現,所以也流行不起來,而且從Firefox17開始,E4X將會被默認禁用.
2,利用函數內部的多行注釋
function hereDoc(f) { return f.toString().replace(/^[^\/]+\/\*!?\s?/, '').replace(/\*\/[^\/]+$/, ''); } var string = hereDoc(function () {/*
我 你 他 */}); console.log(string) 我 你 他Firefox去年的版本還不支持這種寫法,原因是在調用函數的toString方法時,會把注釋過濾掉.不過現在支持了.