[譯]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)中添加了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方法時,會把註釋過濾掉.不過如今支持了.