4

【笨問題】JavaScript 的多行字串常數寫法

 3 years ago
source link: https://blog.darkthread.net/blog/js-multi-line-string-literals/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
【笨問題】JavaScript 的多行字串常數寫法-黑暗執行緒

寫 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 的攻城獅，用新武器前都得停看聽：

Fig1_637429462489986969.png

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

Fig2_637429462490589849.png

今天改到一段 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 的上古模式都能支援。

Fig3_637429462491126198.png

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

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

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

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK