寫 JavaScript 遇到多行文字常數,我的直覺寫法是玩加號接接樂,像是這樣:

<!DOCTYPE html> 

<html>
    <head>
        <style>
            fieldset { width: 170px; font-family: 微軟正黑體; }
            fieldset span { font-size: 2em; color:blueviolet; }
        </style>    
    </head>
    <body>
        <div id=d1></div>
        <script>
            var n = "黑暗執行緒"
            var h = '<fieldset>' +
                '<legend>Namecard</legend>' +
                '<div>' + 
                '<span>' + n + '</span>' +
                '</div>' +
                '</fieldset>';
            document.getElementById('d1').innerHTML = h;
        </script>
    </body>
</html>

在 C# 有字串常值 (String Literal @"...")跟字串插值 (Interpolated Strings $"....")等好用兵器,處理多行文字字串或要在其中穿插變數易如反掌。從 ES6(ES2015) 起,JavaScript 也開始支援 Template Litaral (類似 TypeScript 的 Template String),寫起來跟 C# 一樣簡潔:

<!DOCTYPE html> 

<html>
    <head>
        <style>
            fieldset { width: 170px; font-family: 微軟正黑體; }
            fieldset span { font-size: 2em; color:blueviolet; }
        </style>    
    </head>
    <body>
        <div id=d1></div>
        <script>
            var n = "黑暗執行緒"
            var h = 
`<fieldset>
    <legend>Namecard</legend>
    <div>
    <span>${n}</span>
    </div>
</fieldset>`;
            document.getElementById('d1').innerHTML = h;
        </script>
    </body>
</html>

BUT! 身為必須繼續支援 IE 的攻城獅,用新武器前都得停看聽

即使到了 IE11,不支援就是不支援... 我流下兩行清淚,又繼續玩了好幾年 JavaScript 接接樂。

今天改到一段 JavaScript,發現一段神奇的 JavsScript 字串寫法,在多行文字的每行結尾加上一個反斜線(注意:後方不能接任何字元),就能用一組引號包夾多行文字!

<!DOCTYPE html> 

<html>
    <head>
        <style>
            fieldset { width: 170px; font-family: 微軟正黑體; }
            fieldset span { font-size: 2em; color:blueviolet; }
        </style>    
    </head>
    <body>
        <div id=d1></div>
        <script>
            var n = "黑暗執行緒"
            var h = 
'<fieldset>\
    <legend>Namecard</legend>\
    <div>\
    <span>' + n + '</span>\
    </div>\
</fieldset>';
            document.getElementById('d1').innerHTML = h;
        </script>
    </body>
</html>

而且,這是古早就存在的寫法 (在 ECMAScript 5th TC39/2009/025 納入規範, 參考),連 IE 的上古模式都能支援。

像是被雷打到,我久久無法言語,很想拿鍵盤敲自己的頭。

喵的! 我居然傻傻在 JavaScript 串字串串了這麼多年... 以下開放大家嘲笑。

經大家提醒,發現我忘了提一點:以反斜線方式串接時內容不包含換行符號,如需要換行需自己插入 \n,或用更威猛的 [ ].join("\n") 組合法:

var n = "黑暗執行緒"
var h = ['<fieldset>',
    '<legend>Namecard</legend>',
    '<div>',
    '<span>' + n + '</span>',
    '</div>',
    '</fieldset>'].join("\n");

Tips of using backslash to declare multi-line string literals in JavaScript.


Comments

# by NiJia

哈哈哈哈...大家都有這樣的過往XD

# by Jack

我也是傻傻的工程師...學到一招了

# by ByTIM

我也串了三年了!

# by OkPi

我串了10年🤓

# by Huang

JS雷太多,覺得加號接接樂有語法醒目顯示與排版支援反而很好。

# by lane

身為必須繼續支援 IE 的攻城獅...真的流淚

Post a comment


81 - 43 =