[譯]JavaScript:多行字符串


原文: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)中添加了DoubleStringCharacterSingleStringCharacter: 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方法時,會把注釋過濾掉.不過現在支持了.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM